所选行的 WPF 数据网格行标题切换按钮

本文关键字:标题 网格 按钮 数据 WPF 数据网 | 更新日期: 2023-09-27 18:33:04

我有一个 WPF 应用程序,其中包含一个显示订单列表的数据网格。每个订单都有一个ID,但是它可能有多个ID(由于某种原因,我无法控制)。

因此,我使用行详细信息在嵌套数据网格中显示 ID 列表。

我希望实现两件事。

1)如果用户单击一行,它会自动展开并显示行详细信息,除非您单击另一行,否则无法折叠它。因此,我想要行标题中的一个按钮,该按钮可以显示行详细信息的可见性,以便如果用户单击该行,则不会显示行详细信息。我只希望行详细信息在单击行标题中的按钮时显示。

2)不是那么重要,但如果它很容易实现,只有具有1个以上ID的行在行标题中有一个按钮。

这是我的数据网格代码

<!-- The data grid to display orders-->
        <DataGrid DataContext="{Binding OrderBlock}" x:Name="dataGridOrders" 
                          ItemsSource="{Binding Orders}"
                          Style="{StaticResource DataGridTemplate}"
                          ColumnHeaderStyle="{StaticResource DG_ColumnHeader}"                      
                  RowHeaderStyle="{StaticResource DG_RowHeader}"
                  RowStyle="{StaticResource DG_Row}"
                  CellStyle="{StaticResource DG_Cell}"                      
                  RowDetailsTemplate="{StaticResource DG_RowDetail}"                      
                  AutoGenerateColumns="False"
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  Background="Silver"
                  RowHeaderWidth="30"                      
                  Margin="25,5,20,15">                                                     
            <DataGrid.RowHeaderTemplate>
                <DataTemplate>
                    <ToggleButton x:Name="RowHeaderToggleButton"
                                  Cursor="Hand"/>
                </DataTemplate>
            </DataGrid.RowHeaderTemplate>

在我的 App.xaml 中,我做了这个样式,

   <!-- Data Grid row header template -->
    <Style x:Key="DG_RowHeader" TargetType="{x:Type DataGridRowHeader}">
        <Setter Property="Width" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                    <Border x:Name="DGRH_Border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Offset="0" Color="LightGray"/>
                                <GradientStop Offset="1" Color="WhiteSmoke"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Toogle Button -->
    <Style TargetType="ToggleButton">
        <Setter Property="Padding" Value="3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <ContentPresenter x:Name="contentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Path x:Name="DefaultPath"
                          VerticalAlignment="Top"
                          Data="M0,0 14,7 0,14 Z"
                          Fill="Gray"
                          Stretch="Fill" />
                        <Path x:Name="CheckedPath"
                          VerticalAlignment="Top"
                          Data="M0,0 14,0 7,14 Z"
                          Fill="LightGray"
                          Stretch="Fill"
                          Visibility="Collapsed" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

所选行的 WPF 数据网格行标题切换按钮

创建样式,然后设置 DataGrids 行标题样式

RowHeaderStyle="{DynamicResource SelectionRowHeaderStyle}"

请参阅这篇文章,其中显示了如何添加文本切换按钮:WPF 数据网格将按钮添加到数据行头

这个展示了如何创建一个也可以在此处应用的图像切换:切换按钮根据状态更改图像