Silverlight with using of DependencyProperty and ControlTemplate
- by Taras
Hello everyone,
I'm starting to study Silverlight 3 and Visual Studio 2008. I've been trying to create Windows sidebar gadget with button controls that look like circles (I have couple of "roundish" png images). The behavior, I want, is the following: when the mouse hovers over the image it gets larger a bit. When we click on it, then it goes down and up. When we leave the button's image it becomes normal sized again.
Cause I'm going to have couple of such controls I decided to implement custom control: like a button but with image and no content text.
My problem is that I'm not able to set my custom properties in my template and style.
What am I doing wrong?
My teamplate control with three additional properties:
namespace SilverlightGadgetDocked {
public class ActionButton : Button {
/// <summary>
/// Gets or sets the image source of the button.
/// </summary>
public String ImageSource {
get { return (String)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
/// <summary>
/// Gets or sets the ratio that is applied to the button's size
/// when the mouse control is over the control.
/// </summary>
public Double ActiveRatio {
get { return (Double)GetValue(ActiveRatioProperty); }
set { SetValue(ActiveRatioProperty, value); }
}
/// <summary>
/// Gets or sets the offset - the amount of pixels the button
/// is shifted when the the mouse control is over the control.
/// </summary>
public Double ActiveOffset {
get { return (Double)GetValue(ActiveOffsetProperty); }
set { SetValue(ActiveOffsetProperty, value); }
}
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource",
typeof(String),
typeof(ActionButton),
new PropertyMetadata(String.Empty));
public static readonly DependencyProperty ActiveRatioProperty =
DependencyProperty.Register("ActiveRatio",
typeof(Double),
typeof(ActionButton),
new PropertyMetadata(1.0));
public static readonly DependencyProperty ActiveOffsetProperty =
DependencyProperty.Register("ActiveOffset",
typeof(Double),
typeof(ActionButton),
new PropertyMetadata(0));
public ActionButton() {
this.DefaultStyleKey = typeof(ActionButton);
}
}
}
And XAML with styles:
<UserControl x:Class="SilverlightGadgetDocked.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:SilverlightGadgetDocked="clr-namespace:SilverlightGadgetDocked"
Width="130" Height="150" SizeChanged="UserControl_SizeChanged" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave">
<Canvas>
<Canvas.Resources>
<Style x:Name="ActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SilverlightGadgetDocked:ActionButton">
<Grid>
<Image Source="{TemplateBinding ImageSource}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DockedActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource ActionButtonStyle}">
<Setter Property="Canvas.ZIndex" Value="2"/>
<Setter Property="Canvas.Top" Value="10"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="30"/>
<Setter Property="ActiveRatio" Value="1.15"/>
<Setter Property="ActiveOffset" Value="5"/>
</Style>
<Style x:Key="InfoActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_info.png"/>
</Style>
<Style x:Key="ReadActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_read.png"/>
</Style>
<Style x:Key="WriteActionButtonStyle" TargetType="SilverlightGadgetDocked:ActionButton"
BasedOn="{StaticResource DockedActionButtonStyle}">
<Setter Property="ImageSource" Value="images/action_button_write.png"/>
</Style>
</Canvas.Resources>
<StackPanel>
<Image Source="images/background_docked.png" Stretch="None"/>
<TextBlock Foreground="White" MaxWidth="130" HorizontalAlignment="Right" VerticalAlignment="Top" Padding="0,0,5,0" Text="Name" FontSize="13"/>
</StackPanel>
<SilverlightGadgetDocked:ActionButton Canvas.Left="15" Style="{StaticResource InfoActionButtonStyle}" MouseLeftButtonDown="imgActionInfo_MouseLeftButtonDown"/>
<SilverlightGadgetDocked:ActionButton Canvas.Left="45" Style="{StaticResource ReadActionButtonStyle}" MouseLeftButtonDown="imgActionRead_MouseLeftButtonDown"/>
<SilverlightGadgetDocked:ActionButton Canvas.Left="75" Style="{StaticResource WriteAtionButtonStyle}" MouseLeftButtonDown="imgActionWrite_MouseLeftButtonDown"/>
</Canvas>
</UserControl>
And Visual Studio reports that "Invalid attribute value ActiveRatio for property Property" in line 27
<Setter Property="ActiveRatio" Value="1.15"/>
VERY BIG THANKS!!!
