WPF-布局樣式練習(xí)-Day01-左右布局

點(diǎn)擊上方藍(lán)色字體，關(guān)注我們

一、前言

WPF日常布局樣式練習(xí)案例，記錄自己在WPF的復(fù)習(xí)過程中的一點(diǎn)點(diǎn)進(jìn)步，同時(shí)分享出來，希望對學(xué)習(xí)WPF的讀者們，提供一點(diǎn)幫助。

二、模仿

2.1 原始設(shè)計(jì)圖

2.2 模仿分析

此處使用的工具為PxCook，需要注意的是，此處標(biāo)注的是像素點(diǎn)，而默認(rèn)情況下，WPF是相對范圍內(nèi)的像素?zé)o關(guān)，模仿階段，不考慮到像素級(jí)別的模仿細(xì)節(jié)處理，后續(xù)文章會(huì)單獨(dú)講解。

2.3 動(dòng)起來

1）系統(tǒng)資源

? ? ?<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）設(shè)置布局

?
? ? ?<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="患者體溫監(jiān)測數(shù)據(jù)詳情" 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）左側(cè)內(nèi)容

顯示內(nèi)容

?<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>

側(cè)面菜單

?
?<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="醫(yī)護(hù)管理"/>
? ? ?<ListViewItem local:ControlExtensions.Data="{StaticResource baobiao}" Content="報(bào)表管理"/>
? ? ?<ListViewItem local:ControlExtensions.Data="{StaticResource shebei}" Content="設(shè)備管理"/>
? ? ?<ListViewItem local:ControlExtensions.Data="{StaticResource xitong}" Content="系統(tǒng)設(shè)置"/>
? ? ?<ListView.Template>
? ? ? ? ?<ControlTemplate>
? ? ? ? ? ? ?<ItemsPresenter>ItemsPresenter>
? ? ? ? ?ControlTemplate>
? ? ?ListView.Template>
?ListView>

4）右側(cè)內(nèi)容

右側(cè)頂部導(dǎo)航

?
?<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="實(shí)時(shí)檢測">TextBlock>
? ? ? ? ?<TextBlock Text=" / ">TextBlock>
? ? ? ? ?<TextBlock Text="體溫?cái)?shù)據(jù)詳情頁" 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="導(dǎo)出" 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>

面板展示

對于右側(cè)的內(nèi)容展示板，此處基本布局一致，統(tǒng)一如下，依據(jù)實(shí)際情況對Border的屬性Padding、DockPanel.Dock、Width 、HorizontalAlignment進(jìn)行調(diào)整即可。

?
?<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>
?

三、效果展示

需要對應(yīng)源碼，可以私信筆者，發(fā)送內(nèi)容WPFDay1。

往期推薦

• C語言：十進(jìn)制、BCD碼互換
  

• Python Qt GUI設(shè)計(jì)：QTabWidget、QStackedWidget和QDockWidget容器控件（提升篇—2）
  

• 熱敏電阻、RTD、熱電偶的原理和特性
  

點(diǎn)擊閱讀原文，更精彩~