WPF初级界面设计

Whanhr

已于 2023-10-01 22:15:55 修改

阅读量1.1k

点赞数 6

于 2023-10-01 22:14:39 首次发布

本文链接：https://blog.csdn.net/Whanhr/article/details/133468637

版权

#WPF界面 #WPF初级灵感来源于B站重庆教主的视频链接地址

首先看一下效果图，这是管理员登录进区的界面，或者你也可以直接设置为主界面。

本章讲如何用WPF来完成这个界面设计，它重点包括一些应用资源词典的样式，插入图片。我用的软件是VS2022版本

在Mainwindow.xaml窗口进行设计

第一步，整体布局为两行两列

在Grid容器中进行行与列的定义，如图下

第二步，添加图片资源打开阿里图标网站，选择你想要的全部图标，然后点击下载代码，下载完成之后，新建Icon文件夹右击添加现有项，找到你下载的图标代码，添加字体文件。

第三步完成左上角设计

第四步（1）新建资源文件夹添加一个资源词典

（2）添加之后设置样式和属性

（3）在App.xaml文件中添加资源词典，资源引用

（4）完成如下图设计

第五步完成菜单列表设计

添加资源词典ExpanderDictionary和RadioButtonMenuStyle

（1）ExpanderDictionary样式设置

（2）RadioButtonMenuStyle样式设置（3）引用资源词典

（4）完成如下图设计菜单栏列表

当鼠标移到时
<Grid Grid.Row=" 1" Grid.Column=" 0" Tag="菜单" Background="#273542" >
<Grid.RowDefinitions >
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Border Height="5" Background=" #1A2327" VerticalAlignment="Center" >
<TextBlock Text=" -----------" FontSize=" 15" Foreground="Black" VerticalAlignment="Center" />
</Border >

<StackPanel Grid.Row=" 1" >
<Expander Background=" #1D282B" ExpandDirection="Down" SnapsToDevicePixels="True" VerticalAlignment="Top" Style="{DynamicResource ExpanderStyle}">
<Expander.Header >
<StackPanel Background="Transparent" Height="40" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 0 0" Width="auto" FontSize=" 22" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 18" Text=" 控制台首页" Foreground=" #918C8C" VerticalAlignment="Center"/>
</StackPanel >
</Expander.Header >
<Expander.Content>
<StackPanel Background=" #1A2327" >
<RadioButton Height=" 25" Style="{StaticResource RadioButton.Over}" >
<StackPanel Background="Transparent" Height="20" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 10 0" Width="auto" FontSize=" 15" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 15" Text=" 物资设置" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel >
</RadioButton>
<RadioButton Height=" 25" Style="{StaticResource RadioButton.Over}" >
<StackPanel Background="Transparent" Height="20" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 10 0" Width="auto" FontSize=" 15" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 15" Text=" 物资登记" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel >
</RadioButton>
<RadioButton Height=" 25" Style="{StaticResource RadioButton.Over}">
<StackPanel Background="Transparent" Height="20" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 10 0" Width="auto" FontSize=" 15" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 15" Text=" 供应商设置" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel >
</RadioButton>
<RadioButton Height=" 25" Style="{StaticResource RadioButton.Over}" >
<StackPanel Background="Transparent" Height="20" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 10 0" Width="auto" FontSize=" 15" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 15" Text=" 仓库设置" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel >
</RadioButton>
<RadioButton Height=" 25" Style="{StaticResource RadioButton.Over}">
<StackPanel Background="Transparent" Height="20" Orientation="Horizontal" >
<TextBlock Margin=" 10 0 10 0" Width="auto" FontSize=" 15" Text="" FontFamily="./Icon/#iconfont" Foreground="#2D5EA3" VerticalAlignment="Center"/>
<TextBlock Width=" 200" FontSize=" 15" Text=" 规格设置" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel >
</RadioButton>