How to use styles from separate xaml files

Question

I have a styles.xaml file that lists a set of colors. These colors define how certain elements within one part of the application are shown, and thus are used through a converter.

I would like to create a legend of these colors in another part of the application, and have a toggle button list that I'd like to set the background colors to the colors defined in the styles.xaml.

Would I need to somehow include the styles.xaml file into the xaml file defining the toggle buttons? Or is there some way I can bind directly to these color values?

Answer 1

Add styles.xaml to App.xaml

 <Application.Resources>
    <ResourceDictionary >
        <ResourceDictionary.MergedDictionaries >       
            <ResourceDictionary Source="styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Answer 2

Note Attribution for the following content / answer should go to @Chris Schaller. This answer's content was originally posted as an edit to @chameleon86 answer and was rejected (see also this meta). However I think, this is some valuable content and so I am 'reposting' it.

To make the definitions in styles.xaml available to all XAML within the app, add styles.xaml to App.xaml

<Application.Resources>
   <ResourceDictionary >
        <ResourceDictionary.MergedDictionaries >  
            <ResourceDictionary Source="styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <!-- You can declare additional resources before or after Merged dictionaries, but not both -->
        <SolidColorBrush x:Key="DefaultBackgroundColorBrush" Color="Cornsilk" />
        <Style x:Key="DefaultBackgroundColor" TargetType="TextBox">
            <Setter Property="Background" Value="{StaticResource DefaultBackgroundColorBrush}" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

To understand how this works, at runtime your window, page or control will exist as child elements of the running application visual tree.

Your initial question noted:

"These colors define how certain elements within one part of the application..."

If you only need these style resources available to some xaml pages or windows, and not all of them, then you can still use this pattern to merge the local resources for a window, or for grids or other controls directly.

• Note that doing this makes these styles only available to child elements of the element that you declared the Resource Dictionary.

See how simple it is scope the style reference to a single grid for usage:

<Grid>
    <Grid.Resources>
        <ResourceDictionary >
            <ResourceDictionary.MergedDictionaries >       
                <ResourceDictionary Source="styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <!-- You can declare additional resources before or after Merged dictionaries, but not both -->
        </ResourceDictionary>
    </Grid.Resources>
    <!--
        Grid Content :)
      -->
</Grid>