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

首頁>技術>沙漠盡頭的狼2020-01-22 01:55

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

閱讀導航

本文背景程式碼實現本文參考原始碼1. 本文背景

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

2. 程式碼實現

使用 .NET CORE 3.1 建立名為 “InstagramRedesign” 的WPF模板專案，新增1個Nuget庫：MaterialDesignThemes，版本為最新預覽版3.1.0-ci948。

解決方案主要檔案目錄組織結構：

InstagramRedesignAssets數張圖片，從Github上下載App.xamlMainWindow.xamlMainWindow.xaml.cs2.1 引入樣式

檔案【App.xaml】，在 StartupUri 中設定啟動的檢視【MainWindow.xaml】，並在【Application.Resources】節點增加 MaterialDesignThemes庫的樣式檔案：

&lt;Application.Resources&gt;        &lt;ResourceDictionary&gt;            &lt;ResourceDictionary.MergedDictionaries&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml&#34; /&gt;                &lt;ResourceDictionary Source=&#34;pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml&#34; /&gt;            &lt;/ResourceDictionary.MergedDictionaries&gt;        &lt;/ResourceDictionary&gt;    &lt;/Application.Resources&gt;

2.2 演示窗體佈局

檔案【MainWindow.xaml】，佈局程式碼，原始碼如下：

