web-dev-qa-db-de.com

WPF-Textfeld mit abgerundeten Ecken

Ich kenne WPF nicht und lerne es jetzt. Ich habe in WPF nach abgerundeten Ecken TextBox gesucht. Also suchte ich bei Google und fand ein Stück XAML:

 <!–Rounded Corner TextBoxes–>
<ControlTemplate x:Key=”RoundTxtBoxBaseControlTemplate” TargetType=”{x:Type Control}”>
<Border Background=”{TemplateBinding Background}” x:Name=”Bd” BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”6″>
<ScrollViewer x:Name=”PART_ContentHost”/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=”IsEnabled” Value=”False”>
<Setter Property=”Background” Value=”{DynamicResource {x:Static SystemColors.ControlBrushKey}}” TargetName=”Bd”/>
<Setter Property=”Foreground” Value=”{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}”/>
</Trigger>
<Trigger Property=”Width” Value=”Auto”>
<Setter Property=”MinWidth” Value=”100″/>
</Trigger>
<Trigger Property=”Height” Value=”Auto”>
<Setter Property=”MinHeight” Value=”20″/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Also sag mir bitte, wo ich dieses XAML einfügen soll. Bitte helfen Sie mir im Detail. Ich bin ein Anfänger in WPF.

36
Thomas

In WPF können Sie das Erscheinungsbild von Steuerelementen ändern oder neu erstellen. Wenn Ihr Beispiel lautet, dass sie das Erscheinungsbild der TextBox geändert haben, indem sie das ControlTemplate des vorhandenen TextBox geändert haben. Verwenden Sie den folgenden Code, um den Code zu sehen und zu erkunden

<Window x:Class="WpfApplication4.Window1"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
        <Border Background="{TemplateBinding Background}" 
                x:Name="Bd" BorderBrush="Black"
                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"> 
            <ScrollViewer x:Name="PART_ContentHost"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="Width" Value="Auto">
                <Setter Property="MinWidth" Value="100"/>
            </Trigger>
            <Trigger Property="Height" Value="Auto">
                <Setter Property="MinHeight" Value="20"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5"></TextBox>
</Grid>

Daher haben wir im Abschnitt Resource des Fensters eine statische Ressource deklariert und die Resource TextBoxBaseControlTemplate in der Eigenschaft Template von TextBox als Template="{StaticResource TextBoxBaseControlTemplate}" Verwendet.

Vorlagen zum Anpassen von WPF-Steuerelementen verweisen nur auf dieses Dokument, um eine Vorstellung zu erhalten

http://msdn.Microsoft.com/en-us/magazine/cc163497.aspx

58
Kishore Kumar

@ Smolla hatte eine viel bessere Antwort in seinem Kommentar zu @ Daniel Casserlys Antwort:

<TextBox Text="TextBox with CornerRadius">
  <TextBox.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3"/>
    </Style>
  </TextBox.Resources>
</TextBox>

Wenn Sie möchten, dass alle Ränder von TextBoxen und ListBoxen abgerundete Ecken haben, fügen Sie den Stil in das Fenster oder die App ein <Resources>.

40
cheeesus

Sie können alle Textfelder so ändern, dass sie abgerundete Ecken haben, indem Sie den folgenden Stil verwenden:

<Style TargetType="{x:Type TextBox}">
  <Style.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3" />
    </Style>
  </Style.Resources>
</Style>

Inspiriert von der folgenden Antwort: https://stackoverflow.com/a/13858357/338745

11
Class Skeleton

Setzen Sie einfach BorderThicknessof Textbox auf Null und fügen Sie einen Rahmen um die Textbox hinzu.

 <Border BorderThickness="1" BorderBrush="Black" CornerRadius="10" Padding="2"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBox Text="Hello ! " BorderThickness="0"/>
 </Border>

Die Ausgabe erfolgt wie im Bild gezeigt! Output!

3
Thunder

Sie können angehängte Eigenschaften verwenden, um den Rahmenradius TextBox festzulegen (dies gilt auch für Schaltflächen).

Erstellen Sie eine Klasse für die angehängte Eigenschaft

public class CornerRadiusSetter
{
    public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);

    public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);

    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
            typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));

    public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
    {
        Control control = sender as Control;

        if (control == null) return;

        control.Loaded -= Control_Loaded;
        control.Loaded += Control_Loaded;
    }

    private static void Control_Loaded(object sender, EventArgs e)
    {
        Control control = sender as Control;

        if (control == null || control.Template == null) return;

        control.ApplyTemplate();

        Border border = control.Template.FindName("border", control) as Border;

        if (border == null) return;

        border.CornerRadius = GetCornerRadius(control);
    }
}

Anschließend können Sie mithilfe der angehängten Eigenschaftensyntax mehrere Textfelder ohne doppelte Stile formatieren:

<TextBox local:CornerRadiusSetter.CornerRadius="10" />
<TextBox local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5" />
<TextBox local:CornerRadiusSetter.CornerRadius="10, 4, 18, 7" />
2