SL 3 - Define a Style Within a Resource Directory BasedOn a Style in Another Resource Directory


  •  I am a designer, not a developer.  I am styling an SL3 LOB type application.  There are three developers writing the C# code implementing the application's business logic.

     For a variety of reasons, we do not want to use themes or ISM to style the controls of our LOB application.  We want to:

    • Maintain performance, and:
    • Do not intend to allow users to change the fundamental "look and feel" of the application,

     so themes are not required.

    Also, we do not want to be forced to try to manage an "n" thousand line xaml file containing a theme.

    SL 3 now has the "BasedOn" capability which seems to work well when styles are based on other styles within the same UserControl.  We found that a style can be "BasedOn" on a style which itself is "BasedOn" a third style - very cool! 

    In our case, we would like the style attribute of a control in our "MainPage.xaml" to reference a style in a resource dictionary contained in a resource file in the "Resources" folder which itself is "BasedOn" a style in ANOTHER resource dictionary in a separate xaml file in the same "Resources" folder.

    When we follow the above described procedure, our solution build succeeds.  When we then depress "F5" to "run without debugging", we get a "blank" browser window, rather than the display of the expected styled button.  We do not get any errors from VS2008, Blend3 or IE 8.  If we remove the "BasedOn" xaml (see below) from the resource file, "MyButton.xaml" and rebuild the solution, then the button displays properly.

     BasedOn="{StaticResource HcdaBaseStyle}"

    I suspect the problem is related to a missing or incorrect namespace definition or some other semantics issue, but I can't see the problem.

    The purpose of all of this is to allow us to have a relatively small (few hundred line) resource dictionary file for each styled control.  There will be about thirty of these styled control resource dictionary files in our resources folder.  The "BasedOn" capability would be used to reference a parent style in a single resource dictionary in a separate xaml file in the resources folder which would contain the  common control properties for these controls, such as "FontSize" and "FontWeight".  That way if we want to change the "FontSize", we only have to change it in one relatively small xaml file.  It would really be useful if we did not have to repeat the same basic property (e.g. "FontSize") for each control "TargetType".

    The included xaml code snippets show the contents of App.xaml, MainPage.xaml, "Resources/MyButton.xaml", and "HcdaStyles.xaml" for the case which results in a successful build, but a blank IE 8.0.7100.0 browser window:

    Note: Style-related xaml is in bold font weight.


    3    <Application
    4    xmlns=""
    5    xmlns:x=""
    6    x:Class="TestISMandBasedOnStyles.App">
    7    <Application.Resources>
    8    <!-- Resources scoped at the Application level should be defined here. -->
    9    <ResourceDictionary>
    10   <ResourceDictionary.MergedDictionaries>
    11   <ResourceDictionary Source="Resources/MyButton.xaml"/>
    12   </ResourceDictionary.MergedDictionaries>
    13   </ResourceDictionary>
    14   </Application.Resources>
    15   </Application>

    19   <UserControl
    20   xmlns=""
    21   xmlns:x=""
    22   x:Class="TestISMandBasedOnStyles.MainPage"
    23   Width="640" Height="480">
    25   <Grid x:Name="LayoutRoot" Background="White">
    26          <Button HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource MyButtonStyle}"/>
    27   </Grid>
    28   </UserControl>

    32   <ResourceDictionary
    33   xmlns=""
    34   xmlns:x="">
    35           <Style x:Key="MyButtonStyle" BasedOn="{StaticResource HcdaBaseStyle}" TargetType ="Button">
    36               <Setter Property="Template">
    37           <Setter.Value>
    38       <ControlTemplate TargetType="Button">
    39           <Grid>
    40                               .
    41       <!-- Rest of button control template here!-->                           .
    42                               .
    43           </Grid>
    44       </ControlTemplate>
    45            </Setter.Value>
    46       </Setter>
    47       </Style>
    48   </ResourceDictionary>

    52   <ResourceDictionary
    53   xmlns=""
    54   xmlns:x="">
    55   <Style x:Key="HcdaBaseStyle" TargetType="Button">
                    <Setter Property="Background" Value="#FFE99815"/>
    57                   <Setter Property="BorderBrush" Value="#FF262626"/>
    58                   <Setter Property="BorderThickness" Value="5"/>
    59                   <Setter Property="FontFamily" Value="Verdana"/>
    60                   <Setter Property="FontSize" Value="12"/>
    61                   <Setter Property="FontStretch" Value="Normal"/>
    62                   <Setter Property="FontStyle" Value="Normal"/>
    63                   <Setter Property="FontWeight" Value="Bold"/>
    64                   <Setter Property="Foreground" Value="#FF262626"/>
    65                   <Setter Property="Padding" Value="2"/>
    66             </Style>
    67   </ResourceDictionary>

    Thursday, October 29, 2009 11:56 AM