WPF“Half the Whitespace”设计原则
在布置控件时，很容易在边距和填充中硬编码特定值，以使事物适合所需的布局。但是，通过对这些值进行硬编码，维护变得更加昂贵。如果布局发生变化，可能被认为是一种微不足道的方式，那么很多工作必须用于纠正这些值。
该设计原理通过以不同方式考虑布局来降低布局的维护成本。
基础知识
WPF（Windows Presentation Foundation）是Microsoft推荐的经典Windows桌面应用程序演示技术。 WPF不应与UWP（通用Windows平台）混淆，尽管两者之间存在相似之处。
WPF鼓励数据驱动的应用程序，重点关注多媒体，动画和数据绑定。使用称为XAML（可扩展应用程序标记语言）的语言创建接口，XAML是XML的衍生物。 XAML帮助WPF程序员保持视觉设计和界面逻辑的分离。
与其前身Windows窗体不同，WPF使用盒子模型来布局界面的所有元素。每个元素都有一个高度，宽度和边距，并在屏幕上相对于它的父元素排列。
WPF代表Windows Presentation Foundation，也以其Codename Avalon而闻名。它是一个图形框架，是Microsofts .NET Framework的一部分。 WPF预安装在Windows Vista，7,8和10中，可以安装在Windows XP和Server 2003上。
版本
版本4.6.1 - 2015年12月
Hello World应用程序#
在Visual Studio中创建和运行新的WPF项目：
单击文件→新建→项目
单击模板→Visual C＃→Windows→WPF应用程序选择模板，然后按确定 ：
在解决方案资源管理器中打开MainWindow.xaml文件（如果没有看到解决方案资源管理器窗口，请单击查看→解决方案资源管理器打开它）：
在XAML部分（默认情况下在“ 设计”部分下面）添加此代码
<TextBlock>Hello world!</TextBlock>
在Grid 标签内：
代码应如下所示：
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication1" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <TextBlock>Hello world!</TextBlock> </Grid> </Window>
按F5或单击菜单Debug→Start Debugging运行应用程序。它应该看起来像：
“Half the Whitespace”设计原则
在布置控件时，很容易在边距和填充中硬编码特定值，以使事物适合所需的布局。但是，通过对这些值进行硬编码，维护变得更加昂贵。如果布局发生变化，可能被认为是一种微不足道的方式，那么很多工作必须用于纠正这些值。
该设计原理通过以不同方式考虑布局来降低布局的维护成本。
wpf 如何在实际代码中使用它
概括我们上面已经证明的内容：单个事物包含“半空白”的固定边距 ，并且它们所容纳的容器应该具有“半空白”的填充 。你可以在应用程序资源字典中应用这些样式，然后你甚至不需要在单个项目上提及它们。以下是你可以定义“HalfTheWhiteSpace”的方法：
<system:Double x:Key="DefaultMarginSize">2</system:Double> <Thickness x:Key="HalfTheWhiteSpace" Left="{StaticResource DefaultMarginSize}" Top="{StaticResource DefaultMarginSize}" Right="{StaticResource DefaultMarginSize}" Bottom="{StaticResource DefaultMarginSize}"/>
然后我可以定义一个基本样式来基于我的其他控件样式:(这也可以包含你的默认FontFamily，FontSize等等）
<Style x:Key="BaseStyle" TargetType="{x:Type Control}"> <Setter Property="Margin" Value="{StaticResource HalfTheWhiteSpace}"/> </Style>
然后我可以为TextBox定义我的默认样式以使用此边距：
<Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}"/>
我可以为DatePickers，Labels等等做任何事情（可能在容器中保存的任何东西）。小心像这样的TextBlock样式......该控件在很多控件内部使用。我建议你创建自己的控件，它只是从TextBlock派生。你可以风格你的TextBlock使用默认的保证金;每当你明确地使用一个TextBlock在XAML，你应该用你的TextBlock。
你可以使用类似的方法将填充应用于常见容器（例如ScrollViewer，Border等）。
完成此操作后， 大多数控件都不需要边距和填充 - 你只需要在有意偏离此设计原则的位置指定值。
演示问题和解决方案
例如，想象一个有3个部分的屏幕，如下所示：
蓝框的边距可能为4,4,0,0。绿框的边距可能为4,4,4,0。紫色框边距为4,4,4,4。这是XAML :(我使用网格来实现布局;但无论您选择如何实现布局，此设计原则都适用）：
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserControl>
现在想象一下，我们想要更改布局，将绿色框放在蓝色框的左侧。应该简单，不应该吗？除了当我们移动那个盒子时，我们现在需要修补边缘。要么我们可以将蓝框的边距改为0,4,4,0;或者我们可以将蓝色变为4,4,4,0，将绿色变为4,4,0,0。这是XAML：
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Margin="0,4,4,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserControl>
现在让我们把紫色的盒子放在顶部。所以蓝色的利润率变为4,0,4,4;绿色变为4,0,0,4。
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Margin="4,0,4,4" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="1" Grid.Row="0" Margin="4,0,0,4" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserControl>
如果我们能够移动其他东西以便我们根本不需要调整这些值，那不是很好。这可以通过以不同的方式考虑空白来实现。想象一下将所有空白分配给一个控件或另一个控件，而不是将每个盒子的一半空白分配给每个盒子:(我的绘图不是很容易缩放 - 虚线应该在盒子边缘和它的邻居之间的中间位置） 。
所以蓝盒的边距为2,2,2,2;绿箱的边距为2,2,2,2;紫色方框的边距为2,2,2,2。并且容纳它们的容器具有2,2,2,2的填充物（不是边缘）。这是XAML：
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Padding="2,2,2,2"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="3*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserControl>
现在让我们尝试移动盒子，就像以前一样......让我们把绿色框放在蓝色框的左边。 OK完成。并且无需更改任何填充或边距。这是XAML：
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Padding="2,2,2,2"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="3*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserContro>
现在让我们把紫色的盒子放在顶部。 OK完成。并且无需更改任何填充或边距。这是XAML：
<UserControl x:Class="WpfApplication1.UserControl1HardCoded" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300" Padding="2,2,2,2"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="3*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> </Grid.RowDefinitions> <Border Grid.Column="1" Grid.Row="1" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/> <Border Grid.Column="0" Grid.Row="1" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/> <Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/> </Grid> </UserControl>
