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

Posted 2023-04-01

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

【英文标题】：C# WPF: Grouping of radio buttons in datagrid not working when radio buttons displayed as image

【发布时间】：2021-06-04 21:16:22

【问题描述】：

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

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>

【问题讨论】：

您不必将唯一值绑定到 GroupName。只需使用简单的字符串值。该名称在范围内必须是唯一的，即 DataTemplate。也不要使用 Content 属性来显示图像。这使得使用 RadioButton.Content 作为标签变得不可能。将额外的图像添加到网格中也毫无意义。

【参考方案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>