WPF-布局样式练习-Day01-左右布局

美男子玩编程

共 3754字,需浏览 8分钟

 ·

2022-04-09 01:25

点击上方蓝色字体,关注我们


一、前言

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


往期推荐



点击阅读原文,更精彩~
浏览 106
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报