web-dev-qa-db-fra.com

Zone de texte aux coins arrondis WPF

Je ne connais pas WPF et je l'apprends maintenant. Je cherchais des coins arrondis TextBox dans WPF. J'ai donc recherché Google et trouvé un morceau de 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>

Alors, dites-moi où coller ce XAML. Veuillez m'aider en détail. Je suis un débutant dans WPF.

wpftextboxrounded-corners
36
Thomas

Dans WPF, vous pouvez modifier ou recréer l'apparence des contrôles. Donc, si votre exemple, ce qu'ils ont fait, ils ont changé l'apparence de la TextBox en modifiant le ControlTemplate du TextBox existant. Donc, pour voir et explorer le morceau de code, utilisez simplement le code ci-dessous

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

Nous avons donc déclaré une ressource statique dans la section Ressource de la fenêtre et nous avons utilisé la ressource TextBoxBaseControlTemplate dans la propriété Template de la TextBox comme Template="{StaticResource TextBoxBaseControlTemplate}".

Les modèles pour personnaliser les contrôles WPF se réfèrent simplement à ce document pour se faire une idée

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

58
Kishore Kumar

@Smolla avait une bien meilleure réponse dans son commentaire sur la réponse de @Daniel Casserly:

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

Si vous souhaitez que toutes les bordures des TextBox et des ListBox aient des coins arrondis, mettez le style dans la fenêtre de votre application ou de votre application <Resources>.

40
cheeesus

Vous pouvez modifier toutes les zones de texte pour avoir des coins arrondis en utilisant le style suivant:

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

Inspiré par la réponse suivante: https://stackoverflow.com/a/13858357/338745

11
Class Skeleton

cette question est bien discutée sur msdn: http://social.msdn.Microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

Essayez les solutions là-bas, elles sont assez détaillées et certainement assez détaillées pour que vous sachiez où mettre le code.

4
Daniel Casserly

Définissez simplement BorderThicknessof textbox sur zéro, ajoutez une bordure autour de la zone de texte.

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

La sortie est comme indiqué dans l'image! Output!

3
Thunder

Vous pouvez utiliser les propriétés attachées pour définir le rayon de bordure TextBox (la même chose fonctionnera également pour les boutons).

Créer une classe pour la propriété attachée

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);
    }
}

Ensuite, vous pouvez utiliser la syntaxe de propriété attachée pour styliser plusieurs zones de texte sans doublons de style:

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