微信公众号：Dotnet9，网站：Dotnet9，问题或建议：请网站留言，

如果对您有所帮助：欢迎赞赏。

C# WPF简况（2/3）

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考

1.本文背景

承接上文（C# WPF联系人列表（1/3））,添加好友简况。

本文效果如下：

2.代码实现

使用 .Net CORE 3.1 创建名为 “Chat” 的WPF项目，添加 MaterialDesignThemes(3.0.1)、MaterialDesignColors(1.2.2)两个Nuget库，文中部分图片可在文末视频配套源码中下载。

2.1 引入MD控件样式文件

使用MD控件的常规操作，需要在App.xaml中引入4个样式文件

<Application x:Class="Chat.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             StartupUri="MainWindow.xaml">

    <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.Green.xaml" />

                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

2.2 界面布局

纯粹的布局代码：

<Window x:Class="Chat.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"

        mc:Ignorable="d"

        Height="600" Width="1080" ResizeMode="NoResize" MouseLeftButtonDown="Window_MouseLeftButtonDown"

        WindowStartupLocation="CenterScreen" WindowStyle="None" FontFamily="Dosis">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="270"/>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="270"/>

        </Grid.ColumnDefinitions>

        <Grid Grid.Column="1" Background="#FFE4E4E4"/>

        <StackPanel Grid.Column="0" Background="{StaticResource PrimaryHueDarkBrush}">

            <StackPanel Orientation="Horizontal" Background="White">

                <Image Width="210" Height="80" Source="Assets/logo.png"/>

                <Button Style="{StaticResource MaterialDesignFlatButton}">

                    <materialDesign:PackIcon Kind="PlusCircle" Width="24" Height="24"/>

                </Button>

            </StackPanel>

            <TextBox Margin="20 10" Style="{StaticResource MaterialDesignFloatingHintTextBox}" materialDesign:HintAssist.Hint="搜索" Foreground="White"/>

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="*"/>

                    <ColumnDefinition Width="*"/>

                    <ColumnDefinition Width="*"/>

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="0">

                    <materialDesign:PackIcon Kind="History" Foreground="White"/>

                </Button>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="1">

                    <materialDesign:PackIcon Kind="People" Foreground="White"/>

                </Button>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="2">

                    <materialDesign:PackIcon Kind="Contacts" Foreground="White"/>

                </Button>

                <Button Style="{StaticResource MaterialDesignFlatButton}" Grid.Column="3">

                    <materialDesign:PackIcon Kind="Archive" Foreground="White"/>

                </Button>

            </Grid>

            <ListView>

                <ListViewItem HorizontalAlignment="Stretch">

                    <Grid HorizontalAlignment="Center" Margin="5">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="50"/>

                            <ColumnDefinition Width="150"/>

                            <ColumnDefinition Width="50*"/>

                        </Grid.ColumnDefinitions>

                        <Border Width="40" Height="40" CornerRadius="25" BorderBrush="White" BorderThickness="0.6">

                            <Border.Background>

                                <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>

                            </Border.Background>

                        </Border>

                        <Border Width="10" Height="10" VerticalAlignment="Bottom" Margin="5" HorizontalAlignment="Right" CornerRadius="15" Background="LightGreen"/>

                        <StackPanel Grid.Column="1">

                            <TextBlock Text="Dotnet9.com" Margin="10 0"/>

                            <TextBlock Text="一个热衷于互联网分享精神的程序员的网站!" Margin="10 0" TextTrimming="CharacterEllipsis" Opacity="0.6" FontSize="11"/>

                        </StackPanel>

                        <Border Grid.Column="2" Width="20" Height="20" CornerRadius="15" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">

                            <TextBlock FontSize="11" Text="9" Foreground="{StaticResource PrimaryHueDarkBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                        </Border>

                    </Grid>

                </ListViewItem>

            </ListView>

        </StackPanel>

        <StackPanel Grid.Column="2" Background="White">

            <Button HorizontalAlignment="Right" Margin="10" Style="{StaticResource MaterialDesignFlatButton}" Click="Close_Click">

                <materialDesign:PackIcon Kind="Close"/>

            </Button>

            <Border Width="150" Height="150" CornerRadius="80" BorderThickness="1" BorderBrush="Gray">

                <Border.Background>

                    <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>

                </Border.Background>

            </Border>

            <TextBlock Text="Dotnet9" HorizontalAlignment="Center" Margin="0 10 0 0" Foreground="Gray" FontSize="18" FontWeight="Bold"/>

            <TextBlock Text="Dotnet程序员" FontSize="13" Foreground="Gray" HorizontalAlignment="Center" Opacity="0.8"/>

            <TextBlock Text="时间如流水，只能流去不流回。" FontSize="8" Foreground="Gray" HorizontalAlignment="Center" Opacity="0.8"/>

            <StackPanel Margin="20">

                <StackPanel Orientation="Horizontal" Margin="0 3">

                    <materialDesign:PackIcon Kind="Location" Foreground="Gray"/>

                    <TextBlock Text="成都" Margin="10 0" Foreground="Gray"/>

                </StackPanel>

                <StackPanel Orientation="Horizontal" Margin="0 3">

                    <materialDesign:PackIcon Kind="Cellphone" Foreground="Gray"/>

                    <TextBlock Text="186 2806 0000" Margin="10 0" Foreground="Gray"/>

                </StackPanel>

                <StackPanel Orientation="Horizontal" Margin="0 3">

                    <materialDesign:PackIcon Kind="Email" Foreground="Gray"/>

                    <TextBlock Text="632871194@qq.com" Margin="10 0" Foreground="Gray"/>

                </StackPanel>

            </StackPanel>

            <TextBlock Text="视频" Margin="20 0" Foreground="Gray"/>

            <StackPanel Orientation="Horizontal" Margin="20 0">

                <Border Width="50" Height="50" CornerRadius="30" Margin="5">

                    <Border.Background>

                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>

                    </Border.Background>

                </Border>

                <Border Width="50" Height="50" CornerRadius="30" Margin="5">

                    <Border.Background>

                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>

                    </Border.Background>

                </Border>

                <Border Width="50" Height="50" CornerRadius="30" Margin="5">

                    <Border.Background>

                        <ImageBrush ImageSource="https://img.dotnet9.com/logo.png"/>

                    </Border.Background>

                </Border>

            </StackPanel>

        </StackPanel>

    </Grid>

