.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多不多,反正我公司的是有在用的。平時聽同事們聊天肯定避免不了不認識的技術棧,例如說:把數據放在引 ...
一周排行
  • 背景 當我們對ASP.Net Core內部的某些方法、類的實現感興趣時,有很多方法可以去瞭解,看書,看各種文章,但是最直接也是最深入的辦法就是去閱讀源代碼。ASP.NET Core的源代碼托管在Github,項目地址是:https://github.com/dotnet/aspnetcore。如果只 ...
  • 1. 前言 Xceed wpftoolkit提供了一個 "CheckListBox" ,效果如下: 不過它用起來不怎麼樣,與其這樣還不如參考UWP的ListView實現,而且動畫效果也很好看: 它的樣式如下: 屬性是很多了,但這裡沒有自定義CheckBox樣式的方法,而且也沒法參考它的動畫如何實現。 ...
  • 定義委托 委托實例化 定義具體執行的方法 綁定方法 觸發委托 ...
  • 文章出處: https://www.cnblogs.com/dotnet261010/p/6275821.html 一、WPF簡介 WPF:WPF即Windows Presentation Foundation,翻譯為中文“Windows呈現基礎”,是微軟推出的基於Windows Vista的用戶界 ...
  • 前言 IdentityServer4(以下簡稱 Id4) 是 Asp.Net Core 中一個非常流行的 OpenId Connect 和 OAuth 2.0 框架,可以輕鬆集成到 Asp.Net Core 應用中,並且與 Asp.Net Core Identity 也可以輕鬆集成。博客園也有大佬發 ...
  • //從第1個開始,依次向左插入值。如果鍵不存在,先創建再插入值 隊列形式 先進後出,後進先出 //插入後形式 <-- 10,9,8,7,6,5,4,3,2,1 <-- 方向向左依次進行 stopwatch.Start(); for (int i = 0; i < 10; i++) { var get ...
  • 過濾漢字 Regex.Replace(inputStr,@"[\u4e00-\u9fa5]",string.Empty); 提取漢字: Regex.Replace(inputStr,@"[^\u4e00-\u9fa5]",string.Empty);//註意這裡多了個^符號 ...
  • String類型很簡單,就不做示例演示了,這裡只貼出Helper類 /// <summary> /// 判斷key是否存在 /// </summary> /// <param name="key"></param> /// <param name="db"></param> /// <returns ...
  • 通過上一章的學習,Geometry抽象類表示形狀或路徑。Drawing抽象類扮演了互補的角色,它表示2D圖畫(Drawing)——換句話說,它包含了顯示矢量圖像或點陣圖需要的所有信息。 儘管有幾類畫圖類,但只有GeometryDrawing類能使用已經學習過的幾何圖形。它增加了決定如何繪製圖形的畫筆和 ...
  • 以控台的形式,運行.net core mvc 代碼, Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>();//指定網路主機要使用的啟動類型 ...
x