傾斜した枠線でテキストボックスとラベルを作成するには？

Question

私は左上隅にラベルを持つWpfのテキストボックスを作成しようとしています、そして、このラベルは片側の斜面を持つ境界線を持っていなければなりません。私はちょうど境界のラインを使用し、回避策でなんとかした1つまたは2つの特定の例のために今

http://imgur.com/Nupbf

。今私はそれをもう少し使いたいと思っています。特に、スケーラビリティのある方法で、正しい方法で行う必要があります。

誰かが正しい方向に向けることができれば、本当にうれしいです。

編集： は、だから私は、ユーザーコントロールとして作成された私は、これまで考慮に回答を取った後、使用していますコード：

<Grid Height="93" Width="335"> 
<TextBox TextWrapping="Wrap" Text="{Binding TextboxText}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="{x:Null}" Background="{x:Null}"/> 
<Path Data="M384,242 L442.5,242" HorizontalAlignment="Left" Height="1" Margin="0,28.667,0,0" Stretch="Fill" VerticalAlignment="Top" Width="59.5"> 
<Path.Fill> 
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
<GradientStop Color="#8EFFFFFF"/> 
<GradientStop Color="White" Offset="0.991"/> 
</LinearGradientBrush> 
</Path.Fill> 
<Path.Stroke> 
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
<LinearGradientBrush.RelativeTransform> 
<TransformGroup>          <ScaleTransform CenterY="0.5" CenterX="0.5"/>         <SkewTransform CenterY="0.5" CenterX="0.5"/>        <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>      <TranslateTransform/> 
</TransformGroup> 
</LinearGradientBrush.RelativeTransform> 
<GradientStop Color="White" Offset="0.009"/> 
<GradientStop Color="#5FFFFFFF" Offset="1"/> 
</LinearGradientBrush> 
</Path.Stroke> 
</Path> 
<Label Content="{Binding LabelText}" HorizontalAlignment="Left" Width="113" FontSize="16" Height="40" VerticalAlignment="Top" BorderBrush="White" Margin="0,0.167,0,0"/> 
<Path Data="M125.12574,28.672087 L145.37561,-1.1668457" HorizontalAlignment="Left" Height="30.839" Margin="58.125,-1,0,0" Stretch="Fill" VerticalAlignment="Top" Width="21.25"> 
<Path.Stroke> 
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
<GradientStop Color="#51FFFFFF" Offset="0"/> 
<GradientStop Color="White" Offset="1"/> 
</LinearGradientBrush> 
</Path.Stroke> 
<Path.Fill> 
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
<GradientStop Color="#49FFFFFF" Offset="0"/> 
<GradientStop Color="White" Offset="1"/> 
</LinearGradientBrush> 
</Path.Fill> 
</Path> 
<Path Data="M0,83 L181.35815,83" Fill="#FFF4F4F5" Height="1" Stretch="Fill" VerticalAlignment="Bottom" Width="327" StrokeThickness="2" Margin="0,0,10,10"> 
<Path.Stroke> 
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
<GradientStop Color="Black" Offset="0"/> 
<GradientStop Color="White" Offset="1"/> 
</LinearGradientBrush> 
</Path.Stroke> 
</Path> 
</Grid> 

それが動作し、まだ私を悩ませているだけの事はありますラベルの境界線のサイズ変更ができますが、これはかなり面倒ですが、私の場合は幸いにも必要ありません。

Answer 1

この代わりUserControlのStyleを使用する別の解決策です。 Textが親TextBoxのTagにバインドされているの

私はLabelがTextBoxの説明で、スタイルの内側に、私は（それがこのケースで過剰になるようLabelを置き換える）TextBlockを作成したと仮定します。それから、あなたがTagに入れたものが表示されます。

はまた、私はGridにTextBlockと2 Pathsをグループ化してきた、自動サイズであることをその列を設定しますので、もうサイズ変更できるの問題を持っていません。

以下のスクリーンショットは、ラベルが異なる2つのTextBoxesです。

のTextBoxスタイル

<Style x:Key="MyTextBoxStyle" TargetType="{x:Type TextBox}"> 
    <Setter Property="Background" Value="Black" /> 
    <Setter Property="Foreground" Value="#FFB8B8B8" /> 
    <Setter Property="BorderBrush" Value="#FF484848" /> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="Padding" Value="1" /> 
    <Setter Property="AllowDrop" Value="true" /> 
    <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" /> 
    <Setter Property="Stylus.IsFlicksEnabled" Value="False" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TextBox}"> 
       <Border x:Name="BottomLine" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,1"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
         <Grid x:Name="TopPanel" HorizontalAlignment="Left"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="Auto" /> 
          </Grid.ColumnDefinitions> 
          <TextBlock d:LayoutOverrides="Width, Height" x:Name="Caption" TextWrapping="Wrap" Text="{TemplateBinding Tag}" FontSize="14.667" VerticalAlignment="Center" Margin="4,0,24,0" /> 
          <Path x:Name="BottomPath" Data="M384,242 L442.5,242" Stretch="Fill" VerticalAlignment="Bottom" Margin="0,0,-1.3,0"> 
           <Path.Stroke> 
            <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
             <LinearGradientBrush.RelativeTransform> 
              <TransformGroup> 
               <ScaleTransform CenterY="0.5" CenterX="0.5" /> 
               <SkewTransform CenterY="0.5" CenterX="0.5" /> 
               <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5" /> 
               <TranslateTransform /> 
              </TransformGroup> 
             </LinearGradientBrush.RelativeTransform> 
             <GradientStop Color="White" Offset="0.009" /> 
             <GradientStop Color="#5FFFFFFF" Offset="1" /> 
            </LinearGradientBrush> 
           </Path.Stroke> 
          </Path> 
          <Path x:Name="RightPath" Data="M125.12574,28.672087 L145.37561,-1.1668457" Stretch="Fill" Grid.Column="1"> 
           <Path.Stroke> 
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
             <GradientStop Color="#51FFFFFF" Offset="0" /> 
             <GradientStop Color="White" Offset="1" /> 
            </LinearGradientBrush> 
           </Path.Stroke> 
          </Path> 
         </Grid> 
         <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true" Margin="0,0,0,-0.001" d:LayoutOverrides="Width, Height" Grid.Row="1"> 
          <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> 
         </Microsoft_Windows_Themes:ListBoxChrome> 
        </Grid> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /> 
         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

のTextBox

<TextBox Tag="Label" Text="This is a textbox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="24" Style="{DynamicResource MyTextBoxStyle}"/> 
    <TextBox Tag="Long Label" Text="This is a textbox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Bottom" FontSize="24" Style="{DynamicResource MyTextBoxStyle}"/> 

この情報がお役に立てば幸いです。 :)

Answer 2

Pathを作成し、これを境界線として使用し、それよりも小さい境界線をtextboxに配置することができます。 同様の質問でsee my answerをください。

Answer 3

その場合、私は希望のコントロール（2つのラベルとスロープ）を含むUserControlを作成します。ここ は、ユーザーコントロールを作成して、アプリケーションでそれらを参照する方法についての記事です： http://www.codeproject.com/KB/WPF/UserControl.aspx

あなたはExpression Blendのを持っている場合は、非常に簡単にスロープを描くことができ、そうでない場合は、手動でWPFのジオメトリ構文でコーディングする必要があります。 http://msdn.microsoft.com/en-us/library/ms752293.aspx

ここ

スタートを与える必要が傾斜路のための例は次のとおり

<Path Data="M0.5,40 L176,40 M177,40 L217,0.5" Fill="#FFF4F4F5" />