单击任何按钮时如何更改按钮的背景颜色? [英] How to change background color of buttons on click on any of them?
问题描述
我有 3 个按钮.我创建了一个样式,用于所有三个按钮来显示 MouseOver 和 Pressed 状态.我需要有逻辑来指示选择/单击了哪个按钮.如果单击按钮,则背景颜色应保持/保持为按下状态,而其他两个按钮应重置为背景颜色以作为正常状态.下面是我的代码.我想知道是否有可能在 XAML 中实现所有功能,或者如何在后面的代码中实现?谢谢我提前.
I have 3 buttons. I created a style that I use for all of three of the buttons to show MouseOver and Pressed states. I need to have logic to indicate which button was selected / clicked. If the button is clicked then the background color should stay/be as for pressed state and other two buttons should be reset to background color to be as a normal state. Below is the code I have. I am wondering if it is possible to achieve all in XAML or how to do it in code behind? Thank you I advance.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="test3.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true" Background="#FFFFE640">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground">
<EasingColorKeyFrame KeyTime="0" Value="#FFC8B432"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground">
<EasingColorKeyFrame KeyTime="0" Value="#FFBCAA31"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Storyboard x:Key="OnMouseOneEnter">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="button_One">
<EasingColorKeyFrame KeyTime="0" Value="#FFDAC326"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseOneLeave">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="button_One">
<EasingColorKeyFrame KeyTime="0" Value="#FFFFE640"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="button_Two">
<EasingColorKeyFrame KeyTime="0" Value="#FF85781C"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMoseOneClick">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="button_One">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFDAC326"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<StackPanel x:Name="LayoutRoot">
<Button x:Name="button_One" HorizontalAlignment="Left" Width="90" Height="90" Content="One" Style="{DynamicResource ButtonStyle1}" Cursor="Hand" Margin="0,0,0,4" />
<Button x:Name="button_Two" HorizontalAlignment="Left" Width="90" Height="90" Content="Two" Style="{DynamicResource ButtonStyle1}" Cursor="Hand" Margin="0,0,0,4" />
<Button x:Name="button_Three" HorizontalAlignment="Left" Width="90" Height="90" Content="Two" Style="{DynamicResource ButtonStyle1}" Cursor="Hand" Margin="0,0,0,4" />
</StackPanel>
</Grid>
推荐答案
在我看来,您实际上是在追求单选按钮功能.
Sounds to me like you're actually after radio button functionality.
http://www.wpftutorial.net/RadioButton.html
为每个单选按钮指定相同的 GroupName,您将获得所需的功能.
Give each radio button the same GroupName and you'll get the functionality you need.
这篇关于单击任何按钮时如何更改按钮的背景颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!