0

在 Windows 7 UX 指南中关于分组框的部分下，有建议远离分组框（在某些情况下）并使用分隔线。为这种分隔符提供了一个示例，我在下面提供了一个屏幕截图。我有两个问题。是否有实现此 UX 建议的 WPF 标头控件，以便所有应用程序看起来一致？如果不是，那么文本中说“您可以使用蚀刻矩形实现分隔符......”它们是什么意思？我知道如何绘制一个矩形，但没有看到它的“蚀刻”效果或属性。

有一个分隔符 控件，使用起来似乎是合乎逻辑的，但它似乎比示例更薄，并且不允许标题或添加蚀刻效果。我意识到我可以创建自己的控件，但考虑到这是一个多么基本的控件，我想知道是否有一个规范的方法可以采用。

在此处输入图像描述

4

1 回答 1

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>
于 2012-05-31T20:24:48.820 回答