gpt4 book ai didi

wpf - 需要有关 WPF 中自定义样式的帮助

转载 作者:行者123 更新时间:2023-12-02 02:59:13 26 4
gpt4 key购买 nike

我正在尝试为 WPF Toolkit DataGrid 控件构建一些简单的自定义样式。

我有一个整体 DataGrid 的样式和 DataGridColumnHeader 的样式。我没有设置任何控件模板,仅设置基本属性。

这是应用了自定义样式后我的示例 DataGrid 的外观:

alt text http://img86.imageshack.us/img86/43/datagridcustomstyle.jpg

标题有渐变的蓝色背景、粗体文本、填充等。我想要,但有两件事消失了:列标题之间的分隔符和 ID 列的排序箭头(此列当前按降序排序)它)。

如果我没有弄乱任何控件模板,为什么分隔符和排序箭头会消失?

我什至尝试显式地将 SeparatorBrush 设置为 Black 并将 SeparatorVisibility 设置为 Visible,但这没有效果。

如果我恢复默认样式,我的示例 DataGrid 将如下所示:

alt text http://img42.imageshack.us/img42/6533/datagriddefaultstyle.jpg

分隔符和排序箭头又回来了,所以这绝对是我的风格带来的变化。

这是我的自定义 DataGridColumnHeader 样式

<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="Black" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
</Style>

这是我的自定义 DataGrid 样式

<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="White" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
</Style>

这是我的示例 DataGrid 的标记

<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=@Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@Name}"
Header="Name" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>

这是一个错误吗?

如果没有,您能否建议我如何修改样式,以免丢失分隔线和排序箭头?

编辑

我尝试按照 @Aran 的建议(如下)添加 BasedOn 属性,但这似乎没有任何效果。大家还有什么其他想法吗?

最佳答案

感谢 @Aran 的回答以及我在 Codeplex 讨论中找到的几篇帖子(请参阅 http://wpf.codeplex.com/Thread/View.aspx?ThreadId=65069 ),我设法想出了一组样式,允许在不放弃的情况下设置标题行的背景功能(排序箭头、分隔符等)。

唯一的异常(exception)是“单元格选择”功能。 DataGrid 有一个 SelectionUnit 属性,可以设置为 Cell、FullRow 或 CellOrRowHeader,但它似乎不起作用。如果我将其设置为 FullRow(无论您单击该行的何处,都应该选择整行),当您单击他们。下图显示了 DataGrid 示例(未应用样式),其中 SelectionUnit="FullRow"。正如您所看到的,看起来确实有一个单元格被选中(“名称”列的 G 行)。由于我当前不需要选择单元格,因此我设计了样式来抑制单击单元格时出现在单元格周围的深黑色边框。

alt text http://img80.imageshack.us/img80/4757/datagriddefaultcellsele.jpg

下面是按 ID 降序排序的样式化 DataGrid 示例。正如您所看到的,向下箭头出现在 ID 标签旁边,并且该列会适本地自动调整大小,以便为排序箭头腾出空间。

alt text http://img377.imageshack.us/img377/3836/datagridcustomfixed.jpg

这是样式化 DataGrid 的另一个示例。该条目按“已保存?”升序排序。请注意,标题居中,但两侧仍为排序箭头留有足够的空间。

alt text http://img203.imageshack.us/img203/5140/datagridcustomfixed2.jpg

<小时/>

以下是实现此外观所需的样式。

画笔

这些样式中有许多画笔设置,全部采用 Property="{StaticResource Media_...}" 形式。我现在将省略这些定义,因为我需要一些时间来编译它们,但如果有人有兴趣复制我使用的确切颜色,请发表评论。

排序箭头样式

(箭头本身包含在列标题样式中)

<Style
x:Key="DataGrid_ArrowStyle"
TargetType="Polygon">
<Setter
Property="Grid.Column"
Value="1" />
<Setter
Property="HorizontalAlignment"
Value="Right" />
<Setter
Property="VerticalAlignment"
Value="Bottom" />
<Setter
Property="StrokeThickness"
Value="1" />
<Setter
Property="Stroke"
Value="{StaticResource Media_BrightGraphicBorderBrush}" />
<Setter
Property="Fill"
Value="{StaticResource Media_BrightGraphicBackgroundBrush}" />
<Setter
Property="Visibility"
Value="Hidden" />
</Style>

列标题缩略图样式

(拇指本身包含在列标题样式中)

<Style
x:Key="DataGrid_ColumnHeaderThumbStyle"
TargetType="Thumb">
<Setter
Property="Width"
Value="8" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedSeparatorBackgroundBrush}" />
<Setter
Property="Cursor"
Value="SizeWE" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Thumb">
<Border
Padding="{TemplateBinding Padding}"
Background="Transparent">
<Border
Padding="0,2,0,2">
<Rectangle
HorizontalAlignment="Center"
Width="2"
Fill="{TemplateBinding Background}" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

