Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit Problem using Button
4 replies. Latest Post by simbuaarumugam on September 8, 2008.
(0)
syedadnan
Member
14 points
56 Posts
09-06-2008 4:16 AM |
I have a created a style for a button. I has three different color scehems for 'normal', 'mouse over', and 'mouse pressed state'. I want that whenever the button is pressed it should retain its 'pressed' color scheme after the release of the mouse. How can i acheieve that? I am using blend for craeting styles for the button.
Skyrunner
Contributor
2489 points
485 Posts
09-06-2008 4:37 AM |
Maybe using a ToggleButton and set the Checked state on the same color as pressed.
09-06-2008 4:54 AM |
They are way too many buttons in my application and code behind their events therefore i'll have to change all the code for using togglebutton. Isn't it possible by using simple buttons?
Allen Ch...
Star
13860 points
1,802 Posts
09-08-2008 2:44 AM |
Hi
ToggleButton is a better choice. If you have to use Button maybe you can prepare two templates. On the first button click change the template. On the next click restore the original template. Something like this:
bool flag = true; private void Button_Click(object sender, RoutedEventArgs e) { Button b =(Button)sender; if (!flag) { b.Template = this.Resources["ButtonTemplate1"] as ControlTemplate; } else { b.Template = this.Resources["ButtonTemplate2"] as ControlTemplate; } flag = !flag; }
<UserControl x:Class="SilverlightApplication44.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> <UserControl.Resources>
<ControlTemplate x:Key="ButtonTemplate1" TargetType="Button"> <Grid> <Grid.Resources> <Color x:Key="LinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="LinearBevelLightEndColor">#F4FFFFFF</Color> <Color x:Key="LinearBevelDarkStartColor">#E0FFFFFF</Color> <Color x:Key="LinearBevelDarkEndColor">#B2FFFFFF</Color> <Color x:Key="MouseOverLinearBevelDarkEndColor">#7FFFFFFF</Color> <Color x:Key="HoverLinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="HoverLinearBevelLightEndColor">#EAFFFFFF</Color> <Color x:Key="HoverLinearBevelDarkStartColor">#D8FFFFFF</Color> <Color x:Key="HoverLinearBevelDarkEndColor">#4CFFFFFF</Color> <Color x:Key="CurvedBevelFillStartColor">#B3FFFFFF</Color> <Color x:Key="CurvedBevelFillEndColor">#3CFFFFFF</Color> <SolidColorBrush x:Key="BorderBrush" Color="#FF000000"/> <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/> <LinearGradientBrush x:Key="FocusedStrokeBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#B2FFFFFF" Offset="0"/> <GradientStop Color="#51FFFFFF" Offset="1"/> <GradientStop Color="#66FFFFFF" Offset="0.325"/> <GradientStop Color="#1EFFFFFF" Offset="0.325"/> </LinearGradientBrush> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0:0:0.2" To="MouseOver"/> <vsm:VisualTransition Duration="0:0:0.1" To="Pressed"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverLinearBevelDarkEndColor}"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <SplineDoubleKeyFrame KeyTime="0" Value=".2"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelLightEndColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelLightEndColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelDarkStartColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelDarkEndColor}"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DownStroke" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="Background" RadiusX="4" RadiusY="4" Fill="Green"/> <Rectangle x:Name="BackgroundGradient" Stroke="{StaticResource BorderBrush}" StrokeThickness="1" RadiusX="4" RadiusY="4"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.7,1" StartPoint="0.7,0"> <GradientStop Color="{StaticResource LinearBevelLightStartColor}" Offset="0"/> <GradientStop Color="{StaticResource LinearBevelLightEndColor}" Offset="0.35"/> <GradientStop Color="{StaticResource LinearBevelDarkStartColor}" Offset="0.35"/> <GradientStop Color="{StaticResource LinearBevelDarkEndColor}" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Grid Margin="2" x:Name="CurvedBevelScale"> <Grid.RowDefinitions> <RowDefinition Height="7*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Path Margin="3,0,3,0" x:Name="CurvedBevel" Stretch="Fill" Data="F1 M 0,0.02 V 0.15 C 0.15,0.22 0.30,0.25 0.50,0.26 C 0.70,0.26 0.85,0.22 1,0.15 V 0.02 L 0.97,0 H 0.02 L 0,0.02 Z"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="{StaticResource CurvedBevelFillStartColor}" Offset="0"/> <GradientStop Color="{StaticResource CurvedBevelFillEndColor}" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> <Rectangle Margin="1" x:Name="Accent" Stroke="{StaticResource AccentBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Grid x:Name="FocusVisual" Visibility="Collapsed"> <Rectangle Margin="2" Stroke="{StaticResource AccentBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Stroke="{TemplateBinding Background}" StrokeThickness="2" RadiusX="3" RadiusY="3"/> <Rectangle Stroke="{StaticResource FocusedStrokeBrush}" StrokeThickness="2" RadiusX="3" RadiusY="3"/> </Grid> <Grid x:Name="DownStroke" Opacity="0"> <Rectangle Margin="1,2,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.75,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.5,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.25,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1" Opacity="1" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1" StrokeThickness="1" RadiusX="4" RadiusY="4"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#A5FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> </Grid> <ContentPresenter Margin="4,5,4,4" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}"/> <Rectangle x:Name="DisabledVisual" IsHitTestVisible="false" Opacity="0" Fill="{StaticResource DisabledBrush}" RadiusX="4" RadiusY="4"/> </Grid> </ControlTemplate> <ControlTemplate x:Key="ButtonTemplate2" TargetType="Button"> <Grid> <Grid.Resources> <Color x:Key="LinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="LinearBevelLightEndColor">#F4FFFFFF</Color> <Color x:Key="LinearBevelDarkStartColor">#E0FFFFFF</Color> <Color x:Key="LinearBevelDarkEndColor">#B2FFFFFF</Color> <Color x:Key="MouseOverLinearBevelDarkEndColor">#7FFFFFFF</Color> <Color x:Key="HoverLinearBevelLightStartColor">#FCFFFFFF</Color> <Color x:Key="HoverLinearBevelLightEndColor">#EAFFFFFF</Color> <Color x:Key="HoverLinearBevelDarkStartColor">#D8FFFFFF</Color> <Color x:Key="HoverLinearBevelDarkEndColor">#4CFFFFFF</Color> <Color x:Key="CurvedBevelFillStartColor">#B3FFFFFF</Color> <Color x:Key="CurvedBevelFillEndColor">#3CFFFFFF</Color> <SolidColorBrush x:Key="BorderBrush" Color="#FF000000"/> <SolidColorBrush x:Key="AccentBrush" Color="#FFFFFFFF"/> <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/> <LinearGradientBrush x:Key="FocusedStrokeBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#B2FFFFFF" Offset="0"/> <GradientStop Color="#51FFFFFF" Offset="1"/> <GradientStop Color="#66FFFFFF" Offset="0.325"/> <GradientStop Color="#1EFFFFFF" Offset="0.325"/> </LinearGradientBrush> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0:0:0.2" To="MouseOver"/> <vsm:VisualTransition Duration="0:0:0.1" To="Pressed"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverLinearBevelDarkEndColor}"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <SplineDoubleKeyFrame KeyTime="0" Value=".2"/> </DoubleAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelLightEndColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelLightEndColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelDarkStartColor}"/> </ColorAnimationUsingKeyFrames> <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> <SplineColorKeyFrame KeyTime="0" Value="{StaticResource HoverLinearBevelDarkEndColor}"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DownStroke" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"> <Storyboard> <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="Background" RadiusX="4" RadiusY="4" Fill="Red"/> <Rectangle x:Name="BackgroundGradient" Stroke="{StaticResource BorderBrush}" StrokeThickness="1" RadiusX="4" RadiusY="4"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.7,1" StartPoint="0.7,0"> <GradientStop Color="{StaticResource LinearBevelLightStartColor}" Offset="0"/> <GradientStop Color="{StaticResource LinearBevelLightEndColor}" Offset="0.35"/> <GradientStop Color="{StaticResource LinearBevelDarkStartColor}" Offset="0.35"/> <GradientStop Color="{StaticResource LinearBevelDarkEndColor}" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Grid Margin="2" x:Name="CurvedBevelScale"> <Grid.RowDefinitions> <RowDefinition Height="7*"/> <RowDefinition Height="3*"/> </Grid.RowDefinitions> <Path Margin="3,0,3,0" x:Name="CurvedBevel" Stretch="Fill" Data="F1 M 0,0.02 V 0.15 C 0.15,0.22 0.30,0.25 0.50,0.26 C 0.70,0.26 0.85,0.22 1,0.15 V 0.02 L 0.97,0 H 0.02 L 0,0.02 Z"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="{StaticResource CurvedBevelFillStartColor}" Offset="0"/> <GradientStop Color="{StaticResource CurvedBevelFillEndColor}" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> <Rectangle Margin="1" x:Name="Accent" Stroke="{StaticResource AccentBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Grid x:Name="FocusVisual" Visibility="Collapsed"> <Rectangle Margin="2" Stroke="{StaticResource AccentBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Stroke="{TemplateBinding Background}" StrokeThickness="2" RadiusX="3" RadiusY="3"/> <Rectangle Stroke="{StaticResource FocusedStrokeBrush}" StrokeThickness="2" RadiusX="3" RadiusY="3"/> </Grid> <Grid x:Name="DownStroke" Opacity="0"> <Rectangle Margin="1,2,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.75,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.5,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1,1.25,1,1" Opacity="0.05" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1" Opacity="1" Stroke="{TemplateBinding Background}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle Margin="1" StrokeThickness="1" RadiusX="4" RadiusY="4"> <Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#A5FFFFFF" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Stroke> </Rectangle> </Grid> <ContentPresenter Margin="4,5,4,4" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" TextAlignment="{TemplateBinding TextAlignment}" TextDecorations="{TemplateBinding TextDecorations}" TextWrapping="{TemplateBinding TextWrapping}"/> <Rectangle x:Name="DisabledVisual" IsHitTestVisible="false" Opacity="0" Fill="{StaticResource DisabledBrush}" RadiusX="4" RadiusY="4"/> </Grid> </ControlTemplate>
</UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"><Button x:Name="Button1" Width="50" Height="50" Template="{StaticResource ButtonTemplate1}" Click="Button_Click"/> </Grid></UserControl>
simbuaar...
Participant
1172 points
405 Posts
09-08-2008 9:36 AM |
you can achieved by event and use Blend also ..