When I say "Design-Time Property", I mean a property on the user control that shows up in your properties window and perhaps visually changes the user control when you change this property.
This property is actually a Dependency Property. Follow these steps to create a Dependency Property on the user control.
1. Declare a
static DependencyProperty in the user control's xaml.cs class. The name of this DependencyProperty
HAS to end in the word "Property".
public static DependencyProperty ConditionProperty;
2. Create a regular property with a get and set. This is usually the same name as your DependencyProperty but without the suffix "Property".
public enum ConditionEnum
{
NonExistence,
Danger,
Emergency,
Normal,
Affluence,
Power
}
public ConditionEnum Condition
{
get { return (ConditionEnum)GetValue(ConditionProperty); }
set { SetValue(ConditionProperty, value); }
}
(I'm using an enum as the type for this property.)
3. Create a static event you want to fire when your property changes.
private static void Condition_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
ConditionEnum conditionValue = (ConditionEnum) e.NewValue;
StatGraphControl thisUserControl = (StatGraphControl) sender;
thisUserControl.BackgroundRectangle.Fill =
new SolidColorBrush((Color) thisUserControl.FindResource(conditionValue.ToString()));
}
Notice how you get the value of what the property is being set to. You also have to get the user control itself from the sender parameter if you are going to change something on your user control. All properties and objects cannot be referenced directly from the same class because you are working with a static context. So you have to work on the properties and objects of the control passed in from the sender parameter.
In this case I am changing the background color of a rectangle in my usercontrol. I defined some color resources in the xaml that all have the same names as the names in my enum "ConditionEnum":
<UserControl.Resources>
<Color x:Key="NonExistence">#FF808080</Color>
<Color x:Key="Danger">#FFBE0000</Color>
<Color x:Key="Emergency">#FFFF8D07</Color>
<Color x:Key="Normal">#FFF0C908</Color>
<Color x:Key="Affluence">#FF1AA451</Color>
<Color x:Key="Power">#FF166C0D</Color>
</UserControl.Resources>
4. Create a static constructor to register your dependency property with your property and event. This last step kind of ties everything together.
1: static StatGraphControl()
2: {
3: ConditionProperty = DependencyProperty.Register(
4: "Condition",
5: typeof(ConditionEnum),
6: typeof(StatGraphControl),
7: new PropertyMetadata(
8: ConditionEnum.NonExistence,
9: Condition_Changed));
10: }
Whoah, there's a lot happening here. Let's break it down:
Line 4 is the name of your property.
Line 5 is the type of your property.
Line 6 is the owner of the property.
Line 7 is going to create some metadata for your property. In this case it will set a default value (line 8) and what event is to be called when your property value changes (line 9).
Compile and now the property shows up (only in Expression Blend, not in VS 2008) in the properties window and when I change the property the color of the control now changes.
By default, the new property will fall under the Miscellaneous category. To change this, you want to add a
Category attribute to your public property. There is also a
Description attribute you can add if you think it will help.
[Category("MyApp")]
[Description("Setting the Condition will determine what color shows.")]
public ConditionEnum Condition
{
get { return (ConditionEnum)GetValue(ConditionProperty); }
set { SetValue(ConditionProperty, value); }
}
After your style is defined, you can now set it to your element:
Well, I'm not too crazy about how this looks...it just doesn't blend with the way my app looks. So I set about to customize it.
Ok, this looks better to me. But I notice something funny. The click on the ToggleButton ONLY seems to register if I click on the graphic area of the button; meaning I have to click on the thin line of the triangle itself to expand it. I can't even click in the center for it to work! This resulted it having to try to click on the line multiple times for it to register the click and expand. This won't do.
This alone won't work. So I give the grid a background color and change the Opacity (the Alpha channel) of the color to zero. This works perfectly. Now I don't have to click right on the triangle but can click anywhere in the general area.
Label
