Portable XAML Styles in a Class Library

Question

So I have an application with a style put directly into the App.xaml file as such:

<Application x:Class="Test.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Startup="OnStartup">
    <Application.Resources>
        <Style x:Key="SpecialButtonStyle" TargetType="Button">
            <Setter Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Block.Foreground" Value="White" />
            <Setter Property="TextBlock.Foreground" Value="White" />
            <Setter Property="TextElement.Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}">
                                    <Border Background="{TemplateBinding BorderBrush}">
                                        <ContentControl Foreground="White">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </ContentControl>
                                    </Border>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Application.Resources>
</Application>

I want to include this as a style in my class Library, so that any xaml projects that reference that library can see "SpecialButtonStyle" as a selectable "Style" in the designer. I've read several articles about ResourceDictionaries and creating portable XAML controls, but I'm still confused. I basically want a collection of styles included as part of a class library.

(I can only post 2 links until I get a higher StackOverflow reputation) http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx

http://visualstudiomagazine.com/articles/2015/03/01/everyone-gets-xaml-with-xamarinforms.aspx

Any help would be greatly appreciated. Thanks!

Answer 1

What you read is correct.

What you need is to create a plain ResourceDictionary inside your shared assembly with a given name.

In your App.xaml you then can include this ResourceDictionary as a MergedDictionary and therefore your whole app will have access to all of the shared dictionaries resources.

Steps:

1. Create another project WPF Control Library Project (doesn't matter about User or Custom)
2. In the new project right click -> Add -> ResourceDictionary
3. Paste your style in so it looks like the following:

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="SpecialButtonStyle" TargetType="Button">
        <Setter Property="Content" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}" />
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Block.Foreground" Value="White" />
        <Setter Property="TextBlock.Foreground" Value="White" />
        <Setter Property="TextElement.Foreground" Value="White" />
        <Setter Property="FontWeight" Value="Bold" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="False">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness}">
                                <Border Background="{TemplateBinding BorderBrush}">
                                    <ContentControl Foreground="White">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </ContentControl>
                                </Border>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

4. In your main project reference this new Control Library
5. In App.xaml reference Dictionary1.xaml

App.xaml

<Application x:Class="WpfApplication1.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 StartupUri="NestedXamlObjects.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/WpfControlLibrary1;component/Dictionary1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>