在section on group boxes下的Windows 7 UX指南中,建议远离组框(在某些条件下)并使用分隔线。给出了这样一个分隔符的示例,我在下面提供了一个截图。我有两个问题。是否有WPF带领控件实现此UX建议,以便所有应用程序看起来一致?如果没有,那么文本说“你可以实现一个带有蚀刻矩形的分隔符......”它们是什么意思?我知道如何画一个矩形,但没有看到“蚀刻”效果或属性。
有一个分隔符控件似乎是合乎逻辑的东西,但它似乎比示例更薄,并且不允许标题或添加蚀刻效果。我意识到我可以创建自己的控件,但考虑到控制的基本程度,我想知道是否有规范的方法。
答案 0 :(得分:1)
蚀刻实际上只是一种图形设计技术,通过使用以某种方式对比的颜色。
您发布的屏幕截图实际上是两条水平线,每条线都有1个像素。顶部线条比底部线条更暗。它们都对比白色背景以提供视觉效果。您可以使用两条水平线轻松复制它。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="TestingWPF.TestWindow"
d:DesignWidth="477" d:DesignHeight="214">
<Window.Resources>
<Style x:Key="LineGroupBox" TargetType="{x:Type HeaderedContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type HeaderedContentControl}">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header" Margin="5 0 5 0"/>
<Canvas Name="canvas" Grid.Column="1" Height="10">
<Line X1="0" Y1="5" X2="{Binding ElementName=canvas, Path=ActualWidth}" Y2="5" Stroke="#FFACACAC" />
<Line X1="0" Y1="6" X2="{Binding ElementName=canvas, Path=ActualWidth}" Y2="6" Stroke="#FFCBCBCB" />
</Canvas>
</Grid>
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter ContentSource="Content" Margin="{TemplateBinding Property=Padding}"/>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Margin="5">
<HeaderedContentControl Style="{StaticResource LineGroupBox}" Header="Header 1" Padding="5">
<TextBlock>This is some content.</TextBlock>
</HeaderedContentControl>
<HeaderedContentControl Style="{StaticResource LineGroupBox}" Header="Header 2" Padding="5">
<TextBlock>This is some content.</TextBlock>
</HeaderedContentControl>
</StackPanel>
</Window>