Styles (followup)

Yesterday’s post did not include source, and left fleshing out the styles as an exercise… this quick follow-up will provide a link to the full code and a quick walkthrough of the styles I ended up creating.

The tricky part is that there is not a single base class for the various controls we’re using (e.g., TextBlock, TextBox etc.) and the based on property requires that the target be either the base style class or a class derived from the base style class. A quick check of the Silverlight .chm file reveals the inheritance structure shown in the figure

The dotted line from Control to CheckBox, RadioButton and ListBox is intended to indicate that these three classes inherit indirectly from Control.

With this structure in mind, we can create our styles, starting with the FWEBaseStyle (Framework Element Base) and deriving from that a style for TextBlocks and a second that factors out all the common styles for the remaining four types.

<Style
    x:Key="FWEStyle"
    TargetType="FrameworkElement">
    <Setter
        Property="Margin"
        Value="5" />
    <Setter
        Property="HorizontalAlignment"
        Value="Right" />
    <Setter
        Property="VerticalAlignment"
        Value="Bottom" />
</Style>

We’ll derive InputControlStyle from the FWEStyle, providing all we need for three of the four Control types; but Toolbox will need additional properties to handle, e.g., TextWrap

<Style
    x:Key="InputControlStyle"
    TargetType="Control"
    BasedOn="{StaticResource FWEStyle}">
    <Setter
        Property="HorizontalAlignment"
        Value="Left" />
    <Setter
        Property="FontFamily"
        Value="Georgia" />
    <Setter
        Property="FontSize"
        Value="14" />
    <Setter
        Property="FontWeight"
        Value="Normal" />
</Style>

<Style
    x:Key="TextBoxStyle"
    TargetType="TextBox"
    BasedOn="{StaticResource InputControlStyle}">
    <Setter
        Property="TextWrapping"
        Value="Wrap" />
    <Setter
        Property="Width"
        Value="120" />
    <Setter
        Property="Height"
        Value="Auto" />
</Style>

All that is left is to apply these styles to the controls, which can be done either by dragging the Style onto the control in Blend, or by copying the style property in Visual Studio; for example:

<RadioButton
    x:Name="Female"
    Content="Female"
    GroupName="Sex"
    Style="{StaticResource InputControlStyle}" />

The complete source listing is here