Skip to main content
Home Forums Silverlight Design Designing with Silverlight Button border
12 replies. Latest Post by developper2009 on April 6, 2009.
(0)
developp...
Member
23 points
67 Posts
04-01-2009 7:19 AM |
I would like when there is mouse over on the button a border appear with a color.
Could you help me for that?
Elango.ka
Participant
816 points
146 Posts
04-01-2009 9:05 AM |
Hi,
You can use MouseEnter and MouseLeave events in button.
Private Sub myButton_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles myButton.MouseEnter myButton.BorderThickness = New Thickness(1) myButton.BorderBrush = New System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black) End Sub Private Sub myButton_MouseLeave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles myButton.MouseLeave myButton.BorderThickness = Nothing myButton.BorderBrush = Nothing End Sub
Thanks
(If this is answer fo your post, please mark as answer)
04-02-2009 4:20 AM |
hi. I was trying this. It's working when it's a normal button but the button that I'm making has a special form and it's not working with that.
This is my code xaml, please take a look and tell me if it will be possible with that:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication12.Page" Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> <UserControl.Resources> <Style x:Key="ButtonStyle1" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <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"/> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="Pressed"/> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M152,165 C396,220 524,129 397,221 C270,313 389.37,462.5 269.43567,312.5 C149.50136,162.5 152,165 152,165 z"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Button Margin="151.498,164.796,192.502,103.204" Style="{StaticResource ButtonStyle1}" Content="Button" x:Name="third" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"/> </Grid></UserControl>
karthu
200 points
36 Posts
04-02-2009 5:39 AM |
It is possible and here's the code . The border turns red on mouse over and blue when clicked
---------------------- xaml
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication12.Pagel" Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> <UserControl.Resources> <Style x:Key="ButtonStyle1" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <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:VisualStateGroup.Transitions> <vsm:VisualTransition GeneratedDuration="00:00:00.1000000"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.StrokeThickness)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="3"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF40000"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.StrokeThickness)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="3"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> <EasingColorKeyFrame KeyTime="00:00:00" Value="#FF1D67B1"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Path x:Name="path" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M152,165 C396,220 524,129 397,221 C270,313 389.37,462.5 269.43567,312.5 C149.50136,162.5 152,165 152,165 z"/> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Button Margin="151.498,164.796,192.502,103.204" Style="{StaticResource ButtonStyle1}" Content="Button" x:Name="third" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave"/> </Grid></UserControl>
---------------------------
If at all u dont want ny border in normal state then be sure to turn off stroke color in vsm.You dont need any event handlers like mouseenter and mouseleave . Just use vsm
04-02-2009 5:59 AM |
hey.
I've got an exception about EasingDoubleKeyFrame.
Maybe I need to add a reference to some assemblies?
04-02-2009 9:31 AM |
I've done it on Sl3 . It worked . I ll give the code for sl2
04-02-2009 9:36 AM |
I'm working with SL2.
Actually I have a problem while installing SL3.
Jeff Paries
606 points
106 Posts
04-02-2009 10:31 AM |
The easing splines are new to Silverlight 3 and not supported in Silverlight 2, so they need to be removed from the Visual States in order to get the code snippet above working. Here's an updated version that should get you going (keep in mind you'll probably need to change the x:Class for your app):
<UserControl x:Class="ButtonBorderTest.myButton"
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" Width="640" Height="480"> <UserControl.Resources> <Style x:Key="ButtonStyle1" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <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:VisualStateGroup.Transitions> <vsm:VisualTransitionGeneratedDuration="00:00:00.1000000"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Duration="00:00:00.0010000" Storyboard.TargetName="path"Storyboard.TargetProperty="(Shape.StrokeThickness)"> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path"Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="00:00:00.5000000" Value="#FF0000FF"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Duration="00:00:00.0010000" Storyboard.TargetName="path"Storyboard.TargetProperty="(Shape.StrokeThickness)"> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames BeginTime="00:00:00"Duration="00:00:00.0010000" Storyboard.TargetName="path"Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFF0000"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Path x:Name="path" Fill="#FFFFFFFF"Stretch="Fill" Stroke="#FF000000" Data="M152,165 C396,220 524,129397,221 C270,313 389.37,462.5 269.43567,312.5 C149.50136,162.5 152,165152,165 z"/> <ContentPresenterHorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Button Margin="151.498,164.796,192.502,103.204" Style="{StaticResource ButtonStyle1}" Content="Button" x:Name="third"/> </Grid></UserControl>
04-03-2009 2:23 AM |
Hre's the code in SL2 .. easing splines are not supported so bear with this till official release of sl3 . May i know more about the error u got wile sl3 installation . Please mark this as answer if it has solved ur problem . ---------------------------------------------------
04-03-2009 2:30 AM |
The code is :
04-03-2009 3:24 AM |
I tried this code but I hadn't any preview while running.
04-03-2009 6:33 AM |
YES.. YES.. That works.
04-06-2009 5:19 AM |
My button has this kind of data:
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M74,144 C445,142 445,141 445,141 C264.5,388.5 264.5,388.5 264.5,388.5 C73.5,144.49294 74,144 74,144 z"/>
and unfortunately I couldn't make animation with it. I mean when I apply the style nothing works.
I'm making that by using the plume tool of blend and converting it into button after that.
Do you have an idea about that?
Button border