1

これをやってのけるには、私はデザインについてほとんど知りません。

特別な境界線を持つ UserControl を作成しようとしています。境界線は次のようになります。 コンテナの境界

ヘッダーは、初期化時にコンテンツが設定されたラベル (必須の場合はテキストブロック) です。

境界線は、ヘッダーの前で停止し、ヘッダーの後に、説明されているような余白を付けて再開する必要があります。境界線には、境界線の形状に適合する必要があるフレームまたはグリッドが含まれます (おそらくマスクを使用)。背景全体を透明にするか、アルファ化 (カラー #000000XX) する必要があります。トップであること。

これを達成するための指示をいただければ幸いです。Visual Studio 2012 の Blend が利用可能です。

ありがとうございました

4

1 に答える 1

3

どうぞ

これをHeaderedContentControl利用して、好みのテンプレートでさらに使用できるヘッダーとコンテンツを作成できます

<HeaderedContentControl x:Class="CSharpWPF.MyUserControl"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        mc:Ignorable="d"
                        d:DesignHeight="300"
                        d:DesignWidth="300"
                        Header="Header">
    <HeaderedContentControl.Template>
        <ControlTemplate TargetType="HeaderedContentControl">
            <Grid>
                <Border BorderBrush="Black"
                        BorderThickness="4"
                        CornerRadius="10"
                        Padding="4"
                        Margin="10">
                    <ContentPresenter />
                </Border>
                <TextBlock Text="{TemplateBinding Header}"
                           Background="White"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           FontSize="13"
                           Margin="25,0,0,0"
                           Padding="10,0"/>
            </Grid>
        </ControlTemplate>
    </HeaderedContentControl.Template>
    <Grid>
        <TextBlock Text="content" />
    </Grid>
</HeaderedContentControl>

結果

結果

アップデート

このテンプレートを試してみてください。純粋な xaml で達成しようとしました

    <HeaderedContentControl.Template>
        <ControlTemplate TargetType="HeaderedContentControl">
            <DockPanel x:Name="root"
                       LastChildFill="True"
                       Margin="10">
                <DockPanel.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush"
                                Value="Black" />
                        <Setter Property="Width"
                                Value="30" />
                        <Setter Property="Height"
                                Value="30" />
                        <Setter Property="CornerRadius"
                                Value="10" />
                    </Style>
                </DockPanel.Resources>
                <Grid DockPanel.Dock="Top"
                      Height="20">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="20" />
                    </Grid.ColumnDefinitions>
                    <Border BorderThickness="4,4,0,0" />
                    <Border BorderThickness="0,4,0,0"
                            Grid.Column="2"
                            Width="auto"
                            CornerRadius="0" />
                    <Border BorderThickness="0,4,4,0"
                            Grid.Column="3"
                            HorizontalAlignment="Right" />
                    <TextBlock Text="{TemplateBinding Header}"
                               FontSize="13"
                               Grid.Column="1"
                               Margin="10,-10"
                               VerticalAlignment="Top" />
                </Grid>
                <Grid Height="20"
                      DockPanel.Dock="Bottom">
                    <Border BorderThickness="4,0,4,4"
                            Width="auto"
                            VerticalAlignment="Bottom" />
                </Grid>
                <Border BorderThickness="4,0,0,0"
                        DockPanel.Dock="Left"
                        Height="auto"
                        Width="20"
                        CornerRadius="0" />
                <Border BorderThickness="0,0,4,0"
                        DockPanel.Dock="Right"
                        Width="20"
                        Height="auto"
                        CornerRadius="0" />
                <ContentPresenter Margin="-10" />
            </DockPanel>
        </ControlTemplate>
    </HeaderedContentControl.Template>

これが適切でない場合、他のアプローチにはコードビハインドが含まれる可能性があります

結果

結果

于 2014-07-18T02:03:07.103 に答える