locked
VSM: Set Button Style RRS feed

  • Question

  • How would I set the Style of a button with the VisualStateManager?

    I have two buttons on a form. When the User clicks button1, it should be assigned a Style (GreenButton) and the Style of button2 should be removed. The same should happen when button2 is clicked - button1 style removed, button2 be assigned GreenButton style.

    Is this really the best way or should I rather use another way to do this?

    What I basically want to achieve is to show the user that button1 is selected and the data for that button is being displayed - Tabs not really an option.

    Friday, March 11, 2011 7:16 AM

Answers

  • Hi!

    if you need to switch between these buttons, you can use RadioButtons, give them the style of a button, editing it's Template property, and setting Checked state with the style you like. Check out this xaml code, it does something similiar you need:

    <UserControl.Resources>
    	<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="RadioButton">
    					<Grid>
    						<VisualStateManager.VisualStateGroups>
    							<VisualStateGroup x:Name="CommonStates">
    								<VisualState x:Name="Normal"/>
    								<VisualState x:Name="MouseOver">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundOverlay"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Pressed">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundOverlay"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Disabled">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualElement"/>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="CheckStates">
    								<VisualState x:Name="Checked">
    									<Storyboard>
    										<ColorAnimation Duration="0" To="#D8459759" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<PointAnimation Duration="0" To="0.584,-0.148" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<PointAnimation Duration="0" To="0.582,0.864" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="#FF73E48F" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<DoubleAnimation Duration="0" To="0.612" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<DoubleAnimation Duration="0" To="0.371" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<ColorAnimation Duration="0" To="#FFD1F3CE" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    										<DoubleAnimation Duration="0" To="0.004" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="BoxMiddle" d:IsOptimized="True"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Unchecked"/>
    								<VisualState x:Name="Indeterminate"/>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="FocusStates">
    								<VisualState x:Name="Focused">
    									<Storyboard>
    										<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentFocusVisualElement"/>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="Unfocused"/>
    							</VisualStateGroup>
    							<VisualStateGroup x:Name="ValidationStates">
    								<VisualState x:Name="Valid"/>
    								<VisualState x:Name="InvalidUnfocused">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    								<VisualState x:Name="InvalidFocused">
    									<Storyboard>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<Visibility>Visible</Visibility>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    										<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
    											<DiscreteObjectKeyFrame KeyTime="0">
    												<DiscreteObjectKeyFrame.Value>
    													<System:Boolean>True</System:Boolean>
    												</DiscreteObjectKeyFrame.Value>
    											</DiscreteObjectKeyFrame>
    										</ObjectAnimationUsingKeyFrames>
    									</Storyboard>
    								</VisualState>
    							</VisualStateGroup>
    						</VisualStateManager.VisualStateGroups>
    						<Grid >
    							<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
    							<Grid Background="{TemplateBinding Background}" Margin="1">
    								<Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
    								<Rectangle x:Name="BoxMiddle">
    									<Rectangle.Fill>
    										<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
    											<GradientStop Color="#FFFFFFFF" Offset="0"/>
    											<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
    											<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
    											<GradientStop Color="#C6FFFFFF" Offset="1"/>
    										</LinearGradientBrush>
    									</Rectangle.Fill>
    								</Rectangle>
    							</Grid>
    						</Border>
    							<Rectangle x:Name="BackgroundOverlay" Fill="#FFC4DBEE" Margin="1" Opacity="0" Stroke="#00000000" StrokeThickness="1" />
    							<Rectangle x:Name="DisabledVisualElement" Fill="#00FFFFFF" Opacity="0" />
    							<Rectangle x:Name="ContentFocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#006DBDD1" StrokeThickness="1"/>
    							<Grid x:Name="ValidationErrorElement" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed">
    								<ToolTipService.ToolTip>
    									<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" >
    										<ToolTip.Triggers>
    											<EventTrigger RoutedEvent="Canvas.Loaded">
    												<BeginStoryboard>
    													<Storyboard>
    														<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
    															<DiscreteObjectKeyFrame KeyTime="0">
    																<DiscreteObjectKeyFrame.Value>
    																	<System:Boolean>true</System:Boolean>
    																</DiscreteObjectKeyFrame.Value>
    															</DiscreteObjectKeyFrame>
    														</ObjectAnimationUsingKeyFrames>
    													</Storyboard>
    												</BeginStoryboard>
    											</EventTrigger>
    										</ToolTip.Triggers>
    									</ToolTip>
    								</ToolTipService.ToolTip>
    							</Grid>
                    <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                  </Grid>
    					</Grid>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    </UserControl.Resources>
    
    <StackPanel x:Name="LayoutRoot" Background="White">
    	<RadioButton Content="Button 1" GroupName="Group" Height="40" Style="{StaticResource RadioButtonStyle}" />
    	<RadioButton Content="Button 2" GroupName="Group" Height="40" Style="{StaticResource RadioButtonStyle}" />
    </StackPanel>
    

    Hope it helps!


    Sergio Garrido. Mi Blog
    • Marked as answer by Marais van Zyl Wednesday, March 16, 2011 8:34 AM
    Saturday, March 12, 2011 3:06 PM