如何使用傾斜邊框創建文本框和標籤？

Question

我正在嘗試在Wpf中創建一個文本框，該文本框在其左上角有一個標籤，特殊情況下，此標籤的一邊將有一個邊框。

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

這是一種使用Style代替UserControl另一種解決方案。

我假定Label是TextBox的描述中，式內，我創建一個TextBlock（替換Label因爲這將是在這種情況下矯枉過正），其中Text勢必父TextBox的Tag。然後它會顯示您在Tag中的任何內容。

此外，我已將TextBlock和兩個Paths分組爲Grid，將其列設置爲自動調整大小，以便您不再有可調整性問題。

下面的截圖是兩個TextBoxes不同的標籤。

文本框樣式

<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 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

在這種情況下，我會構建一個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" />