UserControl의 사용자 지정 테두리

Question

나는이 문제를 해결하기위한 디자인에 대해 거의 알지 못합니다.

특수 테두리가있는 UserControl을 만들려고합니다. 테두리는 다음과 같이 표시되어야합니다.

헤더는 초기화시 설정된 내용의 레이블 (또는 필요한 경우 텍스트 블록)입니다.

테두리는 머리글 앞에 멈추고 머리글 뒤에 설명 된 것과 같은 여백을두고 시작해야합니다. 테두리에는 테두리 모양에 맞아야하는 프레임이나 격자가 있습니다 (마스크가있는 경우). 전체 배경은 투명하거나 알파로 처리되어야합니다 (Color # 000000XX). 헤더가 사각형을 "숨기지"않기 때문에 중요합니다 꼭대기에 올라서.

나는 이것을 달성하기위한 지침에 대해 감사하겠습니다. Visual Studio 2012에서 블렌드를 사용할 수 있습니다.

당신이 여기

Answer 1

당신이

난 당신이 더 선호의 템플릿에서 사용할 수있는 헤더와 내용을 가지고 있습니다 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> 

다른 접근 방식을 달성하려고 않았다,이 템플릿을 시도

결과