Làm thế nào để tạo ra một Textbox và Label với biên giới dốc?

Question

Tôi đang cố gắng tạo một Textbox trong Wpf có một Label ở góc trên bên trái của nó và addiotionally nhãn này sẽ có một biên giới với một dốc ở một bên.

http://imgur.com/Nupbf

Bây giờ cho một hoặc hai trường hợp cụ thể đó là doable với một workaround nơi mà tôi chỉ sử dụng dòng cho biên giới. Bây giờ tôi muốn sử dụng nó nhiều hơn một chút tôi cần phải làm điều đó đúng cách, đặc biệt là trong một cách mà nó có thể mở rộng.

Tôi sẽ thực sự hạnh phúc nếu ai đó có thể chỉ cho tôi đúng hướng.

Edit: Vì vậy, mã Tôi đang sử dụng sau khi có tính đến các câu trả lời cho đến nay, mà tôi tạo ra như một điều khiển người dùng:

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

Nó hoạt động và điều duy nhất mà vẫn còn làm phiền tôi là resizability của biên giới nhãn, mà là khá khó chịu để làm nhưng may mắn không cần thiết trong trường hợp của tôi.

Answer 1

Đây là một giải pháp trong đó sử dụng một Style thay vì một UserControl.

Tôi giả sử Label là mô tả của các TextBox, bên trong phong cách, tôi đã tạo ra một TextBlock (thay thế Label vì nó sẽ là một quá mức cần thiết trong trường hợp này) trong đó Text được ràng buộc với Tag của cha mẹ TextBox. Sau đó, nó sẽ hiển thị bất cứ điều gì bạn đặt trong Tag của bạn.

Ngoài ra tôi đã nhóm TextBlock và hai Paths vào một Grid, đặt các cột của nó được tự động kích thước để bạn sẽ không gặp phải vấn đề về khả năng tái tạo nữa.

Ảnh chụp màn hình bên dưới là hai TextBoxes với các nhãn khác nhau.

Các TextBox Phong cách

<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}"/> 

Hope this helps. :)

Answer 2

Bạn có thể tạo Path và sử dụng làm đường viền và đặt đường viền ít hơn textbox so với đường viền. Vui lòng see my answer trong một câu hỏi tương tự.

Answer 3

Trong trường hợp đó, tôi muốn xây dựng một UserControl chứa các điều khiển mong muốn của bạn (hai nhãn và độ dốc). Dưới đây là một bài viết về cách tạo usercontrol và tham khảo chúng trong ứng dụng của bạn: http://www.codeproject.com/KB/WPF/UserControl.aspx

Nếu bạn đã Expression Blend bạn có thể vẽ một dốc khá dễ dàng, nếu không bạn phải tự mã với cú pháp Geometry WPF của: http://msdn.microsoft.com/en-us/library/ms752293.aspx

Dưới đây là một ví dụ cho một con đường dốc mà nên cung cấp một sự khởi đầu:

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