</Window>

2.2.3 窗体部分事件处理

后台代码

private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    DragMove();

}

private void Close_Click(object sender, RoutedEventArgs e)

{

    this.Close();

}

本文略短，原文视频11分钟，看视频学习吧。

3.参考

  1. 学习视频：C# WPF Design UI - 2/3 - Profile
  2. 视频配套源码：Chat

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。


转载请注明本文地址：https://dotnet9.com/6945.html


欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章


C# WPF简况（2/3）的更多相关文章

  1. C# WPF聊天界面（3/3）

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航 本文背景 代码实现 本文参考 1.本文背景 系列文章 ...

  2. 在WPF中使用依赖注入的方式创建视图

    在WPF中使用依赖注入的方式创建视图 0x00 问题的产生 互联网时代桌面开发真是越来越少了,很多应用都转到了浏览器端和移动智能终端,相应的软件开发上的新技术应用到桌面开发的文章也很少.我之前主要做W ...

  3. MVVM框架从WPF移植到UWP遇到的问题和解决方法

    MVVM框架从WPF移植到UWP遇到的问题和解决方法 0x00 起因 这几天开始学习UWP了,之前有WPF经验,所以总体感觉还可以,看了一些基础概念和主题,写了几个测试程序,突然想起来了前一段时间在W ...

  4. MVVM模式解析和在WPF中的实现（六） 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  5. MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信

    MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...

  6. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  7. MVVM模式解析和在WPF中的实现（三）命令绑定

    MVVM模式解析和在WPF中的实现(三) 命令绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  8. MVVM模式和在WPF中的实现（二）数据绑定

    MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  9. MVVM模式和在WPF中的实现（一）MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

随机推荐

  1. 整合spring-data-redis以及redisTemplate的使用

    一.导入依赖配置 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis< ...

  2. Redis搭建哨兵模式

    一 安装Redis 1. 从https://redis.io/download redis官网下载二进制包安装 例如:wget http://download.redis.io/releases/re ...

  3. PyCharm2019.3.3专业版完美激活

    在 PYPL 编程语言榜单上,Python 因近几年受欢迎程不断提高而继续霸榜.俗话说“萝卜青菜,各有所爱”,在众多的编辑器当中,因每个人的使用习惯不同,也会选择各自的喜欢的编辑器.Pycharm 分 ...

  4. Ceph 存储集群4-高级运维：

    一.高级运维 高级集群操作主要包括用 ceph 服务管理脚本启动.停止.重启集群,和集群健康状态检查.监控和操作集群. 操纵集群 运行 Ceph 每次用命令启动.重启.停止Ceph 守护进程(或整个集 ...

  5. 宅在家学不进去吗？试试这些 GitHub 上简单易学的游戏项目吧

    作者:HelloGitHub-小鱼干 这是本人宅在家里的第 4 周,代码不想看,技术文章不想读,都不能愉快学习了我还怎么当一个优秀的需求消化师呢?有没有什么轻松地方法来学习技术呢?想起了小时候金山打字 ...

  6. POJ_1363_模拟

    题目描述: 列车出入站是一种栈的机制,每组数据给予一个n,进站按1-n顺序,给定一组出站顺序,判断能否实现. 思路: 直接用了queue,in记录当前准备入站的列车编号,out记录已经出站的辆数+1. ...

  7. （三）maven创建部署javaweb

    http://how2j.cn/k/idea/idea-maven-web/1356.html#nowhere 这个网站讲的很详细了,下载很慢的话按照他的提示配置阿里云即可,很快 另外可能会出现各种j ...

  8. 曹工说Spring Boot源码（18）-- Spring AOP源码分析三部曲，终于快讲完了 (aop：config完整解析【下】)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  9. Go语言实现：【剑指offer】跳台阶

    该题目来源于牛客网<剑指offer>专题. 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 1阶:共1种跳法: 2阶 ...

  10. Go语言实现：【剑指offer】二叉树中和为某一值的路径

    该题目来源于牛客网<剑指offer>专题. 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路 ...