Feed Icon  


  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics


Open Source Projects



Styling Hack Using Attached Properties in Silverlight

Posted in Silverlight at Wednesday, 18 March 2009 09:08 Pacific Standard Time

I need to find the forum post where this question was asked, but I’ll have to do that later since I’m at MIX09 and searching the forums is low on my list. But I wanted to share a cool hack that I came across in the Climbing Mt Avalon (it was definitely a climb, not a hike).  One of the many cool things that was shared was a tidbit by Jaime Rodriguez about using Attached Properties.

The question in the forums was how you can style the VerticalScrollBarVisibility property on a TextBox. The problem is that since this property isn’t a DependencyProperty  so it can’t be styled. You can test this out by trying the following Xaml:

   1: <UserControl x:Class="Attachment.Page"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     Width="400" Height="300">
   5:     <UserControl.Resources>
   6:         <Style TargetType="TextBox" x:Key="test">
   7:             <Setter Property="FontSize" Value="24" />
   8:             <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
   9:         </Style>
  10:     </UserControl.Resources>
  11:     <Grid x:Name="LayoutRoot" Background="White">
  12:      <TextBox Text="This is a test" Style="{StaticResource test}" />
  13:     </Grid>
  14: </UserControl>

If you try to run this it will fail. So how can we set this property in style? Well, a trick you can use is to set your own attached property and then have the property set the VerticalScrollBarVisibility property on the TextBox for you. Here is a very quick example that I cooked up (using Robby’s code snippet):

   1: namespace Attachment
   2: {
   3:     public static class Attachments
   4:     {
   5:         public static readonly DependencyProperty MyVsbvProperty =
   6:             DependencyProperty.RegisterAttached("MyVsbv", 
   7:                 typeof(ScrollBarVisibility), 
   8:                 typeof(Attachments), 
   9:                 new PropertyMetadata(OnMyVsbvChanged));
  11:         public static void SetMyVsbv(DependencyObject o, ScrollBarVisibility value)
  12:         {
  13:             o.SetValue(MyVsbvProperty, value);
  14:         }
  16:         public static ScrollBarVisibility GetMyVsbv(DependencyObject o)
  17:         {
  18:             return (ScrollBarVisibility)o.GetValue(MyVsbvProperty);
  19:         }
  21:         private static void OnMyVsbvChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  22:         {
  23:             ((TextBox)d).VerticalScrollBarVisibility = (ScrollBarVisibility)e.NewValue;
  24:         }
  25:     }
  26: }

Very unintuitive name and my casts could be bad since there are no type checks, just an example. So here when the attached property is changed we change the property on the TextBox that the property is declared on. So if we change our style to use the attached property instead of the actual property it will work:

   1: <UserControl x:Class="Attachment.Page"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:local="clr-namespace:Attachment"
   5:     Width="400" Height="300">
   6:     <UserControl.Resources>
   7:         <Style TargetType="TextBox" x:Key="test">
   8:             <Setter Property="FontSize" Value="24" />
   9:             <Setter Property="local:Attachments.MyVsbv" Value="Visible" />
  10:         </Style>
  11:     </UserControl.Resources>
  12:     <Grid x:Name="LayoutRoot" Background="White">
  13:                 <TextBox Text="This is a test" Style="{StaticResource test}" />
  14:             </Grid>
  15: </UserControl>


So there you have it. If you need to style a property on a control that isn’t a dependency property you can use this method to get around that limitation. There are a bunch of other uses for this that I’ll be blogging when I have another minute.


Friday, 20 March 2009 03:48:04 (Pacific Standard Time, UTC-08:00)
I guess this method could be used for animating properties you normally can't animate right?
Wednesday, 14 October 2009 14:29:09 (Pacific Daylight Time, UTC-07:00)
Have you tried this in Blend. I've used Attached Propeties for Styles, but it seems to crash Blend.

I don't know if it's only in my project or it's a Blend issue./
Comments are closed.