Как создать текстовое поле и метку с наклонной рамкой?

Question

Я пытаюсь создать текстовое поле в Wpf с меткой в ​​левом верхнем углу, и дополнительно эта метка должна иметь границу с уклоном с одной стороны.

http://imgur.com/Nupbf

Теперь для одного или двух конкретных случаев, которые можно было выполнить с помощью обходного пути, когда я просто использовал линии для границы. Теперь, когда я хочу использовать это немного больше, мне нужно сделать это правильно, особенно таким образом, чтобы это масштабировалось.

Я был бы очень рад, если бы кто-то мог указать мне правильное направление.

Edit: Итак, код, который я использую после учета ответов, которые я создал в качестве пользовательского элемента управления:

<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 привязано к Tag родительского TextBox.Затем он отобразит все, что вы положили в Tag.

Также я сгруппировал TextBlock и два Paths в Grid, установив для его столбцов автоматический размер, чтобы вы не сталибольше не возникает проблема изменения размера.

На снимке экрана ниже показаны два 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>

TextBoxes

    <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 относительно нее.Пожалуйста см. Мой ответ в аналогичном вопросе.

Answer 3

В этом случае я бы создал UserControl, который содержит желаемые элементы управления (две метки и наклон). Вот статья о том, как создавать UserControls и ссылаться на них в вашем приложении: http://www.codeproject.com/KB/WPF/UserControl.aspx

Если у вас есть Expression Blend, вы можете довольно легко нарисовать наклон, иначе вам придется вручную кодировать с помощью синтаксиса WPF Geometry: http://msdn.microsoft.com/en-us/library/ms752293.aspx

Вот пример для пути наклона, который должен дать начало:

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