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

Inheritance

 

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

About Jesse Liberty

Jesse Liberty has three decades of experience writing and delivering software projects and is the author of 2 dozen books and a couple dozen online courses. His latest book, Building APIs with .NET will be released early in 2025. Liberty is a Senior SW Engineer for CNH and he was a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Microsoft MVP.
This entry was posted in Blend, Mini-Tutorial, Tools and Utilities, z Silverlight Archives and tagged , . Bookmark the permalink.