C# WPF：当单选按钮显示为图像时，数据网格中的单选按钮分组不起作用

Question

我正在使用堆栈溢出问题中的代码：

单选按钮和图像

这工作正常，但由于我在单选按钮中激活了样式，因此分组无法正常工作。 它应该对每行的单选按钮进行分组，而是按整个数据网格进行分组：

按整个网格分组

Id 的绑定确保每行的组名应该是唯一的，当我删除单选按钮的样式属性时，这确实有效。

我的单选按钮代码，包含在 wpf 数据网格中：

                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <RadioButton
                                x:Name="radioPlayNext"
                                MinWidth="50"
                                Command="{Binding PlayNextClipCommand}"
                                GroupName="{Binding Id}"
                                IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_PlayNextClipInList}}"
                                Style="{StaticResource StyleRadioPlayNext}" />

                            <RadioButton
                                x:Name="radioLoopClip"
                                MinWidth="50"
                                Command="{Binding LoopClipCommand}"
                                GroupName="{Binding Id}"
                                IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_LoopClip}}"
                                Style="{StaticResource StyleRadioLoopClip}" />

                            <RadioButton
                                x:Name="radioPlayAndHold"
                                MinWidth="50"
                                Command="{Binding PlayAndHoldLastFrameCommand}"
                                GroupName="{Binding Id}"
                                IsChecked="{Binding Handling, Converter={StaticResource EnumBooleanConverter}, ConverterParameter={x:Static local:Handling_e.Handling_PlayAndHoldLastFrameOfClip}}"
                                Style="{StaticResource StyleRadioPlayHold}" />

                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

样式如下：

    <Image x:Key="imgOnNext" Source="../../Images/NEXT_on.png" />
    <Image x:Key="imgOffNext" Source="../../Images/NEXT_off.png" />
    <!--  Style for radio button play next clip in list  -->
    <Style x:Key="StyleRadioPlayNext" TargetType="RadioButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid>
                        <Image
                            Width="32"
                            Height="32"
                            Source="../../Images/NEXT_off.png" />
                        <ContentPresenter />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Content" Value="{DynamicResource imgOnNext}" />
            </Trigger>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Content" Value="{DynamicResource imgOffNext}" />
            </Trigger>
        </Style.Triggers>
    </Style>

Answer 1

您链接的示例很糟糕。

最好使用BulletDecorator而不是Content来显示检查 state 图像。 这样您仍然可以使用Content属性来显示按钮 label。

通常，如果您不知道控件的正确样式，请查找相应控件的样式和模板： Microsoft Docs: Control Styles and Templates 。

GroupName在当前 scope 中必须是唯一的，即DataTemplate 。 每个DataTemplate都是它自己的 scope。 因此，您不必将GroupName绑定到唯一 ID，这很可能会引入一些问题。 这是多余的。
只需将GroupName设置为单个名称，就像使用x:Name指令一样。

出于性能原因，您应该始终选择StaticResource而不是DynamicResource 。

<Window>
  <Window.Resources>
    <Image x:Key="imgOnNext" Source="../../Images/NEXT_on.png" />
    <Image x:Key="imgOffNext" Source="../../Images/NEXT_off.png" />

    <Style x:Key="RadioButtonStyle" TargetType="RadioButton">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="RadioButton">
            <BulletDecorator>
              <BulletDecorator.Bullet>
                <ContentPresenter x:Name="BulletContent" 
                                  Content="{StaticResource imgOffNext}" />
              </BulletDecorator.Bullet>
              <ContentPresenter />
            </BulletDecorator>
            <ControlTemplate.Triggers>
              <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="BulletContent" 
                        Property="Content" 
                        Value="{StaticResource imgOnNext}" />
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>

  <DataGrid>
    <DataGrid.Columns>
      <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <RadioButton GroupName="A"
                           Style="{StaticResource RadioButtonStyle}" 
                           Content="{Binding SomeValue}" />

              <RadioButton GroupName="A"
                           Style="{StaticResource RadioButtonStyle}"
                           Content="{Binding SomeOtherValue}" />

              <RadioButton GroupName="B"
                           Style="{StaticResource RadioButtonStyle}"
                           Content="{Binding SomeValue}" />
              <RadioButton GroupName="B"
                           Style="{StaticResource RadioButtonStyle}"
                           Content="{Binding SomeOtherValue}" />

            </StackPanel>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
    </DataGrid.Columns>
  </DataGrid> 
</Window>