Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit Custom Control with Design Time Support Problem
0 replies. Latest Post by Mustang65 on April 2, 2009.
(0)
Mustang65
Member
3 points
10 Posts
04-02-2009 6:46 PM |
I am writing a custom Glass Button control with the addition of description text and image. I have teset up the template for the control the way I want it with the base values for most things ( a couple I cant figure out how to do, which is the point of this post.) The code behind file is working for all of the existing properties that I have created. What I am looking to do is provide the ability to the developer to change the gradient color of the mouse over effect which is contained with in a border control called GLOW. The other thing that I am trying to do is set a default control size so that when a developer double clicks the control from within Blend that it adds it to the layout Root with a acceptable size. I have properties and controls working for thing like the image file, outer and inner border colors, displaying the description and so on. The XAML and code behind are provided below. Any help would be great as I have been beeting my head against the wall for the last week trying to figure it out.
XAML:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:LayoutOverrides="HorizontalAlignment,VerticalAlignment,Widht,Height" d:DesignWidth="300" d:DesignHeight="150" xmlns:Mustang="clr-namespace:GlassButtonImage_Description"> <Style TargetType="Mustang:GlassButton"> <Setter Property="OuterBorderColor" Value="#FFFFFFFF" /> <Setter Property="InnerBorderColor" Value="#FF000000" /> <Setter Property="ShowDescriptionBorder" Value="True" /> <Setter Property="DescriptionBorder" Value="#B2FCA703" /> <Setter Property="ButtonText" Value="Button Name" /> <Setter Property="ForeGroundBrush" Value="#FFFFFFFF" /> <Setter Property="DescriptionText" Value="Description Text for the button. You can place any text in this location" /> <Setter Property="ShowDescription" Value="True" /> <Setter Property="ShowImage" Value="True" /> <Setter Property="ImageFile" Value="UserHistory100.png" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Mustang:GlassButton"> <Grid x:Name="LayoutRoot" Cursor="Hand" > <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Unfocused"/> <vsm:VisualState x:Name="Focused"/> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Normal"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Glow" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Shine" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="InnerBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF000000"/> </ColorAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="00:00:00" Value="#99575555"/> </ColorAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border1" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Border x:Name="OuterBorder" Margin="0,0,0,0" BorderBrush="{TemplateBinding OuterBorderColor}" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> <Border x:Name="InnerBorder" Background="#B1000000" BorderBrush="{TemplateBinding InnerBorderColor}" CornerRadius="4,4,4,4" BorderThickness="1,1,1,1" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Border x:Name="Glow" Margin="0,0,0,0" BorderBrush="{TemplateBinding GlowingColor}" BorderThickness="2" Opacity="100" Grid.ColumnSpan="2" Grid.RowSpan="2"> <Border.Background> <RadialGradientBrush> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.926" ScaleY="2.157"/> <SkewTransform CenterX="0.5" CenterY="0.5"/> <RotateTransform CenterX="0.5" CenterY="0.5"/> <TranslateTransform X="0.018" Y="0.579"/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#FFFCA703" /> <GradientStop Color="#00FCA703" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> <Image Height="102" x:Name="btnImageFile" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Center" Grid.RowSpan="2" Source="{TemplateBinding ImageFile}" Stretch="None"/> <ContentPresenter Content="{TemplateBinding ButtonText}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2" Grid.RowSpan="2" Grid.ColumnSpan="1" x:Name="ButtonName" /> <Border x:Name="btnDescBorder" Margin="2,2,2,2" Grid.Column="2" Grid.Row="2" BorderBrush="{TemplateBinding DescriptionBorder}" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" VerticalAlignment="Stretch"> <TextBlock x:Name="btnDescription" Margin="5,5,5,5" Text="{TemplateBinding DescriptionText}" TextWrapping="Wrap" Foreground="{TemplateBinding ForeGroundBrush}" FontSize="9" FontWeight="Normal" FontFamily="Portable User Interface"/> </Border> <Border Margin="0,0,0,0" x:Name="Shine" Grid.ColumnSpan="2" CornerRadius="4,4,0,0"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#99FFFFFF"/> <GradientStop Color="#33FFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> <Border Margin="0,0,0,0" Background="#FF000000" x:Name="border1" Grid.RowSpan="1" Grid.ColumnSpan="2" Visibility="Collapsed"/> </Grid> </Border> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
CodeBehind:
Imports System.ComponentModel Public Class GlassButton Inherits Button Public Sub New() Me.DefaultStyleKey = GetType(GlassButton) End Sub Public Overrides Sub OnApplyTemplate() MyBase.OnApplyTemplate() End Sub #Region "Properties" Public Shared ReadOnly OuterBorderColorProperty As DependencyProperty = DependencyProperty.Register("OuterBorderColor", GetType(Brush), GetType(GlassButton), New PropertyMetadata(New PropertyChangedCallback(AddressOf OnOuterBorderColorChange))) <Category("GlassButton_Image_Description"), Description("The Outer Border brush of the Button")> _ Public Property OuterBorderColor() As Brush Get Return CType(GetValue(OuterBorderColorProperty), Windows.Media.Brush) End Get Set(ByVal value As Brush) SetValue(OuterBorderColorProperty, value) End Set End Property Public Shared ReadOnly InnerBorderColorProperty As DependencyProperty = DependencyProperty.Register("InnerBorderColor", GetType(Brush), GetType(GlassButton), New PropertyMetadata(New PropertyChangedCallback(AddressOf OnInnerBorderColorChange))) <Category("GlassButton_Image_Description"), Description("The inner bordre brush of the button.")> _ Public Property InnerBorderColor() As Brush Get Return CType(GetValue(InnerBorderColorProperty), Windows.Media.Brush) End Get Set(ByVal value As Brush) SetValue(InnerBorderColorProperty, value) End Set End Property Public Shared ReadOnly ShowDescriptionBorderProperty As DependencyProperty = DependencyProperty.Register("ShowDescriptionBorder", GetType(Boolean), GetType(GlassButton), New PropertyMetadata(AddressOf OnShowDescriptionBorderChange)) <Category("GlassButton_Image_Description"), Description("Whether or not to show the Description Border.")> _ Public Property ShowDescriptionBorder() As Boolean Get Return CBool(GetValue(ShowDescriptionBorderProperty)) End Get Set(ByVal value As Boolean) SetValue(ShowDescriptionBorderProperty, value) End Set End Property Public Shared ReadOnly DescriptionBorderProperty As DependencyProperty = DependencyProperty.Register("DescriptionBorder", GetType(Brush), GetType(GlassButton), New PropertyMetadata(AddressOf OnDescriptionBorderChange)) <Category("GlassButton_Image_Description"), Description("The Description Border Brush of the button.")> _ Public Property DescriptionBorder() As Brush Get Return CType(GetValue(DescriptionBorderProperty), Brush) End Get Set(ByVal value As Brush) SetValue(DescriptionBorderProperty, value) End Set End Property Public Shared ReadOnly ButtonTextProperty As DependencyProperty = DependencyProperty.Register("ButtonText", GetType(String), GetType(GlassButton), New PropertyMetadata(AddressOf OnButtonTextchange)) <Category("GlassButton_Image_Description"), Description("The main text of the button.")> _ Public Property ButtonText() As String Get Return CStr(GetValue(ButtonTextProperty)) End Get Set(ByVal value As String) SetValue(ButtonTextProperty, value) End Set End Property Public Shared ReadOnly ForeGroundBrushProperty As DependencyProperty = DependencyProperty.Register("ForeGroundBrush", GetType(Brush), GetType(GlassButton), New PropertyMetadata(AddressOf OnForegroundChange)) <Category("GlassButton_Image_Description"), Description("The ForeGround Brush of the button."), DefaultValue("#FFFFFFFF")> _ Public Property ForeGroundBrush() As Brush Get Return CType(GetValue(ForeGroundBrushProperty), Brush) End Get Set(ByVal value As Brush) SetValue(ForeGroundBrushProperty, value) End Set End Property Public Shared ReadOnly DescriptionTextProperty As DependencyProperty = DependencyProperty.Register("DescriptionText", GetType(String), GetType(GlassButton), New PropertyMetadata(AddressOf OnDescriptionTextchange)) <Category("GlassButton_Image_Description"), Description("The text for the description of the button.")> _ Public Property DescriptionText() As String Get Return CStr(GetValue(DescriptionTextProperty)) End Get Set(ByVal value As String) SetValue(DescriptionTextProperty, value) End Set End Property Public Shared ReadOnly ShowDescriptionProperty As DependencyProperty = DependencyProperty.Register("ShowDescription", GetType(Boolean), GetType(GlassButton), New PropertyMetadata(AddressOf OnShowDescriptionchange)) <Category("GlassButton_Image_Description"), Description("Whether or not to show description of the button.")> _ Public Property ShowDescription() As Boolean Get Return CBool(GetValue(ShowDescriptionProperty)) End Get Set(ByVal value As Boolean) SetValue(ShowDescriptionProperty, value) End Set End Property Public Shared ReadOnly ShowImageProperty As DependencyProperty = DependencyProperty.Register("ShowImage", GetType(Boolean), GetType(GlassButton), New PropertyMetadata(AddressOf OnShowImagechange)) <Category("GlassButton_Image_Description"), Description("Whether or not to show the image of the button.")> _ Public Property ShowImage() As Boolean Get Return CBool(GetValue(ShowImageProperty)) End Get Set(ByVal value As Boolean) SetValue(ShowImageProperty, value) End Set End Property Public Shared ReadOnly ImageFileProperty As DependencyProperty = DependencyProperty.Register("ImageFile", GetType(ImageSource), GetType(GlassButton), New PropertyMetadata(AddressOf OnImageFilechange)) <Category("GlassButton_Image_Description"), Description("Whether or not to show the image of the button.")> _ Public Property ImageFile() As ImageSource Get Return CType(GetValue(ImageFileProperty), ImageSource) End Get Set(ByVal value As ImageSource) SetValue(ImageFileProperty, value) End Set End Property Public Shadows ReadOnly GlowingColorProperty As DependencyProperty = DependencyProperty.Register("GlowingColor", GetType(Color), GetType(GlassButton), New PropertyMetadata(AddressOf OnGlowingColorChange)) <Category("GlassButton_Image_Description"), Description("Color value for the glowing mouse over affect.")> _ Public Property GlowingColor() As Color Get Return CType(GetValue(GlowingColorProperty), Color) End Get Set(ByVal value As Color) SetValue(GlowingColorProperty, value) End Set End Property Public Shared ReadOnly GLColorProperty As DependencyProperty = DependencyProperty.Register("GLColor", GetType(Brush), GetType(GlassButton), New PropertyMetadata(New PropertyChangedCallback(AddressOf OnGLColorChange))) <Category("GlassButton_Image_Description"), Description("The Outer Border brush of the Button")> _ Public Property GLColor() As Brush Get Return CType(GetValue(GLColorProperty), Windows.Media.Brush) End Get Set(ByVal value As Brush) SetValue(GLColorProperty, value) End Set End Property #End Region #Region "On Change Events" Public Shared Sub OnGlowingColorChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim c As SolidColorBrush = CType(e.NewValue, SolidColorBrush) Dim objBase As GlassButton = CType(obj, GlassButton) Dim x As Grid = CType(CType(objBase.GetTemplateChild("layoutRoot"), Grid).Children(5), Grid) Dim objGlow As Border = CType(objBase.GetTemplateChild("Glow"), Border) If Not IsNothing(objGlow) Then Dim xxX As RadialGradientBrush = CType(objGlow.Background, RadialGradientBrush) Dim yyY As TransformGroup = CType(xxX.RelativeTransform, TransformGroup) xxX.GradientStops(0).Color = Color.FromArgb(System.Convert.ToByte("FF", 16), c.Color.R, c.Color.G, c.Color.B) xxX.GradientStops(1).Color = Color.FromArgb(System.Convert.ToByte("00", 16), c.Color.R, c.Color.G, c.Color.B) End If End Sub Public Shared Sub OnImageFilechange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objImage As Image = CType(objBase.GetTemplateChild("btnImageFile"), Image) If Not IsNothing(objImage) Then objImage.Source = CType(e.NewValue, ImageSource) End If End Sub Public Shared Sub OnShowImagechange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objDescBorder As Border = CType(objBase.GetTemplateChild("btnDescBorder"), Border) Dim objContent As TextBlock = CType(objBase.GetTemplateChild("btnDescription"), TextBlock) Dim objLayOut As Grid = CType(objBase.GetTemplateChild("LayoutRoot"), Grid) Dim objImage As Image = CType(objBase.GetTemplateChild("btnImageFile"), Image) If Not IsNothing(objImage) Then If CBool(e.NewValue) = False Then objImage.Visibility = Windows.Visibility.Collapsed Else objImage.Visibility = Windows.Visibility.Visible End If End If End Sub Public Shared Sub OnShowDescriptionchange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objDescBorder As Border = CType(objBase.GetTemplateChild("btnDescBorder"), Border) Dim objContent As TextBlock = CType(objBase.GetTemplateChild("btnDescription"), TextBlock) Dim objBName As ContentPresenter = CType(objBase.GetTemplateChild("ButtonName"), ContentPresenter) Dim objLayOut As Grid = CType(objBase.GetTemplateChild("LayoutRoot"), Grid) If Not IsNothing(objDescBorder) Then If CBool(e.NewValue) = False Then objDescBorder.Visibility = Windows.Visibility.Collapsed Grid.SetRowSpan(objContent, 2) objBase.AdjustButtonLabel(CType(0, Double)) Else objDescBorder.Visibility = Windows.Visibility.Visible objBase.AdjustButtonLabel(CType(objBase.Height / 2, Double)) End If End If End Sub Public Shared Sub OnDescriptionTextchange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objContent As ContentPresenter = CType(objBase.GetTemplateChild("btnDescription"), ContentPresenter) If Not IsNothing(objContent) Then objContent.Content = CType(e.NewValue, String) End If End Sub Public Shared Sub OnForegroundChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objbase As GlassButton = CType(obj, GlassButton) If Not IsNothing(objbase) Then objbase.Foreground = CType(e.NewValue, Windows.Media.Brush) End If End Sub Public Shared Sub OnDescriptionBorderChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objDescBorder As Border = CType(objBase.GetTemplateChild("btnDescBorder"), Border) If Not IsNothing(objDescBorder) Then objDescBorder.BorderBrush = CType(e.NewValue, Media.Brush) End If End Sub Public Shared Sub OnButtonTextchange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objContent As ContentPresenter = CType(objBase.GetTemplateChild("ButtonName"), ContentPresenter) If Not IsNothing(objContent) Then objContent.Content = CType(e.NewValue, String) End If End Sub Public Shared Sub OnShowDescriptionBorderChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objBase As GlassButton = CType(obj, GlassButton) Dim objDescBorder As Border = CType(objBase.GetTemplateChild("btnDescBorder"), Border) If Not IsNothing(objDescBorder) Then If CType(e.NewValue, Boolean) = True Then objDescBorder.BorderBrush.Opacity = 100 Else objDescBorder.BorderBrush.Opacity = 0 End If End If End Sub Public Shared Sub OnInnerBorderColorChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Try Dim objbase As GlassButton = CType(obj, GlassButton) Dim objBorder As Border = CType(objbase.GetTemplateChild("InnerBorder"), Border) If Not IsNothing(objBorder) Then objBorder.BorderBrush = CType(e.NewValue, Windows.Media.Brush) End If Catch ex As Exception End Try End Sub Public Shared Sub OnOuterBorderColorChange(ByVal obj As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs) Dim objbase As GlassButton = CType(obj, GlassButton) Dim objBorder As Border = CType(objbase.GetTemplateChild("OuterBorder"), Border) If Not IsNothing(objBorder) Then objBorder.BorderBrush = CType(e.NewValue, Windows.Media.Brush) End If End Sub #End Region Private Sub GlassButton_SizeChanged(ByVal sender As Object, ByVal e As System.Windows.SizeChangedEventArgs) Handles Me.SizeChanged Me.Width = e.NewSize.Width Me.Height = e.NewSize.Height AdjustButtonLabel(CType(Me.Height / 2, Double)) Me.UpdateLayout() End Sub Private Sub AdjustButtonLabel(ByVal iBottomMargin As Double) Dim objBname As ContentPresenter = CType(GetTemplateChild("ButtonName"), ContentPresenter) objBname.Margin = New Thickness(0, 0, 0, iBottomMargin) UpdateLayout() End Sub End Class
Again sorry for the large post and thanks for any help provided.
Thanks,Mike Lockwood