Question

On even the smallest WPF examples and prototypes I’ve been doing, the <Windows.Resources> begins to bloat fast. Putting it back into app.xaml puts it all out of my Windows and UserControls but it is hard to organize (the Visual Studio “XAML folding” feature is of no help since you just have a page full of the word “Style…”).

In addition, I’m struggling to come upon an easy-to-remember and organized way of naming my styles. The best way I have found it just to be long and descriptive, so I get things like this: BottomMainLeftScrollViewerStyle, etc. But this has its limits and soon gets confusing as well. I decided to use camelCase for style names to easily spot them in pages and pages of XAML.

What are your strategies for preventing WPF resources from becoming unwieldy?

<Window.Resources>

    <local:CutOffConverter x:Key="AgeConverter" Cutoff="30"/>

    <Style TargetType="Grid" x:Key="customerGridMainStyle">
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint=".5,.5">
                    <GradientStop Offset="0.0" Color="#888"/>
                    <GradientStop Offset="1.0" Color="#ccc"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="StackPanel" x:Key="mainStackPanelStyle">
        <Setter Property="HorizontalAlignment" Value="Left"/>
    </Style>
    <Style TargetType="ScrollViewer" x:Key="mainScrollViewerStyle">
        <Setter Property="Height" Value="250"/>
    </Style>
    <Style TargetType="ListBox" x:Key="mainListBoxStyle">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Margin" Value="10"/>
    </Style>


    <ObjectDataProvider x:Key="customers"
                        ObjectType="{x:Type local:Customer}"
                        MethodName="GetAllCustomers"/>

    <DataTemplate DataType="{x:Type local:Customer}">
        <Grid x:Name="MainGrid" Style="{StaticResource customerGridMainStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="150"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Column="0" Grid.Row="0" Text="First Name" Margin="5"/>
            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding FirstName}" Margin="5"/>
            <TextBlock Grid.Column="0" Grid.Row="1" Text="Last Name" Margin="5"/>
            <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding LastName}" Margin="5"/>
            <TextBlock Grid.Column="0" Grid.Row="2" Text="Age" Margin="5"/>
            <TextBlock x:Name="Age" Grid.Column="1" Grid.Row="2" Text="{Binding Age}" Margin="5"/>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=Age, Converter={StaticResource AgeConverter}}">
                <DataTrigger.Value>true</DataTrigger.Value>
                <Setter TargetName="Age" Property="Foreground" Value="Red"/> 
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</Window.Resources>

Answer 1

Use separate ResourceDictionarys and merge them into the appropriate levels in your visual tree as needed.

<App ...>
    <App.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ListBoxResources.xaml"/>
                <ResourceDictionary Source="ComboBoxResources.xaml"/>
                <ResourceDictionary Source="LabelResources.xaml"/>
                <ResourceDictionary Source="TextBoxResources.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <!-- if you have local resources, place them here.
                (as noted by Mark Synowiec in the comments)
             -->
        </ResourceDictionary>
    </App.Resources>
</App>