如何在选择时临时突出显示按钮的背景

Question

我的页面上有几个水平放置的按钮，当用户选择一个按钮时，我希望背景变成某种颜色并保持这种颜色，直到按下另一个按钮。我创建了一个样式来突出显示按钮的背景，但我不确定如何在按下另一个按钮之前保持背景突出显示。我已将ButtonStyle2 应用于所有按钮。

MainPage.xaml

<Style x:Key="ButtonStyle2" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
        <Setter Property="Padding" Value="10,5,10,6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

          ...

<ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
                <Button x:Name="Button1" Tap="Button1_Tap" Style="{StaticResource ButtonStyle2}">
                    <Button.Content>
                        <Image Source="/Assets/Icons/appbar.settings.png"/>
                    </Button.Content>
                </Button>
            </ListBoxItem>

            ...

            <ListBoxItem toolkit:TiltEffect.IsTiltEnabled="True" Width="72">
                <Button x:Name="Button3" Tap="Button3_Tap" Style="{StaticResource ButtonStyle2}">
                    <Button.Content>
                        <Image Source="/Assets/Icons/appbar.view.png"/>
                    </Button.Content>
                </Button>
            </ListBoxItem>

Answer 1

您通过更改样式采取了正确的方法，但请考虑使用另一个控件而不是按钮。

建议的行为

您所描述的似乎是一组互斥的按钮。您有一组按钮，其中一个是活动的。当它处于活动状态时，其他按钮将被禁用。确定你在运行代码时激活了按钮，但在我看来你真的想要一种方法来创建一组互斥的按钮。

您可以尝试使按钮控件以这种方式工作，但 Windows Phone 中已经有执行此操作的控件。 RadioButton 是您应该考虑的一个。

缺点

当然，RadioButtons 看起来不像传统按钮，因此您可能没有考虑过使用它们。 .

但在 XAML 中，您可以设置 RadioButton 的样式，使其看起来像普通按钮，或者将图像放在 RadioButton 内容或任何看起来合适的 UI 上。

如果你能接受标准的外观，你就完成了。否则，将您的样式调整为 RadioButton ，而不是 Button ，手机会跟踪哪个 RadioButton 被按下。

马蒂亚斯·夏皮罗shows how to update RadioButton templates to look like Windows 8 items.

Answer 2

您可以将您的样式放在 app.xaml 资源文件中。并通过 c# 代码将其应用于按钮点击事件。

btn.Style = App.Current.Resources["StyleKey"] as Style;

这里 btn 是您在 xaml 中的按钮名称。

Answer 3

使用单一样式是不可能的，因为你不能让一个按钮根据另一个按钮的功能来管理其状态，一个按钮的视觉状态是有限的并且被原子地应用到一个按钮上（按下，禁用一个按钮不能根据周围的其他按钮来切换）。

制作具有不同背景的两种样式，并在按钮点击时相应地应用它们或

你可以在堆栈面板和文本块的帮助下制作一个假人

xaml 中的类似内容

<StackPanel Name="stkButton1" Tap="stkButton1_Tap" Height="50" Width="225" Background="Blue">
<TextBlock Text="Button 1" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Name="stkButton2" Tap="stkButton2_Tap" Height="50" Width="225" Background="Gray">
<TextBlock Text="Button 2" Margin="0,10,0,0" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>

在.cs中

private void stkButton2_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
           stkButton1.Background = new SolidColorBrush(Colors.Gray);
            stkButton2.Background = new SolidColorBrush(Colors.Blue);
        }

        private void stkButton1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {

            stkButton2.Background = new SolidColorBrush(Colors.Gray);
            stkButton1.Background = new SolidColorBrush(Colors.Blue);
        }