wpf - 当我更改 GroupBox 样式时,GroupBox 标题属性变为隐藏?
问题描述
我想更改GroupBox
样式,但是当我这样做时,我无法显示GroupBox
标题并且Groupbox
标题变得隐藏。我想要一个与下图完全一样的 GroupBox:
https://pasteboard.co/JLWHAHL.jpg
具有以下属性:
CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1" 标题位置=在 GroupBox 边框的顶部
我尝试了以下代码,但没有成功:
<GroupBox x:Name="Search_GroupBox" Header="Search" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="295,64,0,0" Width="277" Height="70">
<GroupBox.Style>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Border CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Canvas.ZIndex="2" BorderBrush="Black" BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" Width="70" Margin="-2,0,-3,-1" Height="20">
<TextBlock Text="Search" Foreground="Black" FontWeight="DemiBold" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupBox.Style>
</GroupBox>
解决方案
您需要ContentPresenter
在样式中包含元素以显示Header
内容和GroupBox
内容本身。
所以,你的风格应该更像这样:
<GroupBox x:Name="Search_GroupBox" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="295,64,0,0" Width="277" Height="70">
<GroupBox.Style>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="Header" Padding="3,1,3,0" HorizontalAlignment="Left">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<Border CornerRadius="9" BorderBrush="DarkGray" BorderThickness="1" Grid.Row="1">
<ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Canvas.ZIndex="2" BorderBrush="Black" BorderThickness="1" CornerRadius="3" HorizontalAlignment="Stretch" Width="70" Margin="-2,0,-3,-1" Height="20">
<TextBlock Text="Search" Foreground="Black" FontWeight="DemiBold" HorizontalAlignment="Center" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupBox.Style>
</GroupBox>
但是,作为一种更好的方法,建议编辑GroupBox
控件原始样式的副本,将ContentPresenter
s 保留在适当的位置。
更新
与您附加的图像中的样式相似的样式需要Template
在GroupBox
控件的默认值中进行简单的编辑。
它的棘手之处在于CornerRadius
属性,这就是我们要覆盖默认样式并对其进行编辑的原因:
<GroupBox Header="Search" Height="70">
<GroupBox.Style>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Border BorderBrush="Transparent"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.ColumnSpan="4" Grid.Column="0"
CornerRadius="11" Grid.Row="1" Grid.RowSpan="3"/>
<Border BorderBrush="White"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.ColumnSpan="4"
CornerRadius="11" Grid.Row="1" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="10">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding ElementName="Header" Path="ActualWidth"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="9"/>
</Border>
</Border>
<Border x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter ContentSource="Header"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="2"
Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupBox.Style>
<!-- Place your content here... -->
</GroupBox>
推荐阅读
- aspnetboilerplate - ASP.NET Boilerplate 支持 Nhibernate NETCore 2.0?
- php - PDO 使用 query() 或 prepare() 方法处理错误
- terraform - 我可以在 Terraform 中启用/禁用 aws_codepipeline 的某些阶段吗
- python - 为什么用 pymc.Uniform("stds",0,100) 计算的均匀分布的标准偏差每次都不同?
- javascript - getMonth() 减去一些东西会产生奇怪的结果
- bash - 使用 shell/bash 计算每对引用地图的频率
- ios - Vuforia + Unity 构建 iPhone X iOS 11.4 黑屏
- c# - 在 VB.NET 中使用 PDFsharp 或 MigraDoc 将 DOCX 文件转换为 PDF 文件
- ms-office - Office.js Word - window.external.RegisterEvent 不是函数
- javascript - 使用 Powershell 从 JSON 打印数据