WPF圆角文本框

时间:2011-01-24 07:57:46

标签: wpf textbox rounded-corners

我不知道WPF,现在正在学习它。我在WPF中寻找圆角TextBox。所以我搜索了Google并发现了一段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>

请告诉我在哪里粘贴XAML。请详细帮我。我是WPF的初学者。

6 个答案:

答案 0 :(得分:57)

在WPF中,您可以修改或重新创建控件的外观。因此,如果您的示例他们所做的是他们通过修改现有ControlTemplate的{​​{1}}来更改TextBox的外观。所以要查看和探索这段代码,只需使用下面的代码

TextBox

所以我们在Window的Resource部分声明了一个静态资源,我们在<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> 的{​​{1}}属性中使用了Resource TextBoxBaseControlTemplate作为Template

自定义WPF控件的模板只需参考此文档即可获得一个想法

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

答案 1 :(得分:36)

@Smolla在评论@Daniel Casserly的答案时得到了更好的答案:

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

如果您希望TextBoxes和ListBoxes的所有边框都有圆角,请将样式放入Window或App <Resources>

答案 2 :(得分:8)

您可以使用以下样式将所有文本框更改为圆角:

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

受到以下答案的启发:https://stackoverflow.com/a/13858357/3387453

答案 3 :(得分:4)

在msdn上讨论了这个问题: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

尝试那里的解决方案,它们有很多细节,当然还有足够的细节让你知道在哪里放置代码。

答案 4 :(得分:3)

只需将BorderThicknessof文本框设置为零,即可在文本框周围添加边框。

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

输出如图所示! Output!

答案 5 :(得分:2)

您可以使用附加属性来设置TextBox边框半径(按钮也一样)。

为附加属性创建类

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

然后,您可以使用附加的属性语法为多个文本框设置样式,而无需样式重复:

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