ToggleButton样式仅适用于最后一个ToggleButton [英] ToggleButton Style only works on last ToggleButton

问题描述

我正在尝试自定义我的ToggleButton，以便在选中时以绿色表示是"，而在未选中时以红色表示否".

I'm trying to customize my ToggleButtons so that when checked they say 'Yes' in green and when not checked, say 'No' in red.

我创建了以下样式，这些样式位于我的样式资源字典中.

I've created the following style which is sitting in my Styles resource dictionary.

<!--  ToggleButtons   -->
<Style x:Key="YesNoToggleStyle" TargetType="ToggleButton">
  <Style.Triggers>
    <Trigger Property="IsChecked" Value="True">
      <Setter Property="Background" Value="SpringGreen" />
      <Setter Property="Content">
        <Setter.Value>
          <TextBlock Text="Yes"/>
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="IsChecked" Value="False">
      <Setter Property="Background" Value="Crimson" />
      <Setter Property="Content">
        <Setter.Value>
          <TextBlock Text="No"/>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

这行得通...有点.如果ToggleButton是任意一个值的最后一个，则显示正确.先前所有具有相同值的按钮均为空白.高度也在缩小，但我使用触发器上方的高度"设置器来解决了这一问题.为了说明，在创建新记录时，它看起来像:

This works ... sort of. If the ToggleButton is the last one of either value, then it displays correctly. All previous buttons with the same value are blank. The height was also shrinking, but I fixed that with the 'Height' Setter above the triggers. To illustrate, when a new record is being created it looks like:

，然后再次单击按钮1、2、3和1:

and after I've clicked buttons 1, 2, and 3 and 1 again:

我最初具有从周围的网格引用的样式:

I originally had the style referenced from the surrounding grid:

<Grid>
  ...
    <Grid.Resources>
      <Style BasedOn="{StaticResource YesNoToggleStyle}" TargetType="{x:Type ToggleButton}" />
    </Grid.Resources>

但是进行更改，以便每个ToggleButton分别引用样式(<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />)并没有什么不同.

But changing that so each ToggleButton references the style individually (<ToggleButton Style="{StaticResource YesNoToggleStyle}" ... />) hasn't made a difference.

我查看了自定义广告的切换状态wpf 中的切换"按钮和覆盖ToggleButton样式，效果相同，但它们谈论外部图像，我的问题全在wpf之内.

I looked at Customizing the toggle state of a toggle button in wpf, and Override ToggleButton Style where the effect is the same, but they talk about external images, and my issues is all within wpf.

我还查看了以下第二个答案:到Reset the Background Color指令(另外，如果此任务需要混合工具，我会感到惊讶).

I also looked at the second answer to: i want to change backcolor of toggle button when toggle button ischecked and viceversa in WPF but a) I only have the blend + sketchflow preview that comes with VS2012, and b) i'm a total noob with blend and can't get from Select the "Checked State" to Reset the Background Color instruction in the answer (plus i'd be surprised if this task requires the blend tool).

有人可以告诉我如何使多个ToggleButtons正确使用同一样式吗?

Can anyone show me what to do to get multiple ToggleButtons to use the same style properly?

推荐答案

这对我有用. Dictionary1.xaml中的某个地方:

This works for me. Somewhere in Dictionary1.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="YesNoToggleStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Background" Value="Crimson" />
                <Setter Property="Content" Value="No"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="SpringGreen" />
                <Setter Property="Content" Value="Yes"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

请注意，该样式基于ToolBar.ToggleButtonStyle.

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="pack://application:,,,/Dictionary1.xaml"/>
    </Grid.Resources>

    <ItemsControl ItemContainerStyle="{StaticResource YesNoToggleStyle}">
        <ToggleButton />
        <ToggleButton />
        <ToggleButton />
    </ItemsControl>
</Grid>

这篇关于ToggleButton样式仅适用于最后一个ToggleButton的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！