&lt;Window x:Class=&#34;InstagramRedesign.MainWindow&#34;        xmlns=&#34;/file/2020/01/22/20200122015354_469.jpg.aspx        xmlns:materialDesign=&#34;/file/2020/01/22/20200122015355_470.jpg        xmlns:d=&#34;/file/2020/01/22/20200122015356_471.jpg.aspx        xmlns:x=&#34;/file/2020/01/22/20200122015357_472.jpg.aspx        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34; MouseLeftButtonDown=&#34;MoveWindow_MouseLeftButtonDown&#34;        mc:Ignorable=&#34;d&#34; Height=&#34;600&#34; Width=&#34;1080&#34; ResizeMode=&#34;NoResize&#34; WindowStartupLocation=&#34;CenterScreen&#34; WindowStyle=&#34;None&#34;&gt;    &lt;Grid Background=&#34;#FF44325F&#34;&gt;        &lt;Grid Height=&#34;100&#34; VerticalAlignment=&#34;Top&#34; Background=&#34;White&#34;&gt;            &lt;Image Source=&#34;Assets/insta.jpg&#34; HorizontalAlignment=&#34;Left&#34; Margin=&#34;10 0&#34;/&gt;            &lt;TextBlock Text=&#34;Sunshine mixed with a little Hurricane✨&#34; Margin=&#34;10&#34; FontSize=&#34;14&#34; Foreground=&#34;#FF2A6088&#34; HorizontalAlignment=&#34;Center&#34;/&gt;            &lt;StackPanel Orientation=&#34;Horizontal&#34; HorizontalAlignment=&#34;Center&#34;&gt;                &lt;StackPanel VerticalAlignment=&#34;Bottom&#34;&gt;                    &lt;TextBlock Text=&#34;追隨者&#34; Margin=&#34;10 0&#34; FontSize=&#34;16&#34; FontWeight=&#34;Bold&#34; Foreground=&#34;#FF2A6088&#34; /&gt;                    &lt;TextBlock Text=&#34;2K&#34; HorizontalAlignment=&#34;Center&#34; Margin=&#34;5 0 5 5&#34; FontSize=&#34;16&#34; Foreground=&#34;#FF2A6088&#34;/&gt;                &lt;/StackPanel&gt;                &lt;StackPanel VerticalAlignment=&#34;Bottom&#34;&gt;                    &lt;TextBlock Text=&#34;跟隨&#34; Margin=&#34;10 0&#34; FontSize=&#34;16&#34; FontWeight=&#34;Bold&#34; Foreground=&#34;#FF2A6088&#34;/&gt;                    &lt;TextBlock Text=&#34;957&#34; HorizontalAlignment=&#34;Center&#34; Margin=&#34;5 0 5 5&#34; FontSize=&#34;16&#34; Foreground=&#34;#FF2A6088&#34;/&gt;                &lt;/StackPanel&gt;                &lt;StackPanel VerticalAlignment=&#34;Bottom&#34;&gt;                    &lt;TextBlock Text=&#34;帖子&#34; Margin=&#34;10 0&#34; FontSize=&#34;16&#34; FontWeight=&#34;Bold&#34; Foreground=&#34;#FF2A6088&#34;/&gt;                    &lt;TextBlock Text=&#34;145&#34; HorizontalAlignment=&#34;Center&#34; Margin=&#34;5 0 5 5&#34; FontSize=&#34;16&#34; Foreground=&#34;#FF2A6088&#34;/&gt;                &lt;/StackPanel&gt;            &lt;/StackPanel&gt;        &lt;/Grid&gt;        &lt;StackPanel Orientation=&#34;Horizontal&#34; HorizontalAlignment=&#34;Right&#34; VerticalAlignment=&#34;Top&#34; Margin=&#34;20&#34; &gt;            &lt;TextBlock FontFamily=&#34;Nirmala UI&#34; Text=&#34;Dotnet9.com&#34; FontSize=&#34;30&#34; Margin=&#34;20&#34; VerticalAlignment=&#34;Center&#34; Foreground=&#34;White&#34;/&gt;            &lt;StackPanel HorizontalAlignment=&#34;Right&#34;&gt;                &lt;Ellipse Height=&#34;150&#34; Width=&#34;150&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;3&#34;&gt;                    &lt;Ellipse.Fill&gt;                        &lt;ImageBrush ImageSource=&#34;/file/2020/01/22/20200122015358_473.jpg.png&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/Ellipse.Fill&gt;                &lt;/Ellipse&gt;                &lt;Button HorizontalAlignment=&#34;Center&#34; Margin=&#34;10&#34; Content=&#34;編輯個人資訊&#34; Background=&#34;{x:Null}&#34; BorderBrush=&#34;White&#34;/&gt;            &lt;/StackPanel&gt;        &lt;/StackPanel&gt;        &lt;StackPanel Orientation=&#34;Horizontal&#34; VerticalAlignment=&#34;Top&#34; Margin=&#34;10 110&#34;&gt;            &lt;TextBox Width=&#34;150&#34; materialDesign:HintAssist.Hint=&#34;搜尋&#34; Foreground=&#34;White&#34;/&gt;            &lt;materialDesign:PackIcon Kind=&#34;AccountSearch&#34; Foreground=&#34;White&#34; VerticalAlignment=&#34;Center&#34;/&gt;        &lt;/StackPanel&gt;        &lt;ListView HorizontalAlignment=&#34;Right&#34; Margin=&#34;0 220 0 0&#34;&gt;            &lt;ListViewItem Height=&#34;50&#34; Width=&#34;260&#34;&gt;                &lt;Grid Height=&#34;30&#34; Width=&#34;250&#34;&gt;                    &lt;Ellipse Width=&#34;30&#34; Height=&#34;30&#34; StrokeThickness=&#34;0.5&#34; Stroke=&#34;White&#34; HorizontalAlignment=&#34;Left&#34;&gt;                        &lt;Ellipse.Fill&gt;                            &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-192439.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;/Ellipse.Fill&gt;                    &lt;/Ellipse&gt;                    &lt;TextBlock Width=&#34;150&#34; HorizontalAlignment=&#34;Left&#34;  Margin=&#34;35 0&#34; Text=&#34;Your friend John is on instagram as John_J&#34; FontSize=&#34;10&#34; TextWrapping=&#34;Wrap&#34;/&gt;                    &lt;Button HorizontalAlignment=&#34;Right&#34; Content=&#34;跟隨&#34; FontSize=&#34;10&#34; Margin=&#34;10 0&#34; Height=&#34;20&#34; Padding=&#34;10 0&#34;/&gt;                &lt;/Grid&gt;            &lt;/ListViewItem&gt;            &lt;ListViewItem Height=&#34;50&#34; Width=&#34;260&#34;&gt;                &lt;Grid Height=&#34;30&#34; Width=&#34;250&#34;&gt;                    &lt;Ellipse Width=&#34;30&#34; Height=&#34;30&#34; StrokeThickness=&#34;0.5&#34; Stroke=&#34;White&#34; HorizontalAlignment=&#34;Left&#34;&gt;                        &lt;Ellipse.Fill&gt;                            &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-301290.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;/Ellipse.Fill&gt;                    &lt;/Ellipse&gt;                    &lt;TextBlock Width=&#34;150&#34; HorizontalAlignment=&#34;Left&#34;  Margin=&#34;35 0&#34; Text=&#34;Your friend Lucy is on instagram as LLucy&#34; FontSize=&#34;10&#34; TextWrapping=&#34;Wrap&#34;/&gt;                    &lt;Button HorizontalAlignment=&#34;Right&#34; Content=&#34;跟隨&#34; FontSize=&#34;10&#34; Margin=&#34;10 0&#34; Height=&#34;20&#34; Padding=&#34;10 0&#34;/&gt;                &lt;/Grid&gt;            &lt;/ListViewItem&gt;            &lt;ListViewItem Height=&#34;50&#34; Width=&#34;260&#34;&gt;                &lt;Grid Height=&#34;30&#34; Width=&#34;250&#34;&gt;                    &lt;Ellipse Width=&#34;30&#34; Height=&#34;30&#34; StrokeThickness=&#34;0.5&#34; Stroke=&#34;White&#34; HorizontalAlignment=&#34;Left&#34;&gt;                        &lt;Ellipse.Fill&gt;                            &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-614810.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;/Ellipse.Fill&gt;                    &lt;/Ellipse&gt;                    &lt;TextBlock Width=&#34;150&#34; HorizontalAlignment=&#34;Left&#34;  Margin=&#34;35 0&#34; Text=&#34;Your friend _b_b_jax is on instagram as bbjax&#34; FontSize=&#34;10&#34; TextWrapping=&#34;Wrap&#34;/&gt;                    &lt;Button HorizontalAlignment=&#34;Right&#34; Content=&#34;跟隨&#34; FontSize=&#34;10&#34; Margin=&#34;10 0&#34; Height=&#34;20&#34; Padding=&#34;10 0&#34;/&gt;                &lt;/Grid&gt;            &lt;/ListViewItem&gt;            &lt;ListViewItem Height=&#34;50&#34; Width=&#34;260&#34;&gt;                &lt;Grid Height=&#34;30&#34; Width=&#34;250&#34;&gt;                    &lt;Ellipse Width=&#34;30&#34; Height=&#34;30&#34; StrokeThickness=&#34;0.5&#34; Stroke=&#34;White&#34; HorizontalAlignment=&#34;Left&#34;&gt;                        &lt;Ellipse.Fill&gt;                            &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-638791.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;/Ellipse.Fill&gt;                    &lt;/Ellipse&gt;                    &lt;TextBlock Width=&#34;150&#34; HorizontalAlignment=&#34;Left&#34;  Margin=&#34;35 0&#34; Text=&#34;Your friend Carl is on instagram as CJ&#34; FontSize=&#34;10&#34; TextWrapping=&#34;Wrap&#34;/&gt;                    &lt;Button HorizontalAlignment=&#34;Right&#34; Content=&#34;跟隨&#34; FontSize=&#34;10&#34; Margin=&#34;10 0&#34; Height=&#34;20&#34; Padding=&#34;10 0&#34;/&gt;                &lt;/Grid&gt;            &lt;/ListViewItem&gt;        &lt;/ListView&gt;        &lt;StackPanel Margin=&#34;0 150 300 0&#34;&gt;            &lt;StackPanel Orientation=&#34;Horizontal&#34; Margin=&#34;10&#34;&gt;                &lt;Ellipse Height=&#34;70&#34; Width=&#34;70&#34; Margin=&#34;10&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;3&#34;&gt;                    &lt;Ellipse.Fill&gt;                        &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-192439.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/Ellipse.Fill&gt;                &lt;/Ellipse&gt;                &lt;Ellipse Height=&#34;70&#34; Width=&#34;70&#34; Margin=&#34;10&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;3&#34;&gt;                    &lt;Ellipse.Fill&gt;                        &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-301290.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/Ellipse.Fill&gt;                &lt;/Ellipse&gt;                &lt;Ellipse Height=&#34;70&#34; Width=&#34;70&#34; Margin=&#34;10&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;3&#34;&gt;                    &lt;Ellipse.Fill&gt;                        &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-614810.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/Ellipse.Fill&gt;                &lt;/Ellipse&gt;                &lt;Ellipse Height=&#34;70&#34; Width=&#34;70&#34; Margin=&#34;10&#34; Stroke=&#34;White&#34; StrokeThickness=&#34;3&#34;&gt;                    &lt;Ellipse.Fill&gt;                        &lt;ImageBrush ImageSource=&#34;Assets/pexels-photo-638791.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/Ellipse.Fill&gt;                &lt;/Ellipse&gt;            &lt;/StackPanel&gt;            &lt;ScrollViewer Height=&#34;340&#34;&gt;                &lt;StackPanel&gt;                    &lt;StackPanel Orientation=&#34;Horizontal&#34; HorizontalAlignment=&#34;Center&#34;&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/pexels-photo-257360.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/pexels-photo-288583.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/pexels-photo-790164.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/StackPanel&gt;                    &lt;StackPanel Orientation=&#34;Horizontal&#34; HorizontalAlignment=&#34;Center&#34;&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/food-salad-restaurant-person.jpg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/pexels-photo-797640.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                        &lt;Image Width=&#34;200&#34; Height=&#34;200&#34; Margin=&#34;20&#34; Source=&#34;Assets/pexels-photo-790164.jpeg&#34; Stretch=&#34;UniformToFill&#34;/&gt;                    &lt;/StackPanel&gt;                &lt;/StackPanel&gt;            &lt;/ScrollViewer&gt;        &lt;/StackPanel&gt;    &lt;/Grid&gt;&lt;/Window&gt;

檔案【MainWindow.xaml.cs】，後臺站長自己加了一個窗體移動操作：

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

3.本文參考視訊一：C# WPF Material Design UI: Redesign Instagram，配套原始碼：Instagram。C# WPF開源控制元件庫《MaterialDesignInXAML》4.原始碼

效果圖實現程式碼在文中已經全部給出，從配套原始碼中拷貝圖片，按解決方案目錄組織程式碼檔案即可執行。

時間如流水，只能流去不流回！

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

130

XAML

Instagram

∨ 「3.0」一個人開發一個App，小程式從0到1，刪減新增

熱門排行

劇多