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

Question

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

RadioButton and image

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

Grouping by whole grid

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 来显示检查状态图像。这样您仍然可以使用Content 属性来显示按钮标签。

一般来说，如果您不知道如何正确设置控件的样式，请查找相应控件的样式和模板：Microsoft Docs: Control Styles and Templates。

GroupName 在当前范围内必须是唯一的，即DataTemplate。每个DataTemplate 都是它自己的作用域。因此，您不必将 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>