如何编辑 DataGrid 中的 RowHeader?
How can I edit the RowHeader in the DataGrid?
id 下的文本框仍然属于 header,我想更改此 DataGrid header 旁边的黄色标记字段,使其看起来像图2.
图片1:
图片2:
我的Datagrid Xaml代码是这样的:
<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False" Height="345" Margin="52,76,5,0" x:Name="gridd" Width="619" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,1,0" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="0,0,1,0" />
</Style>
<Style TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Id}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Id" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="IDSearcBox" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforID, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Name}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Name" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="Name" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding Queryforname, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Country}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Land" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125"/>
<TextBox x:Name="Birthday" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforCountry, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Location}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Ort" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="Ort" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforLocation, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn SortMemberPath="Id" Binding="{Binding Age}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Alter" Margin="0 0 0 0" Width="115" Height="17"/>
<Separator Background="White" Width="125"/>
<TextBox x:Name="alter" Width="119" Height="19" Margin="0 0 0 2" Text="{Binding QueryforAge, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
我需要如何更改 DataGrid 才能获得这种外观?我想我需要更改 DataGrid.Resources 部分中的某些内容,但我不知道如何将图片 1 更改为图片 2
编辑:
现在看起来像这样,但是我创建的 Stack Panel 没有填满整个 Fild
一个演示的最小示例:
<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>
不要使用椭圆,而是使用您需要的带几何图形的图像或形状。
在左上角(列 Header 的左侧和行 Header 的上方)有一个带有 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>
如果您需要另一个元素而不是 Button,那么您必须为此创建自己的 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>
您可以通过定义向 添加具有特定 ComponentResourceKey
键的 Style
来重新设置 header 中的 Button
样式,例如:
<Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}"
TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<TextBlock FontFamily="Segoe MDL2 Assets" Text="" />
</Setter.Value>
</Setter>
</Style>
您可以将 Content
属性 设置为您想要的任何值。以上TextBlock
只是一个例子
id 下的文本框仍然属于 header,我想更改此 DataGrid header 旁边的黄色标记字段,使其看起来像图2.
图片1:
图片2:
我的Datagrid Xaml代码是这样的:
<DataGrid ItemsSource="{Binding Persons}" AutoGenerateColumns="False" Height="345" Margin="52,76,5,0" x:Name="gridd" Width="619" >
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="0,0,1,0" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="0,0,1,0" />
</Style>
<Style TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Id}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Id" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="IDSearcBox" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforID, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Name}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Name" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="Name" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding Queryforname, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Country}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Land" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125"/>
<TextBox x:Name="Birthday" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforCountry, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Width="*" SortMemberPath="Id" Binding="{Binding Location}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Ort" Margin="3 0 0 0" Width="148" Height="17"/>
<Separator Background="White" Width="125" />
<TextBox x:Name="Ort" Width="113" Height="19" Margin="0 0 0 2" Text="{Binding QueryforLocation, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn SortMemberPath="Id" Binding="{Binding Age}" CanUserResize="False" IsReadOnly="True">
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Alter" Margin="0 0 0 0" Width="115" Height="17"/>
<Separator Background="White" Width="125"/>
<TextBox x:Name="alter" Width="119" Height="19" Margin="0 0 0 2" Text="{Binding QueryforAge, UpdateSourceTrigger=PropertyChanged}"/>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
我需要如何更改 DataGrid 才能获得这种外观?我想我需要更改 DataGrid.Resources 部分中的某些内容,但我不知道如何将图片 1 更改为图片 2
编辑: 现在看起来像这样,但是我创建的 Stack Panel 没有填满整个 Fild
一个演示的最小示例:
<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>
不要使用椭圆,而是使用您需要的带几何图形的图像或形状。
在左上角(列 Header 的左侧和行 Header 的上方)有一个带有 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>
如果您需要另一个元素而不是 Button,那么您必须为此创建自己的 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>
您可以通过定义向 ComponentResourceKey
键的 Style
来重新设置 header 中的 Button
样式,例如:
<Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}"
TargetType="Button">
<Setter Property="Content">
<Setter.Value>
<TextBlock FontFamily="Segoe MDL2 Assets" Text="" />
</Setter.Value>
</Setter>
</Style>
您可以将 Content
属性 设置为您想要的任何值。以上TextBlock
只是一个例子