微信公众号：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 的微信公众号，本站会及时推送最新技术文章


时间如流水，只能流去不流回！

点击《【阅读原文】》，本站还有更多技术类文章等着您哦！！！

此刻顺便为我点个《【再看】》可好？

.NET CORE(C#) WPF 重新设计Instagram的更多相关文章

  1. .NET Core 3 WPF MVVM框架 Prism系列之命令

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的命令的用法 一.创建DelegateCommand命令 我们在上一篇.NET Core 3 WPF MVVM框架 Prism系列之 ...

  2. .NET Core 3 WPF MVVM框架 Prism系列之事件聚合器

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信 一.事件聚合器  在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...

  3. .NET CORE(C#) WPF简单菜单MVVM绑定

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF简单菜单MVVM绑定 阅读导航 本文背景 代码实现 本文参考 ...

  4. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发 阅读导航 常用类属性设 ...

  5. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  6. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 简易音乐播放器主界面设计 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  7. .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐) 快到2020年了 ...

  8. .NET CORE(C#) WPF 值得推荐的动画菜单设计

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 值得推荐的动画菜单设计 阅读导航 本文背景 代码实现 本文 ...

  9. .NET CORE(C#) WPF 抽屉式菜单

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 抽屉式菜单 阅读导航 本文背景 代码实现 本文参考 源码 ...

随机推荐

  1. 使用Jenkins持续集成

    本篇文章主要说明的是如何使用Jenkins持续集成自己的代码. 1.Jenkins的安装与配置 使用Jenkins之前需要安装和配置Jenkins,具体安装和配置方法参照这个博客:http://www ...

  2. 矩阵matrix变换的用法（css3属性transform: matrix）

    参数 2D矩阵的表示 matrix(a,b,c,d,e,f),其中6个参数在矩阵的分布: -- -- | a c e | | b d f | | 0 0 1 | -- -- 在CSS3中矩阵的原始值是 ...

  3. CSS-16-margin值重叠问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Git详解之基础使用

    前言 读完本章你就能上手使用 Git 了.本章将介绍几个最基本的,也是最常用的 Git 命令,以后绝大多数时间里用到的也就是这几个命令.读完本章,你就能初始化一个新的代码仓库,做一些适当配置:开始或停 ...

  5. hash模式与history模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  6. 记一次golang的内存泄露

    程序功能 此程序的主要功能是将文件中数据导入到clickhouse数据库中. [问题描述] 服务器内存每隔一段时间会耗尽 [问题分析] 由于使用的是go语言开发的,所以采用了业界流行的工具pprof. ...

  7. VS2017/19 在更新之后,.net core项目出一个500的神奇错误

    先说症状: VS 更新升级之后,如果用的是 .net core 的项目的时候,当vs升级时,.net core的sdk或者runtime有跟着升级的话,项目发布之后,覆盖dll到服务器时,会出现这个错 ...

  8. ATL的GUI程序设计(2)

    from:http://blog.titilima.com/atlgui-2.html 第二章 一个最简单窗口程序的转型 我知道,可能会有很多朋友对上一章的"Hello, World!&qu ...

  9. FFMPEG结构体分析：AVCodecParameters

    /** * This struct describes the properties of an encoded stream. * * sizeof(AVCodecParameters) is no ...

  10. LUA学习笔记（第5-6章）

    x = a or b 如果a为真则x = a 如果a为假则x = b print(a .. b) 任何非nil类型都会被连接为字符串,输出 多重返回值 local s,e = string.find( ...