Cuadro de texto de esquina redondeada de WPF

textbox rounded-corners

Question

No sé WPF y ahora lo estoy aprendiendo. Estaba buscando esquinas redondeadas TextBox en WPF. Así que busqué en Google y encontré una pieza 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>

Entonces, díganme dónde pegar este XAML . Por favor, ayúdenme en detalle. Soy un principiante en WPF.

Answer 1

@Smolla tuvo una respuesta mucho mejor en su comentario sobre la respuesta 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 desea que todos los bordes de TextBoxes y ListBoxes tengan esquinas redondeadas, coloque el estilo en los <Resources> su ventana o aplicación.

Answer 2

En WPF puede modificar o recrear la apariencia de los controles. Entonces, si su ejemplo lo que han hecho es que cambiaron la apariencia del TextBox al modificar el ControlTemplate del TextBox existente. Para ver y explorar el fragmento de código solo use el siguiente código

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

Por lo tanto, hemos declarado un recurso estático en la sección de Recursos de la ventana y hemos utilizado el recurso TextBoxBaseControlTemplate en la propiedad Template del TextBox como Template="{StaticResource TextBoxBaseControlTemplate}" .

Plantillas para personalizar los controles de WPF simplemente refere este documento para tener una idea

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

Answer 3

Puede cambiar todos los cuadros de texto para tener esquinas redondeadas usando el siguiente estilo:

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

Inspirado por la siguiente respuesta: https://.com/a/13858357/3387453

Answer 4

Puede usar propiedades adjuntas para configurar el radio del borde del TextBox (también lo mismo funcionará para los botones).

Crear clase para la propiedad adjunta

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

Luego puede usar la sintaxis de propiedad adjunta para dar estilo a múltiples cuadros de texto sin estilo duplicados:

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

Answer 5

Simplemente establezca BorderThicknessof textbox en cero agregue un borde alrededor del cuadro de texto.

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

¡La salida es como se muestra en la imagen!

Answer 6

esta cuestión se debate ampliamente en msdn: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

Pruebe las soluciones allí, están en un montón de detalles y ciertamente suficientes detalles para que sepa dónde colocar el código.