WPF-布局样式练习-Day01-左右布局
美男子玩编程
共 3754字，需浏览 8分钟
· 2022-04-09
一、前言
WPF日常布局样式练习案例，记录自己在WPF的复习过程中的一点点进步，同时分享出来，希望对学习WPF的读者们，提供一点帮助。
二、模仿
2.1 原始设计图
2.2 模仿分析
此处使用的工具为PxCook，需要注意的是，此处标注的是像素点，而默认情况下，WPF是相对范围内的像素无关，模仿阶段，不考虑到像素级别的模仿细节处理，后续文章会单独讲解。
2.3 动起来
1）系统资源
<Window.Resources>
<GeometryGroup x:Key="shishi">GeometryGroup>
<GeometryGroup x:Key="bingren">GeometryGroup>
<GeometryGroup x:Key="chuangwei">GeometryGroup>
<GeometryGroup x:Key="yihu">GeometryGroup>
<GeometryGroup x:Key="baobiao">GeometryGroup>
<GeometryGroup x:Key="shebei">GeometryGroup>
<GeometryGroup x:Key="xitong">GeometryGroup>
<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type ListViewItem}">
<Grid Background="Transparent" SnapsToDevicePixels="True">
<Border x:Name="Bg" Background="{TemplateBinding Background}">Border>
<Border Padding="{TemplateBinding Padding}">
<StackPanel Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<Path Fill="{TemplateBinding Foreground}" Stretch="Uniform" Width="12.8" Height="12.8"
Margin="11.2,12.8" Data="{TemplateBinding local:ControlExtensions.Data}">
Path>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">ContentPresenter>
StackPanel>
Border>
Grid>
<ControlTemplate.Triggers>
<Trigger Property="ListViewItem.IsSelected" Value="True">
<Setter Property="Background" TargetName="Bg" Value="#50BEE9D4">Setter>
<Setter Property="BorderBrush" TargetName="Bg" Value="#1EA64A">Setter>
<Setter Property="BorderThickness" TargetName="Bg" Value="0,0,4,0">Setter>
Trigger>
ControlTemplate.Triggers>
ControlTemplate>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Padding" Value="30.4,0"/>
<Setter Property="FontSize" Value="12.8"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="local:ControlExtensions.Data" Value="{StaticResource shishi}"/>
<Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>
<Style.Triggers>
<Trigger Property="ListViewItem.IsSelected" Value="True">
<Setter Property="Foreground" Value="#11B15F"/>
<Setter Property="Background" Value="#50BEE9D4"/>
<Setter Property="FontWeight" Value="Bold"/>
Trigger>
Style.Triggers>
Style>
Window.Resources>2）设置布局
<DockPanel>
<Border DockPanel.Dock="Left" Grid.ColumnSpan="2" Width="164" Background="White">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="10" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
<StackPanel>
<StackPanel HorizontalAlignment="Center" Margin="0,41.6,0,0">
StackPanel>
StackPanel>
Border>
<DockPanel>
<StackPanel DockPanel.Dock="Top" Background="White" Margin="3.2,0,0,0">
<Border BorderBrush="#f1f2f3" Padding="0,20.8,1.6,12.8" Margin="17.6,0,0,0" BorderThickness="0,0,0,1">
<WrapPanel>
WrapPanel>
Border>
<Border Height="52.8" Padding="17.6,12.8,0,0">
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
StackPanel>
<TextBlock Text="患者体温监测数据详情" Foreground="Black" FontWeight="Black" FontSize="16">TextBlock>
DockPanel>
Border>
StackPanel>
<Border Padding="19.2,19.2,19.2,38.4">
<DockPanel>
<Border DockPanel.Dock="Left" Width="210" HorizontalAlignment="Left" Background="White" CornerRadius="5" Padding="16">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
Border>
<Border Width="260" DockPanel.Dock="Right"
HorizontalAlignment="Right"
Background="White" CornerRadius="5" Padding="16">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="14*">RowDefinition>
<RowDefinition Height="9*">RowDefinition>
Grid.RowDefinitions>
<Border Background="White" CornerRadius="5" Padding="16" Margin="16,0,16,8">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
Border>
<Border Grid.Row="1" Background="White" CornerRadius="5" Padding="16" Margin="16,8,16,0">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
Border>
Grid>
DockPanel>
Border>
DockPanel>
DockPanel>3）左侧内容
显示内容
<StackPanel HorizontalAlignment="Center" Margin="0,41.6,0,0">
<TextBlock Text="15:36:06" DockPanel.Dock="Top" FontSize="24" FontWeight="Bold" Foreground="Black" HorizontalAlignment="Center">TextBlock>
<TextBlock Text="2020年5月20日 星期三" Margin="0,12.8" HorizontalAlignment="Center" Foreground="LightGray"/>
StackPanel>侧面菜单
<ListView SelectedIndex="0" BorderThickness="0">
<ListViewItem local:ControlExtensions.Data="{StaticResource bingren}" Content="病人管理"/>
<ListViewItem local:ControlExtensions.Data="{StaticResource chuangwei}" Content="床位管理"/>
<ListViewItem local:ControlExtensions.Data="{StaticResource yihu}" Content="医护管理"/>
<ListViewItem local:ControlExtensions.Data="{StaticResource baobiao}" Content="报表管理"/>
<ListViewItem local:ControlExtensions.Data="{StaticResource shebei}" Content="设备管理"/>
<ListViewItem local:ControlExtensions.Data="{StaticResource xitong}" Content="系统设置"/>
<ListView.Template>
<ControlTemplate>
<ItemsPresenter>ItemsPresenter>
ControlTemplate>
ListView.Template>
ListView>4）右侧内容
右侧顶部导航
<Border BorderBrush="#f1f2f3" Padding="0,20.8,1.6,12.8" Margin="17.6,0,0,0" BorderThickness="0,0,0,1">
<WrapPanel>
<TextBlock Text="实时检测">TextBlock>
<TextBlock Text=" / ">TextBlock>
<TextBlock Text="体温数据详情页" Foreground="#11B15F" FontWeight="Black">TextBlock>
WrapPanel>
Border>
显示按钮
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Button Content="解绑" Width="49.6" Padding="12.8,6.4" Margin="0,0,12.8,0" FontSize="10" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="5" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter Content="{TemplateBinding Content}">ContentPresenter>
Border>
ControlTemplate>
Button.Template>
Button>
<Button Content="导出" Width="49.6" Padding="12.8,6.4" Margin="0,0,12.8,0"
FontSize="10"
Background="#1EA64A"
BorderThickness="0"
Foreground="White" VerticalAlignment="Top">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
<ContentPresenter Content="{TemplateBinding Content}">ContentPresenter>
Border>
ControlTemplate>
Button.Template>
Button>
StackPanel>面板展示
对于右侧的内容展示板，此处基本布局一致，统一如下，依据实际情况对Border的属性Padding、DockPanel.Dock、Width 、HorizontalAlignment进行调整即可。
<Border Background="White" CornerRadius="5">
<Border.Effect>
<DropShadowEffect BlurRadius="20" Direction="20" Color="#eef4fa" ShadowDepth="0" Opacity="0.8" RenderingBias="Quality">DropShadowEffect>
Border.Effect>
<DockPanel>
<Border DockPanel.Dock="Top" Padding="0,0,0,10" BorderBrush="#f1f2f3" BorderThickness="0,0,0,1">
<TextBlock Text="患者基本信息" FontWeight="Black" FontSize="14" Foreground="Black">TextBlock>
Border>
<ContentControl>ContentControl>
DockPanel>
Border>
三、效果展示
需要对应源码，可以私信笔者，发送内容WPFDay1。
往期推荐
评论
机房水冷空调管路应该如何安装布局？
近年来随着云计算技术的快速发展，全球数据中心开始向着巨型化的方向发展，单机柜功率密度不断提高，5KW、7KW、10KW甚至几十KW功率机柜已逐步成为常规配置。新一代数据中心更显著的表现为：规模更大、密度更高、制冷要求更高、局部过热成为常态等特点。本文就来探讨下水
数据中心运维管理
0
某程序员吐槽：公司最近招了一批35左右的，这帮人习惯天天卷到八点多，导致现在我们也要八点才下班
架构师大咖
架构师大咖，打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖，每日推送。
公众号该公众号已被封禁某位程序员的吐槽引发了广泛的思考和共鸣。他抱怨公司
源码共读
0
8则实用的纯CSS布局排版技巧 | 网易4年实践
「链接和长图失效，请大家点击阅读原文查看详情」前言开发每一张网页都离不开布局排版，基于良好布局排版打下基础，才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上，没办法解决的布局排版都用JS实现😂。今时不同往日，现代CSS属性能更好地快速实现各种布局排版，节约更多时间去摸鱼😉。
前端迷
10
一套简单的瑜伽理疗动作,自己在家就可以练习,理疗肩颈、上背部疼...
点 击 上 方 ▲ 蓝 字 [ 瑜伽路 ] 即 可 关 注 我 们 现 代人随着生活以及工作需要，需要长时间久坐面对手机、电脑等数码工具，而随之带来的是肩颈疾病问题越来越年轻化、普遍化！ 今天，分享一套简单的瑜伽理疗动...
利人2022
0
与其刷题,不如练习这个能力
hi，我是大J， 点击?关注我 很多人说，要提升成绩离不开刷题，但我要说，姿势不对，努力也白费。 比刷题更重要的，是动脑筋的能力。 “哦哟，这个孩子聪明是聪明的，就是不动脑筋。 ” 这句话，我相信很多人都听过，甚...
゛若久
0
乘势插混东风、加速海外布局,蜂巢能源稳健向上
得益于完整的产业链，以及技术 和成本优势，中国动力电池厂商正在加速拓展全球市场。 2月28日，蜂巢能源位于泰国的工厂即日正式投产，产品开始批量交付，即将搭载长城和合众旗下多款新能源车型在泰国上市。此次投产...
Test422
0
2024年中国经济增长目标或设在5%左右
2023年9月20日，北京CBD车水马龙。图片来源：人民视觉 记者 辛圆 2024年全国“两会”召开在即，备受关注的全年经济增长目标将揭开面纱。接受界面新闻采访的分析师普遍预计，2024年国内生产总值（GDP）增长目标可能设在...
Test422
0
Pandora飙升背后的ERC404,目前适合布局吗?
这两天一个刚刚新提出的以太坊代币标准突然爆火：ERC-404。 伴随这个标准的提出，作者同时还发行了该代币标准的第一个实验性代币Pandora。 这个代币标准描述的是什么场景呢？ 它同时把ERC-20和ERC-721这两种截然不同...
道说区块链
0