2012-05-31 27 views
0

在Windows 7 UX指南section on group boxes下,有建议远离组合框(在特定条件下)并使用分隔线。一个样本给出了这样一个分隔符,我在下面包含了一个截图。我有两个问题。是否有WPF headered控件实现这个用户体验建议,以便所有应用程序看起来一致?如果不是的话,那么文字说“你可以用一个蚀刻过的矩形来实现一个分隔符......”它们是什么意思?我知道如何绘制矩形,但没有看到“蚀刻”效果或属性。什么是WPF控件实现Win 7 UX指南推荐的分隔符?

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

enter image description here

回答

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>