Question

id 下的文本框仍然属于标题，我想更改此 DataGrid 标题旁边的黄色标记字段，使其看起来像图 2 中的绿色标记字段。

图 1：

图片 2：

我的 Datagrid Xaml 代码是这样的：

我需要如何更改 DataGrid 才能获得这种外观？我想我需要更改 DataGrid.Resources 部分中的某些内容，但我不知道如何将图片 1 更改为图片 2

编辑： 现在看起来像这样，但我创建的堆栈面板没有填满整个字段

Answer 1

您可以通过将带有特定 Button 键的 Style 添加到来重新定义标题中的 ComponentResourceKey，例如：

<Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}"
       TargetType="Button">
    <Setter Property="Content">
        <Setter.Value>
            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE71C;" />
        </Setter.Value>
    </Setter>
</Style>

您可以将 Content 属性设置为您想要的任何值。上面的 TextBlock 只是一个例子。

Answer 2

演示的最小示例：

<DataGrid>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Mode=OneWay}"/>
    </DataGrid.Columns>
    <DataGrid.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>One</sys:String>
            <sys:String>Two</sys:String>
            <sys:String>Three</sys:String>
        </x:Array>
    </DataGrid.ItemsSource>
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <Ellipse Width="10" Height="10" Fill="Red"/>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

使用您需要的带有几何图形的图像或形状代替椭圆。

在左上角（列标题左侧和行标题上方）有一个带有 RoutedCommand Command =" {x: Static DataGrid.SelectAllCommand} " 的按钮。按钮从动态键 Style ="{DynamicResource {ComponentResourceKey ResourceId = DataGridSelectAllButtonStyle, TypeInTargetAssembly = {x: Type DataGrid}}}" 获取样式。

以下是 DataGrid 默认模板中按钮的完整定义：

<Button Command = "{x: Static DataGrid.SelectAllCommand}"
        Focusable = "false"
        Style = "{DynamicResource {ComponentResourceKey ResourceId = DataGridSelectAllButtonStyle, TypeInTargetAssembly = {x: Type DataGrid}}}"
        Visibility = "{Binding HeadersVisibility, ConverterParameter = {x: Static DataGridHeadersVisibility.All}, Converter = {x: Static DataGrid.HeadersVisibilityConverter}, RelativeSource = {RelativeSource AncestorType = {x: Type DataGrid}}}"
        Width = "{Binding CellsPanelHorizontalOffset, RelativeSource = {RelativeSource AncestorType = {x: Type DataGrid}}}" />

您可以使用此键覆盖 DataGrid 资源中的按钮样式：

<DataGrid>
    <DataGrid.Resources>
        <Style TargetType="Button" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Ellipse Width="10" Height="10" Fill="Green"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Mode=OneWay}" ClipboardContentBinding="{x:Null}"/>
    </DataGrid.Columns>
    <DataGrid.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>One</sys:String>
            <sys:String>Two</sys:String>
            <sys:String>Three</sys:String>
        </x:Array>
    </DataGrid.ItemsSource>
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <Ellipse Width="10" Height="10" Fill="Red"/>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

如果您需要另一个元素而不是按钮，那么您必须为此创建自己的 DataGrid 模板。

使用分隔线垂直放置两个元素的选项：

<DataGrid>
    <DataGrid.Resources>
        <Style TargetType="Button" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Ellipse Width="10" Height="10" Fill="Aqua"/>
                            <Rectangle Grid.Row="1" Fill="Yellow" Height="2" Margin="0 2"/>
                            <Ellipse Grid.Row="2" Width="10" Height="10" Fill="Green"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.Resources>

如何在 DataGrid 中编辑 RowHeader？

2 个答案: