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

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

• InstagramRedesignAssets數張圖片，從Github上下載App.xamlMainWindow.xamlMainWindow.xaml.cs

2.1 引入樣式

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

<code><application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                <resourcedictionary>
                <resourcedictionary>
                <resourcedictionary>
                <resourcedictionary>
            /<resourcedictionary.mergeddictionaries>
        /<resourcedictionary>
    /<application.resources>/<code>

2.2 演示窗體佈局

文件【MainWindow.xaml】，佈局代碼，源碼如下：

<code><window>        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>
        <grid>
            <image> 

            <textblock>
            <stackpanel>
                <stackpanel>
                    <textblock>
                    <textblock>
                /<stackpanel>
                <stackpanel>
                    <textblock>
                    <textblock>
                /<stackpanel>
                <stackpanel>
                    <textblock>
                    <textblock>
                /<stackpanel>
            /<stackpanel>
        /<grid>
        <stackpanel>
            <textblock>
            <stackpanel>
                <ellipse>
                    <ellipse.fill>
                        <imagebrush>
                    /<ellipse.fill>
                /<ellipse>
                <button>
            /<stackpanel>
        /<stackpanel>
        <stackpanel>
            <textbox>
            <packicon>
        /<stackpanel>
        <listview>
            <listviewitem>
                <grid>
                    <ellipse>
                        <ellipse.fill>
                            <imagebrush>
                        /<ellipse.fill>
                    /<ellipse>
                    <textblock>
                    <button>
                /<grid>
            /<listviewitem>
            <listviewitem>
                <grid>
                    <ellipse>
                        <ellipse.fill>
                            <imagebrush>
                        /<ellipse.fill>
                    /<ellipse> 

                    <textblock>
                    <button>
                /<grid>
            /<listviewitem>
            <listviewitem>
                <grid>
                    <ellipse>
                        <ellipse.fill>
                            <imagebrush>
                        /<ellipse.fill>
                    /<ellipse>
                    <textblock>
                    <button>
                /<grid>
            /<listviewitem>
            <listviewitem>
                <grid>
                    <ellipse>
                        <ellipse.fill>
                            <imagebrush>
                        /<ellipse.fill>
                    /<ellipse>
                    <textblock>
                    <button>
                /<grid>
            /<listviewitem>
        /<listview>
        <stackpanel>
            <stackpanel>
                <ellipse>
                    <ellipse.fill>
                        <imagebrush>
                    /<ellipse.fill>
                /<ellipse>
                <ellipse>
                    <ellipse.fill>
                        <imagebrush>
                    /<ellipse.fill>
                /<ellipse>
                <ellipse>
                    <ellipse.fill>
                        <imagebrush>
                    /<ellipse.fill>
                /<ellipse>
                <ellipse>
                    <ellipse.fill>
                        <imagebrush>
                    /<ellipse.fill>
                /<ellipse>
            /<stackpanel> 

            <scrollviewer>
                <stackpanel>
                    <stackpanel>
                        <image>
                        <image>
                        <image>
                    /<stackpanel>
                    <stackpanel>
                        <image>
                        <image>
                        <image>
                    /<stackpanel>
                /<stackpanel>
            /<scrollviewer>
        /<stackpanel>
    /<grid>
/<window>/<code>

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

<code>private void MoveWindow_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    DragMove();
}/<code>

3.本文參考

1. 視頻一：C# WPF Material Design UI: Redesign Instagram，配套源碼：Instagram。
2. C# WPF開源控件庫《MaterialDesignInXAML》

4.源碼

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

除非註明，文章均由 Dotnet9 整理發佈，歡迎轉載。

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

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

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

閱讀更多 沙漠盡頭的狼 的文章

關鍵字: XAML Instagram 重新