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

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

微信公眾號： "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

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

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

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


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

-Advertisement-
Play Games
更多相關文章
  • Java入門 - 導讀
    原文地址： "http://www.work100.net/training/java" 更多教程： "光束雲 免費課程" Java入門 Java 是由 Sun Microsystems 公司於1995年5月推出的高級程式設計語言。 Java 可運行於多個平臺，如 、`Mac OS UNIX`版本的 ...
  • JAVA編程思想——分析閱讀
    需要源碼、JDK1.6 、編碼風格參考阿裡java規約 7/12開始 有點意識到自己喜歡理論大而泛的模糊知識的學習，而不喜歡實踐和細節的打磨，是因為粗心浮躁導致的麽？ cron表達式使用 設計能力、領域建模能力 其他： 海明威的硬幣:老人與海 工具準備： java編程思想電子版 別人整理的思維導圖 ...
  • IDEA中編輯HTML格式，不自動縮進問題
    在IntelliJ Idea中HTML格式化時，預設head和body標簽以及body下的標簽都不會縮進，這就導致你每次寫好html時候格式化的時候所有標簽都是同一層級沒有縮進，一般我們寫html都會層級關係標簽嵌套，通過縮進看代碼結構就很清晰明朗 ...
  • ZXing生成二維碼
    1.什麼是二維碼？ ​ （百度百科）：二維碼又稱二維條碼，常見的二維碼為QR Code，QR全稱Quick Response，是一個近幾年來移動設備上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的信息，也能表示更多的數據類型。 2.利用ZXING生成二維碼 ​ ·對應POM <de ...
  • 本地緩存google.guava及分散式緩存redis 隨筆
    近期項目用到了緩存,我選用的是主流的google.guava作本地緩存,redis作分散式 緩存,先說說我對本地緩存和分散式緩存的理解吧,可能不太成熟的地方,大家指出,一起 學習.本地緩存的特點是速度快,不會受到網路阻塞的干擾,但由於是放在本地記憶體中,所 以容量較小,不能項目間共用比IO效率高比re ...
  • php非同步處理
    a.php <?phpheader("Content-type: text/html; charset=utf-8");date_default_timezone_set("Asia/Shanghai"); $start = microtime(true); function fsockopen_g ...
  • spring aop使用，spring aop註解，Spring切麵編程
    ©Copyright 蕃薯耀 2020-01-21 https://www.cnblogs.com/fanshuyao/ 一、第一步，引用依賴類，在Pom.xml加入依賴 <dependencies> <dependency> <groupId>org.springframework</groupI ...
  • 「掃盲」Elasticsearch
    前言 只有光頭才能變強。 文本已收錄至我的GitHub精選文章，歡迎Star ： "https://github.com/ZhongFuCheng3y/3y" 不知道大家的公司用Elasticsearch多不多，反正我公司的是有在用的。平時聽同事們聊天肯定避免不了不認識的技術棧，例如說：把數據放在引 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類