[skybomb0]

About a week ago, I decided to dive into WPF thinking I could get by, but I found out there is a steep learning curve. I have made it through quite a bit, but am now stuck on "skinning" a user control.
I am developing in Expression Blend right now and have a single user control and two instances of it on my window. I want one of them to be blue and the other to be red. Instead of creating separate controls for each color, I could skin the control. I have created the two simple resource dictionaries that I want applied to each control, but I am stuck on how to assign a resource dictionary to the specific control. How do I tell each control where to get its resources from?

In Mainwindow.xaml, I create the user controls with:

<local:SystemButton Grid.Column="1" Margin="0"/>
<local:SystemButton Grid.Column="2" Margin="0"/>

My resource dictionaries look like this, the only difference being colors:

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<RadialGradientBrush x:Key="BackgroundBrush">
		<GradientStop Color="#FFB42800" Offset="0"/>
		<GradientStop Color="#FF021426" Offset="1"/>
	</RadialGradientBrush>
	<SolidColorBrush x:Key="HighlightBrush" Color="#FFFFB39C"/>
	<RadialGradientBrush x:Key="LightBrush">
		<GradientStop Color="Red" Offset="0"/>
		<GradientStop Color="#00FF0000" Offset="1"/>
	</RadialGradientBrush>
	<!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>

Finally, my UserControl looks like this:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:System="clr-namespace:System;assembly=mscorlib"
	mc:Ignorable="d"
	x:Class="DesktopWeather.SystemButton"
	x:Name="UserControl"
	d:DesignWidth="50" d:DesignHeight="50">

	<Grid x:Name="LayoutRoot">
		<Grid.ColumnDefinitions>
			<ColumnDefinition/>
			<ColumnDefinition Width="3*"/>
			<ColumnDefinition/>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="0.25*"/>
			<RowDefinition/>
			<RowDefinition/>
			<RowDefinition Height="3.5*"/>
		</Grid.RowDefinitions>
		<Ellipse Margin="0" Grid.RowSpan="4" Grid.ColumnSpan="3" Fill="{DynamicResource BackgroundBrush}"/>
		<Ellipse Margin="0" Grid.RowSpan="2" Grid.Column="1" Grid.Row="1" Fill="{DynamicResource HighlightBrush}"/>
		<Ellipse Margin="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Grid.Row="1" Fill="{DynamicResource LightBrush}"/>
	</Grid>
</UserControl>

[skybomb0]

I found the answer I was looking for. It turned out that there wasn't an answer to my question the way I was going about it. I simply needed to implement a few dependency properties in the user control and set them in the xaml of my window.

For anybody who might make the same mistake as I did, when I created the ellipses in my user control, I changed the code to something like this

<Ellipse Margin="0" Grid.RowSpan="4" Grid.ColumnSpan="3" Fill="{Binding BackgroundBrush, ElementName=UserControl}" />

In the code part of my user control, I created dependency properties like this

public RadialGradientBrush BackgroundBrush
		{
			get { return (RadialGradientBrush)GetValue(BackgroundBrushProperty);}
			set { SetValue(BackgroundBrushProperty, value);}
		}

public static readonly DependencyProperty BackgroundBrushProperty =
			DependencyProperty.Register("BackgroundBrush",
				typeof(RadialGradientBrush),
				typeof(SystemButton));

Finally, I created instances of my user control like this:

<local:SystemButton Grid.Column="1" Margin="0">
				<local:SystemButton.BackgroundBrush>
					<RadialGradientBrush>
						<GradientStop Color="#FF0953A3" Offset="0"/>
						<GradientStop Color="#FF021426" Offset="1"/>
					</RadialGradientBrush>
				</local:SystemButton.BackgroundBrush>
				<local:SystemButton.HighlightBrush>
					<SolidColorBrush Color="#7FA6D1FF" />
				</local:SystemButton.HighlightBrush>
				<local:SystemButton.LightBrush>
					<RadialGradientBrush>
						<GradientStop Color="#FF1BA4D3" Offset="0"/>
						<GradientStop Color="#00062D50" Offset="1"/>
					</RadialGradientBrush>
				</local:SystemButton.LightBrush>
			</local:SystemButton>

This post has been edited by skybomb0: 24 December 2010 - 04:47 PM