wpf
"Half the Whitespace" Konstruktionsprinzip
Suche…
Einführung
Bei der Anordnung von Steuerelementen können bestimmte Werte in den Rändern und Auffüllungen leicht hartcodiert werden, um die Einstellungen an das gewünschte Layout anzupassen. Durch das Festcodieren dieser Werte wird die Wartung jedoch erheblich teurer. Wenn sich das Layout ändert, was als trivial angesehen werden kann, muss viel Arbeit in die Korrektur dieser Werte gesteckt werden.
Dieses Konstruktionsprinzip reduziert die Kosten für die Wartung des Layouts, indem das Layout anders betrachtet wird.
Demonstration des Problems und der Lösung
Stellen Sie sich beispielsweise einen Bildschirm mit drei Abschnitten vor, die wie folgt angeordnet sind: 
Der blaue Kasten könnte einen Spielraum von 4,4,0,0 erhalten. Die grüne Box könnte einen Spielraum von 4,4,4,0 haben. Der violette Rahmenrand wäre 4,4,4,4. Hier ist die XAML: (Ich verwende ein Raster, um das Layout zu erreichen; dieses Konstruktionsprinzip gilt jedoch unabhängig davon, wie Sie das Layout erreichen möchten):
<UserControl x:Class="WpfApplication5.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>
Stellen Sie sich nun vor, dass wir das Layout ändern möchten, um das grüne Feld links vom blauen Feld zu platzieren. Sollte einfach sein, oder? Außer, dass wir beim Verschieben der Box jetzt an den Rändern basteln müssen. Entweder können wir die Ränder des blauen Kästchens auf 0,4,4,0 ändern. oder wir könnten Blau auf 4,4,4,0 und Grün auf 4,4,0,0 ändern. Hier ist die XAML:
<UserControl x:Class="WpfApplication5.UserControl2HardCoded"
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="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,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>
Nun setzen wir die violette Box oben ein. So werden die Ränder von Blau 4,0,4,4; Grün wird 4,0,0,4.
<UserControl x:Class="WpfApplication5.UserControl3HardCoded"
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="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="1" Margin="4,0,4,4" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="1" Margin="4,0,0,4" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Wäre es nicht schön, wenn wir die Dinge verschieben könnten, so dass wir diese Werte überhaupt nicht anpassen müssen. Dies kann erreicht werden, indem der Whitespace nur auf eine andere Art und Weise betrachtet wird. Anstatt den gesamten Leerraum einem oder dem anderen Steuerelement zuzuordnen, stellen Sie sich vor, dass jeder Box die Hälfte des Whitespaces zugewiesen wird: .
Die blaue Box hat also einen Rand von 2,2,2,2; die grüne Box hat Ränder von 2,2,2,2; Die violette Box hat Ränder von 2,2,2,2. Und der Behälter, in dem sie untergebracht sind, erhält eine Polsterung (kein Rand) von 2,2,2,2. Hier ist die XAML:
<UserControl x:Class="WpfApplication5.UserControl1HalfTheWhitespace"
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>
Versuchen wir nun, die Boxen auf die gleiche Weise wie zuvor zu verschieben ... Setzen wir die grüne Box links von der blauen Box. OK, fertig. Außerdem mussten keine Polsterungen oder Ränder geändert werden. Hier ist die XAML:
<UserControl x:Class="WpfApplication5.UserControl2HalfTheWhitespace"
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="1" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" 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>
Nun setzen wir die violette Box oben ein. OK, fertig. Außerdem mussten keine Polsterungen oder Ränder geändert werden. Hier ist die XAML:
<UserControl x:Class="WpfApplication5.UserControl3HalfTheWhitespace"
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>
Wie man dies in echtem Code verwendet
Zu verallgemeinern , was wir oben gezeigt haben: einzelne Dinge eine feste Marge von „halb-the-Leerzeichen“ enthalten, und der Behälter sie gehalten werden , werden sollte eine Polsterung von „half-the-Leerzeichen“ haben. Sie können diese Stile in Ihrem Anwendungsressourcenwörterbuch anwenden, und Sie müssen sie nicht einmal bei den einzelnen Elementen erwähnen. So definieren Sie "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}"/>
Dann kann ich einen Basisstil definieren, auf den sich meine anderen Steuerelementstile beziehen: (Dieser kann auch Ihre Standard-FontFamily, FontSize usw. enthalten.)
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="Margin" Value="{StaticResource HalfTheWhiteSpace}"/>
</Style>
Dann kann ich meinen Standardstil für TextBox definieren, um diesen Rand zu verwenden:
<Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}"/>
Ich kann diese Art von Dingen für DatePicker, Labels usw. usw. (alles, was in einem Container enthalten ist) tun. Passen Sie auf, TextBlock wie folgt zu gestalten ... dieses Steuerelement wird intern von vielen Steuerelementen verwendet. Ich würde vorschlagen, dass Sie ein eigenes Steuerelement erstellen, das einfach von TextBlock abgeleitet wird. Sie können Ihren TextBlock so gestalten, dass der Standardrand verwendet wird. Sie sollten Ihren TextBlock immer dann verwenden, wenn Sie explizit einen TextBlock in Ihrer XAML verwenden.
Sie können einen ähnlichen Ansatz verwenden, um die Auffüllung auf allgemeine Container anzuwenden (z. B. ScrollViewer, Border usw.).
Wenn Sie dies getan haben, benötigen die meisten Steuerelemente keine Ränder und Füllungen - und Sie müssen Werte nur an Stellen angeben, an denen Sie absichtlich von diesem Konstruktionsprinzip abweichen möchten.