列标题样式

(指上面定义的排序箭头样式和列标题缩略图样式)

<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,3,3" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridColumnHeader">
<Grid>
<wt:DataGridHeaderBorder
Name="HeaderBorder"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
SortDirection="{TemplateBinding SortDirection}"
IsClickable="{TemplateBinding CanUserSort}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="12" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="HeaderContent"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
<Polygon
Name="UpArrow"
Style="{StaticResource DataGrid_ArrowStyle}"
Margin="0,0,0,2"
Points="0,0 8,0 4,-6 0,0" />
<Polygon
Name="DownArrow"
Margin="0,0,0,1"
Style="{StaticResource DataGrid_ArrowStyle}"
Points="0,0 8,0 4,5 0,0" />
</Grid>
</wt:DataGridHeaderBorder>
<Thumb
x:Name="PART_LeftHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="-4,0,0,0"
HorizontalAlignment="Left" />
<Thumb
x:Name="PART_RightHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="0,0,-4,0"
HorizontalAlignment="Right"></Thumb>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_MousedOverForegroundBrush}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsPressed"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="BorderBrush"
Value="{StaticResource Media_PressedBorderBrush}" />
<Setter
TargetName="HeaderBorder"
Property="Background"
Value="{StaticResource Media_PressedBackgroundBrush}" />
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_PressedForegroundBrush}" />
</MultiTrigger>
<Trigger
Property="SortDirection"
Value="Ascending">
<Setter
TargetName="UpArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="SortDirection"
Value="Descending">
<Setter
TargetName="DownArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="CanUserSort"
Value="False">
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="HorizontalContentAlignment"
Value="Center" />
<Condition
Property="CanUserSort"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
<Setter
TargetName="HeaderContent"
Property="Margin"
Value="12,0,12,0" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

居中列标题样式

(使用它使标题居中;如果列可排序,将自动为排序箭头腾出空间)

<Style
x:Key="DataGrid_CenteredColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>

换行列标题样式

(使用此选项允许标题文本自动换行 - 仅当您手动设置宽度或用户手动缩小列时才有效)

<Style
x:Key="DataGrid_WrappingColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="VerticalContentAlignment"
Value="Top" />
<Setter
Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
TextWrapping="WrapWithOverflow"
Text="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

单元格样式

<Style
x:Key="DataGrid_CellStyle"
TargetType="wt:DataGridCell">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="BorderThickness"
Value="1" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridCell">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
</Trigger>
<Trigger
Property="IsKeyboardFocusWithin"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
<!--<Setter
Property="BorderBrush"
Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly=wt:DataGrid}}" />-->
</Trigger>
</Style.Triggers>
</Style>

居中单元格样式

(使用它使单元格的内容居中)

<Style
x:Key="DataGrid_CenteredCellStyle"
TargetType="wt:DataGridCell"
BasedOn="{StaticResource DataGrid_CellStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>

数据网格样式

(为许多属性建立一组默认值,包括上面定义的列标题样式和单元格样式)

<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="CellStyle"
Value="{StaticResource DataGrid_CellStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="LightGray" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="SelectionMode"
Value="Single" />
<Setter
Property="SelectionUnit"
Value="FullRow" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
<Setter
Property="HeadersVisibility"
Value="Column" />
</Style>

使用这些样式的示例 DataGrid

(注意:需要支持数据(XML 文件)才能工作)

<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=@Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=@Name}"
Header="Name" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=@IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=@IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>

关于wpf - 需要有关 WPF 中自定义样式的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1568589/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com