this blog is modeled after the blog Defining and Using shared Resources
Below is preferred steps to create a themed resources for a custom/User controls
First, Create the User/Custom control
public partial class Painter : UserControl
{
...
}
Second, you will need to set The ThemeInfo attribute on the Assembly Level, which instruct the client to your custom/User Control where to find the resources for the controls that you declared.
[assembly:ThemeInfo(themeDictionaryLocation: ResourceDictionaryLocation.SourceAssembly,
genericDictionaryLocation: ResourceDictionaryLocation.SourceAssembly)]
Create the theme resources , the file should be located under Component/Themes/Generic.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComponentResourceKeyLib.UserControls"
>
<!-- ![CDATA[
1. define a resource in one of the Theme Resource Dictionary
NOTE: the downloaded example has shown a user control has been created , the user control that is
created is called local:Painter
Is that necessary
]]-->
<LinearGradientBrush
x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:Painter},
ResourceId=ButtonBrush}"
StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="White" Offset=".8" />
</LinearGradientBrush>
<LinearGradientBrush
x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type local:Painter},
ResourceId=MyEllipseBrush}"
StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Blue" Offset="0" />
<GradientStop Color="Red" Offset="0.5" />
<GradientStop Color="Green" Offset="1"/>
</LinearGradientBrush>
</ResourceDictionary>
Fourth, to use the resource that is declared with the ComponentResourceKey markup extension, you can either do it in the xmal code as follow.
I. To do it the XAML code NOTE: Please see the Background for the button below.
<UserControl x:Class="ComponentResourceKeyLib.UserControls.Painter"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:ComponentResourceKeyLib.UserControls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
<Ellipse Name="Ellipse1" HorizontalAlignment="Left"
Width="100" Height="100"
Stroke="Black" StrokeThickness="2"/>
<Button Margin="0,10,0,0" Click="FillBrush" HorizontalAlignment="Left"
Background="{StaticResource {ComponentResourceKey
TypeInTargetAssembly={x:Type local:Painter},
ResourceId=ButtonBrush}}">
Paint ellipse
</Button>
</StackPanel>
</UserControl>
II. Or you can do it in the code, as below.
public Painter()
{
InitializeComponent();
ComponentResourceKey brushKey = new ComponentResourceKey(typeof(Painter), "MyEllipseBrush");
ellipseBrush = (Brush)this.TryFindResource(brushKey);
}
Fifth, you can now use the User/Custom control, and by default, it will use the Theme resources that is defined as above.
<Window x:Class="ThemeResources_ComponentResourceKey.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ComponentResourceKeyLib.UserControls"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Painter />
</Grid>
</Window>