If you looked at my earlier blog item on WrapPanels you may remember that I raised the question as to whether it was really necessary to have so much laboriously repeated detail for the five buttons, i.e.:-
<Button Background="Black" Foreground="White" Margin="12,3,12,3" Padding="3"
MinWidth="75" MinHeight="34" > Open Button>
<Button Background="Black" Foreground="White" Margin="12,3,12,3" Padding="3"
MinWidth ="75" MinHeight="34"> Close Button>
<Button Background="Black" Foreground="White" Margin="12,3,12,3" Padding="3"
MinWidth="75" MinHeight="34"> StartButton>
<Button Background="Black" Foreground="White" Margin="12,3,12,3" Padding="3"
MinWidth="75" MinHeight="34"> Pause Button>
<Button Background="Black" Foreground="White" Margin="12,3,12,3" Padding="3"
MinWidth ="75" MinHeight="34"> StopButton>
which produces this display:
Effectively the only difference between all five buttons is the Content - that is, the text displayed on each button.
It is in fact very easy to reduce the amount of code needed to create this layout. One way is to use WPF Styles. In WPF, Styles allow you to gather together groups of settings that you want to apply and reuse in more than one place. If you create a Style for a particular type of Button, for example, that same Style can be used by any number of Buttons. (In fact, the scope for reuse is far greater than this, but it's a good starting point).
A Simple Style for a Button
Starting out with the basics, you can create a Style and place it within the WrapPanel's Resources. So to take our original properties, coding the Style in XAML looks like this:
<WrapPanel.Resources>
<Style x:Key="BlackButton" >
<Setter Property="Button.Background" Value="Black" />
<Setter Property="Button.Foreground" Value="White" />
<Setter Property="Button.Margin" Value="12,3,12,3" />
<Setter Property="Button.Padding" Value="3" />
<Setter Property="Button.MinWidth" Value="75" />
<Setter Property="Button.MinHeight" Value="34" />
Style>
WrapPanel.Resources>
As you can see, I've simply recreated the values from the original Buttons, minus the individual Buttons' text content. Note that the Style has to have a named Key and that this key is mapped to the XAML Namespace.
Also, (in this example at least) each property that you set is declared by using the name of the control Type (Button) and the particular Property on that Type. Of course, having identified the Property, you use the Value attribute to assign the required value.
The Resource that I have named BlackButton is compiled into the project as a StaticResource. To reference this Style, the following syntax is used:
<Button Style="{StaticResource BlackButton}"> Open Button>
this line of code obviously creating and assigning property values to the Button which has the text content of "Open".
Putting this altogether - that is, the defining of the Style and the use of the StaticResource to apply values to the buttons - the complete code package is:
<WrapPanel x:Name="ButtonPanel" Background="Gainsboro">
<WrapPanel.Resources>
<Style x:Key="BlackButton" >
<Setter Property="Button.Background" Value="Black" />
<Setter Property="Button.Foreground" Value="White" />
<Setter Property="Button.Margin" Value="12,3,12,3" />
<Setter Property="Button.Padding" Value="3" />
<Setter Property="Button.MinWidth" Value="75" />
<Setter Property="Button.MinHeight" Value="34" />
Style>
WrapPanel.Resources>
<Button Style="{StaticResource BlackButton}"> Open Button>
<Button Style="{StaticResource BlackButton}"> Close Button>
<Button Style="{StaticResource BlackButton}"> StartButton>
<Button Style="{StaticResource BlackButton}"> Pause Button>
<Button Style="{StaticResource BlackButton}"> StopButton>
WrapPanel>
So is that as good as it gets? Of course not! We can do far more interesting things which I will continue to describe in the next part.