0

グループ ボックスに関するセクションの下の Windows 7 UX ガイドでは、(特定の条件下で) グループ ボックスから移動し、区切り線を使用することを推奨しています。このようなセパレーターのサンプルが提供されており、以下にスクリーンショットを含めました。2 つの質問があります。すべてのアプリが一貫して見えるように、この UX の推奨事項を実装する WPF ヘッダー付きコントロールはありますか? そうでない場合、「エッチングされた長方形でセパレーターを実装できます...」というテキストはどういう意味ですか? 長方形を描く方法は知っていますが、「エッチングされた」エフェクトやプロパティが表示されません。

使用する論理的なもののように見える区切りコントロールがありますが、例よりも薄いように見え、ヘッダーやエッチング効果の追加は許可されていません。独自のコントロールを作成できることはわかっていますが、これがどれほど基本的なコントロールであるかを考えると、標準的なアプローチが必要かどうかを知りたいと思っていました。

ここに画像の説明を入力

4

1 に答える 1

1

エッチングは、実際には、特定の方法で対照的な色を使用して使用される単なるグラフィック デザイン手法です。

投稿したスクリーンショットは、実際にはそれぞれ 1 ピクセルの 2 本の水平線です。上の線は下の線よりも暗いです。また、どちらも白い背景を対比させて視覚効果を提供しています。これは、2 本の水平線を使用して簡単に再現できます。

<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 に答える