So, as I mentioned last time, when working with Silverlight you'll sometimes run into properties that you'd love to set in a style resource in markup, but can't. You can almost always hack around that, though, wrapping it in your own attached dependency property. Pull up a chair and I'll show you how to do that!
Since I can't think of a good example (which I'll explain after), we're going to do something maybe a little bit silly: use a style resource to set the Grid.Column property. It's not entirely arbitrary; when you're working with grids, and then you have to insert a row or column in the middle, it's not very fun to go and change the Grid attached properties on every element in the grid. This isn't a great way to deal with this but it does make a good example (it'd be a decent way to deal with it if the framework provided a way to assign or inherit multiple styles as I mentioned last time, but oh well).
Let's consider the following user control xaml:
<UserControl.Resources>
<Style x:Name="Buttons" TargetType="Button">
</Style>
<Style x:Name="TextBoxes" TargetType="TextBox">
<Setter Property="Height" Value="30"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style x:Name="TextBlocks" TargetType="TextBlock">
<Setter Property="Height" Value="30"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Button Content="Button 1" Grid.Row="0" Style="{StaticResource Buttons}"/>
<Button Content="Button 2" Grid.Row="1" Style="{StaticResource Buttons}"/>
<Button Content="Button 3" Grid.Row="2" Style="{StaticResource Buttons}"/>
<TextBox Text="TextBox 1" Grid.Row="0" Style="{StaticResource TextBoxes}"/>
<TextBox Text="TextBox 2" Grid.Row="1" Style="{StaticResource TextBoxes}"/>
<TextBox Text="TextBox 3" Grid.Row="2" Style="{StaticResource TextBoxes}"/>
<TextBlock Text="TextBlock 1" Grid.Row="0" Style="{StaticResource TextBlocks}"/>
<TextBlock Text="TextBlock 2" Grid.Row="1" Style="{StaticResource TextBlocks}"/>
<TextBlock Text="TextBlock 3" Grid.Row="2" Style="{StaticResource TextBlocks}"/>
</Grid>
We get this somewhat less than desirable output:
Here's how I justify this as more than just a lame example; we can specify the grid column in the style for all the textblocks, textboxes, and buttons on this control, so if we need to add another column we only have to change the values in one place. What we need to do is add an attached dependency property. For the sake of simplicity, I'm going to add it to the default control we're playing around with, but if you wanted to do this in lots of places you'd probably want to put it in a static class.
There's actually a snippet in Visual Studio for attached dependency properties; "propa" [TAB] will get you started.
Completing the snippet (and noting that in WPF it's UIPropertyMetadata but for Silverlight we have to change it to just PropertyMetadata), we've got this:
public static int GetGridColumn(DependencyObject obj)
{
return (int)obj.GetValue(GridColumnProperty);
}
public static void SetGridColumn(DependencyObject obj, int value)
{
obj.SetValue(GridColumnProperty, value);
}
public static readonly DependencyProperty GridColumnProperty =
DependencyProperty.RegisterAttached(
"GridColumn",
typeof(int),
typeof(MainPage),
new PropertyMetadata(0));
The fun part comes with the overload for the PropertyMetadata constructor that lets us specify a callback for when the value changes. The signature for the callback gives us the DependencyObject to which the property is attached, and event args inside which we can find the NewValue. So in the handler there, we can run whatever line of code we want with both of those values.
public static readonly DependencyProperty GridColumnProperty =
DependencyProperty.RegisterAttached(
"GridColumn",
typeof(int),
typeof(MainPage),
new PropertyMetadata(OnGridColumnChanged));
private static void OnGridColumnChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
d.SetValue(Grid.ColumnProperty, e.NewValue);
}
Now we just need to add those values to our style resources block:
<UserControl.Resources>
<Style x:Name="Buttons" TargetType="Button">
<Setter Property="this:MainPage.GridColumn" Value="2"/>
</Style>
<Style x:Name="TextBoxes" TargetType="TextBox">
<Setter Property="this:MainPage.GridColumn" Value="1"/>
<Setter Property="Height" Value="30"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style x:Name="TextBlocks" TargetType="TextBlock">
<Setter Property="this:MainPage.GridColumn" Value="0"/>
<Setter Property="Height" Value="30"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</UserControl.Resources>
And lo, the output looks much more sane:
Yknow, in theory, we don't even have to use this to set other properties... If you wanted to, you could use this approach to run arbitrary code as a result of a style being applied, by just tossing whatever code you want into your changed handler. In some situations that might be a cool way to assign some behavior.
I did say at the beginning that I'd explain why I didn't have a better example. Truth be told, the reason I was looking into this in the first place was because I wanted to set Telerik's StyleManager.Theme in a style resource for all my buttons on a user control. Unfortunately, although this method would work great in theory, the reality of that particular situation is that as their StyleManager sets the theme, it removes the current style and thus it resets itself right before applying and we see no effect. I thought I was being clever... Oh well.