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 是您应该考虑的问题。

<强>缺点

当然，RadioButton看起来不像传统按钮，所以你可能没有考虑过使用它们。 enter image description here

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

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

Matthias Shapiro shows how to update RadioButton templates to look like Windows 8 items。

Answer 2

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

btn.Style = App.Current.Resources [“StyleKey”]为Style;

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

Answer 3

无法使用单一样式执行此操作，因为您无法使用按钮来保持其状态根据另一个按钮的功能进行管理，按钮的可视状态受到限制并以原子方式应用于按钮（按下，禁用根据周围的其他按钮无法切换按钮。

制作两种不同背景的样式，并在按钮点击或

时相应地应用它们

你可以借助stackpanels和textblocks

制作一个假人

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);
        }

如何在选中时暂时突出显示按钮的背景

3 个答案: