Come creare una casella di testo e un'etichetta con il bordo inclinato?

Question

Sto provando a creare una casella di testo in Wpf che ha un'etichetta nell'angolo in alto a sinistra e, in aggiunta, questa etichetta deve avere un bordo con una pendenza su un lato.

http://imgur.com/Nupbf

Ora, per uno o due casi specifici che era fattibile con una soluzione dove ho appena usato le linee per il bordo. Ora che voglio usarlo un po 'di più ho bisogno di farlo nel modo giusto, specialmente in un modo in cui è scalabile.

Sarei davvero felice se qualcuno potesse indicarmi la giusta direzione.

Edit: Così il codice che sto usando dopo aver preso in considerazione le risposte finora, che ho creato come un controllo utente:

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

Funziona e l'unica cosa che ancora mi dà fastidio è la resizability del bordo dell'etichetta, che è abbastanza fastidioso da fare ma fortunatamente non necessario nel mio caso.

Answer 1

Questa è un'altra soluzione che utilizza un Style invece di un UserControl.

Suppongo che il Label è la descrizione del TextBox, all'interno dello stile, ho creato un TextBlock (sostituendo il Label come sarebbe un peso inutile in questo caso) di cui Text è legato al Tag di genitore TextBox. Quindi mostrerà tutto ciò che hai inserito nel tuo Tag.

Inoltre ho raggruppato TextBlock e due Paths in un Grid, impostare le sue colonne per essere ridimensionamento automatico in modo da non avere più il problema di ridimensionamento.

L'immagine qui sotto è due TextBoxes con diverse etichette.

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

caselle di testo

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

Spero che questo aiuti. :)

Answer 2

È possibile creare un Path e utilizzarlo come bordo e posizionare un bordo inferiore a textbox relativo. Per favore see my answer in una domanda simile.

Answer 3

In tal caso, creo un controllo utente che contiene i controlli desiderati (le due etichette e la pendenza). Ecco un articolo su come creare controlli utente e di riferimento nella vostra applicazione: http://www.codeproject.com/KB/WPF/UserControl.aspx

Se avete Expression Blend è possibile tracciare una pendenza abbastanza facilmente, altrimenti bisogna manualmente il codice con la sintassi Geometria di WPF: http://msdn.microsoft.com/en-us/library/ms752293.aspx

Ecco un esempio di un percorso di pendenza che dovrebbe dare un inizio:

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