Apply Resources to User Control

Page 1 of 1

1 Replies - 3813 Views - Last Post: 24 December 2010 - 04:44 PM Rate Topic: -----

#1 skybomb0  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 92
  • Joined: 12-May 10

Apply Resources to User Control

Posted 23 December 2010 - 05:24 PM

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:
	<RadialGradientBrush x:Key="BackgroundBrush">
		<GradientStop Color="#FFB42800" Offset="0"/>
		<GradientStop Color="#FF021426" Offset="1"/>
	<SolidColorBrush x:Key="HighlightBrush" Color="#FFFFB39C"/>
	<RadialGradientBrush x:Key="LightBrush">
		<GradientStop Color="Red" Offset="0"/>
		<GradientStop Color="#00FF0000" Offset="1"/>
	<!-- Resource dictionary entries should be defined here. -->

Finally, my UserControl looks like this:
	d:DesignWidth="50" d:DesignHeight="50">

	<Grid x:Name="LayoutRoot">
			<ColumnDefinition Width="3*"/>
			<RowDefinition Height="0.25*"/>
			<RowDefinition Height="3.5*"/>
		<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}"/>

Is This A Good Question/Topic? 0
  • +

Replies To: Apply Resources to User Control

#2 skybomb0  Icon User is offline

  • D.I.C Head

Reputation: 10
  • View blog
  • Posts: 92
  • Joined: 12-May 10

Re: Apply Resources to User Control

Posted 24 December 2010 - 04:44 PM

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 =

Finally, I created instances of my user control like this:
<local:SystemButton Grid.Column="1" Margin="0">
						<GradientStop Color="#FF0953A3" Offset="0"/>
						<GradientStop Color="#FF021426" Offset="1"/>
					<SolidColorBrush Color="#7FA6D1FF" />
						<GradientStop Color="#FF1BA4D3" Offset="0"/>
						<GradientStop Color="#00062D50" Offset="1"/>

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

Was This Post Helpful? 2
  • +
  • -

Page 1 of 1