.NET CORE(C#) WPF 重新設計Instagram

来源:https://www.cnblogs.com/Dotnet9-com/archive/2020/01/21/12227387.html

微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 重新設計Instagram 閱讀導航 1. 本文背景 2. 代碼實現 3. 本文參考 4. 源碼 1. 本文背景 老外的一個界 ...


微信公眾號:Dotnet9,網站:Dotnet9,問題或建議:請網站留言
如果對您有所幫助:歡迎贊賞

.NET CORE(C#) WPF 重新設計Instagram

閱讀導航

  1. 本文背景
  2. 代碼實現
  3. 本文參考
  4. 源碼

1. 本文背景

老外的一個界面設計,站長覺得不錯,分享給大家作為參考,難度不大,主要是界面佈局設計。

界面設計欣賞

2. 代碼實現

使用 .NET CORE 3.1 創建名為 “InstagramRedesign” 的WPF模板項目,添加1個Nuget庫:MaterialDesignThemes,版本為最新預覽版3.1.0-ci948。

解決方案主要文件目錄組織結構:

  • InstagramRedesign
    • Assets
      • 數張圖片,從Github上下載
    • App.xaml
    • MainWindow.xaml
      • MainWindow.xaml.cs

2.1 引入樣式

文件【App.xaml】,在 StartupUri 中設置啟動的視圖【MainWindow.xaml】,併在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式文件:

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

2.2 演示窗體佈局

文件【MainWindow.xaml】,佈局代碼,源碼如下:

<Window x:Class="InstagramRedesign.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" MouseLeftButtonDown="MoveWindow_MouseLeftButtonDown"
        mc:Ignorable="d" Height="600" Width="1080" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None">
    <Grid Background="#FF44325F">
        <Grid Height="100" VerticalAlignment="Top" Background="White">
            <Image Source="Assets/insta.jpg" HorizontalAlignment="Left" Margin="10 0"/>
            <TextBlock Text="Sunshine mixed with a little Hurricane✨" Margin="10" FontSize="14" Foreground="#FF2A6088" HorizontalAlignment="Center"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <StackPanel VerticalAlignment="Bottom">
                    <TextBlock Text="追隨者" Margin="10 0" FontSize="16" FontWeight="Bold" Foreground="#FF2A6088" />
                    <TextBlock Text="2K" HorizontalAlignment="Center" Margin="5 0 5 5" FontSize="16" Foreground="#FF2A6088"/>
                </StackPanel>
                <StackPanel VerticalAlignment="Bottom">
                    <TextBlock Text="跟隨" Margin="10 0" FontSize="16" FontWeight="Bold" Foreground="#FF2A6088"/>
                    <TextBlock Text="957" HorizontalAlignment="Center" Margin="5 0 5 5" FontSize="16" Foreground="#FF2A6088"/>
                </StackPanel>
                <StackPanel VerticalAlignment="Bottom">
                    <TextBlock Text="帖子" Margin="10 0" FontSize="16" FontWeight="Bold" Foreground="#FF2A6088"/>
                    <TextBlock Text="145" HorizontalAlignment="Center" Margin="5 0 5 5" FontSize="16" Foreground="#FF2A6088"/>
                </StackPanel>
            </StackPanel>
        </Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20" >
            <TextBlock FontFamily="Nirmala UI" Text="Dotnet9.com" FontSize="30" Margin="20" VerticalAlignment="Center" Foreground="White"/>
            <StackPanel HorizontalAlignment="Right">
                <Ellipse Height="150" Width="150" Stroke="White" StrokeThickness="3">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <Button HorizontalAlignment="Center" Margin="10" Content="編輯個人信息" Background="{x:Null}" BorderBrush="White"/>
            </StackPanel>
        </StackPanel>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10 110">
            <TextBox Width="150" materialDesign:HintAssist.Hint="搜索" Foreground="White"/>
            <materialDesign:PackIcon Kind="AccountSearch" Foreground="White" VerticalAlignment="Center"/>
        </StackPanel>
        <ListView HorizontalAlignment="Right" Margin="0 220 0 0">
            <ListViewItem Height="50" Width="260">
                <Grid Height="30" Width="250">
                    <Ellipse Width="30" Height="30" StrokeThickness="0.5" Stroke="White" HorizontalAlignment="Left">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Assets/pexels-photo-192439.jpeg" Stretch="UniformToFill"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Width="150" HorizontalAlignment="Left"  Margin="35 0" Text="Your friend John is on instagram as John_J" FontSize="10" TextWrapping="Wrap"/>
                    <Button HorizontalAlignment="Right" Content="跟隨" FontSize="10" Margin="10 0" Height="20" Padding="10 0"/>
                </Grid>
            </ListViewItem>
            <ListViewItem Height="50" Width="260">
                <Grid Height="30" Width="250">
                    <Ellipse Width="30" Height="30" StrokeThickness="0.5" Stroke="White" HorizontalAlignment="Left">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Assets/pexels-photo-301290.jpeg" Stretch="UniformToFill"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Width="150" HorizontalAlignment="Left"  Margin="35 0" Text="Your friend Lucy is on instagram as LLucy" FontSize="10" TextWrapping="Wrap"/>
                    <Button HorizontalAlignment="Right" Content="跟隨" FontSize="10" Margin="10 0" Height="20" Padding="10 0"/>
                </Grid>
            </ListViewItem>
            <ListViewItem Height="50" Width="260">
                <Grid Height="30" Width="250">
                    <Ellipse Width="30" Height="30" StrokeThickness="0.5" Stroke="White" HorizontalAlignment="Left">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Assets/pexels-photo-614810.jpeg" Stretch="UniformToFill"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Width="150" HorizontalAlignment="Left"  Margin="35 0" Text="Your friend _b_b_jax is on instagram as bbjax" FontSize="10" TextWrapping="Wrap"/>
                    <Button HorizontalAlignment="Right" Content="跟隨" FontSize="10" Margin="10 0" Height="20" Padding="10 0"/>
                </Grid>
            </ListViewItem>
            <ListViewItem Height="50" Width="260">
                <Grid Height="30" Width="250">
                    <Ellipse Width="30" Height="30" StrokeThickness="0.5" Stroke="White" HorizontalAlignment="Left">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Assets/pexels-photo-638791.jpeg" Stretch="UniformToFill"/>
                        </Ellipse.Fill>
                    </Ellipse>
                    <TextBlock Width="150" HorizontalAlignment="Left"  Margin="35 0" Text="Your friend Carl is on instagram as CJ" FontSize="10" TextWrapping="Wrap"/>
                    <Button HorizontalAlignment="Right" Content="跟隨" FontSize="10" Margin="10 0" Height="20" Padding="10 0"/>
                </Grid>
            </ListViewItem>
        </ListView>
        <StackPanel Margin="0 150 300 0">
            <StackPanel Orientation="Horizontal" Margin="10">
                <Ellipse Height="70" Width="70" Margin="10" Stroke="White" StrokeThickness="3">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Assets/pexels-photo-192439.jpeg" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Height="70" Width="70" Margin="10" Stroke="White" StrokeThickness="3">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Assets/pexels-photo-301290.jpeg" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Height="70" Width="70" Margin="10" Stroke="White" StrokeThickness="3">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Assets/pexels-photo-614810.jpeg" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Height="70" Width="70" Margin="10" Stroke="White" StrokeThickness="3">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Assets/pexels-photo-638791.jpeg" Stretch="UniformToFill"/>
                    </Ellipse.Fill>
                </Ellipse>
            </StackPanel>
            <ScrollViewer Height="340">
                <StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <Image Width="200" Height="200" Margin="20" Source="Assets/pexels-photo-257360.jpeg" Stretch="UniformToFill"/>
                        <Image Width="200" Height="200" Margin="20" Source="Assets/pexels-photo-288583.jpeg" Stretch="UniformToFill"/>
                        <Image Width="200" Height="200" Margin="20" Source="Assets/pexels-photo-790164.jpeg" Stretch="UniformToFill"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                        <Image Width="200" Height="200" Margin="20" Source="Assets/food-salad-restaurant-person.jpg" Stretch="UniformToFill"/>
                        <Image Width="200" Height="200" Margin="20" Source="Assets/pexels-photo-797640.jpeg" Stretch="UniformToFill"/>
                        <Image Width="200" Height="200" Margin="20" Source="Assets/pexels-photo-790164.jpeg" Stretch="UniformToFill"/>
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </StackPanel>
    </Grid>
</Window>

文件【MainWindow.xaml.cs】,後臺站長自己加了一個窗體移動操作:

private void MoveWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}

3.本文參考

  1. 視頻一:C# WPF Material Design UI: Redesign Instagram,配套源碼:Instagram
  2. C# WPF開源控制項庫《MaterialDesignInXAML》

4.源碼

效果圖實現代碼在文中已經全部給出,從配套源碼中拷貝圖片,按解決方案目錄組織代碼文件即可運行。


除非註明,文章均由 Dotnet9 整理髮布,歡迎轉載。

轉載請註明本文地址:https://dotnet9.com/7439.html

歡迎掃描下方二維碼關註 Dotnet9 的微信公眾號,本站會及時推送最新技術文章

Dotnet9


時間如流水,只能流去不流回!

點擊《【閱讀原文】》,本站還有更多技術類文章等著您哦!!!

此刻順便為我點個《【再看】》可好?


您的分享是我們最大的動力!

更多相關文章
  • 原文地址: "http://www.work100.net/training/java" 更多教程: "光束雲 免費課程" Java入門 Java 是由 Sun Microsystems 公司於1995年5月推出的高級程式設計語言。 Java 可運行於多個平臺,如 、`Mac OS UNIX`版本的 ...
  • 需要源碼、JDK1.6 、編碼風格參考阿裡java規約 7/12開始 有點意識到自己喜歡理論大而泛的模糊知識的學習,而不喜歡實踐和細節的打磨,是因為粗心浮躁導致的麽? cron表達式使用 設計能力、領域建模能力 其他: 海明威的硬幣:老人與海 工具準備: java編程思想電子版 別人整理的思維導圖 ...
  • 在IntelliJ Idea中HTML格式化時,預設head和body標簽以及body下的標簽都不會縮進,這就導致你每次寫好html時候格式化的時候所有標簽都是同一層級沒有縮進,一般我們寫html都會層級關係標簽嵌套,通過縮進看代碼結構就很清晰明朗 ...
  • 1.什麼是二維碼? ​ (百度百科):二維碼又稱二維條碼,常見的二維碼為QR Code,QR全稱Quick Response,是一個近幾年來移動設備上超流行的一種編碼方式,它比傳統的Bar Code條形碼能存更多的信息,也能表示更多的數據類型。 2.利用ZXING生成二維碼 ​ ·對應POM <de ...
  • 近期項目用到了緩存,我選用的是主流的google.guava作本地緩存,redis作分散式 緩存,先說說我對本地緩存和分散式緩存的理解吧,可能不太成熟的地方,大家指出,一起 學習.本地緩存的特點是速度快,不會受到網路阻塞的干擾,但由於是放在本地記憶體中,所 以容量較小,不能項目間共用比IO效率高比re ...
  • a.php <?phpheader("Content-type: text/html; charset=utf-8");date_default_timezone_set("Asia/Shanghai"); $start = microtime(true); function fsockopen_g ...
  • ©Copyright 蕃薯耀 2020-01-21 https://www.cnblogs.com/fanshuyao/ 一、第一步,引用依賴類,在Pom.xml加入依賴 <dependencies> <dependency> <groupId>org.springframework</groupI ...
  • 前言 只有光頭才能變強。 文本已收錄至我的GitHub精選文章,歡迎Star : "https://github.com/ZhongFuCheng3y/3y" 不知道大家的公司用Elasticsearch多不多,反正我公司的是有在用的。平時聽同事們聊天肯定避免不了不認識的技術棧,例如說:把數據放在引 ...
一周排行
  • 一、引言 按照專用隊列解釋: MachineName\Private$\QueueName,只針對於本機的程式才可以調用的隊列,有些情況下為了安全起見定義為私有隊列。所以剛開始的時候認為,要想訪問遠程消息隊列,只能使用公共隊列。但是後來發現,公共隊列依賴Domain Controller(域控),在 ...
  • 本文只對api介面,header請求參數進行簡單驗證,起到拋磚引玉使用,需要深入驗證,請自行擴展 項目目錄結構如圖 中間件類 using ApiMiddleware.Common.DataEnityModel; using ApiMiddleware.Common.DbContext; using ...
  • 前言:由於公司占時沒有運維,出於微服務的需要,Apollo只能先裝在windows 阿裡雲上跑起來,由於環境及網路等問題,在安裝過程中遇到很多坑,算是一個個坑填完後,最終實現。 一. java jdk環境 java jdk 1.8下載地址: https://www.oracle.com/java/t ...
  • 前言 nuget 是 .net 的常用包管理器,目前已經內置到 Visual Studio 2012 以後的版本。大多數 .net 包都托管在 nuget.org,包括 .net core 框架基礎包,得益於 .net core 的模塊化設計,很多非核心包都可以進行一定程度的獨立升級。 製作並上傳 ...
  • 簡單的介紹一下集合,通俗來講就是用來保管多個數據的方案。比如說我們是一個公司的倉庫管理,公司有一堆貨物需要管理,有同類的,有不同類的,總而言之就是很多、很亂。我們對照集合的概念對倉庫進行管理的話,那麼 數組就是將一堆貨整整齊齊的碼在倉庫的某個地方,普通列表也是如此;Set就是在倉庫里有這麼一個貨架, ...
  • 中間件分類 ASP.NET Core 中間件的配置方法可以分為以上三種,對應的Helper方法分別是:Run(), Use(), Map()。 Run(),使用Run調用中間件的時候,會直接返回一個響應,所以後續的中間件將不會被執行了。 Use(),它會對請求做一些工作或處理,例如添加一些請求的上下 ...
  • 字元串的常用操作 很好理解 字元串可以用 ' + ' 連接,或者乘一個常數重覆輸出字元串 字元串的索引操作 通過一對中括弧可以找到字元串中的某個字元 可以通過正負數雙向操作噢 用一個中括弧來實現 為什麼沒有-0??去清醒腦子想想 -0 和 0 有差嗎? 還有一個切片操作 就像切菜那樣簡單,同樣是中括 ...
  • title: Java基礎語法(3) 運算符 blog: "CSDN" data: "Java學習路線及視頻" 1.算術運算符 算術運算符的註意問題 如果對負數取模,可以把模數負號忽略不記,如:5% 2=1。 但被模數是負數則不可忽略。此外,取模運算的結果不一定總是整數。 對於除號“/”,它的整數除 ...
  • 下麵是互相轉換的代碼: 有想要瞭解更多關於python知識的請在下方評論或私信小編 ...
  • 引言 構建分散式系統並不容易。然而,人們日常所使用的應用大多基於分散式系統,在短時間內依賴於分散式系統的現狀並不會改變。ApacheZooKeeper旨在減輕構建健壯的分散式系統的任務。ZooKeeper基於 分散式計算的核心概念而設計,主要目的是給開發人員提供一套容易理解和開發的介面,從而簡化分佈 ...
x