logo标签列表

WPF 圆角文本框

wpftextboxrounded-corners
55

我不了解 WPF，现在正在学习它。我想要在 WPF 中找到具有圆角的 TextBox。于是我在谷歌上进行了搜索，并发现了一段 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个回答
86

@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的边框都具有圆角，请将样式放入窗口或应用程序的<Resources>中。

8
我认为这个答案更好。被接受的答案阐述了WPF的概念，但这个答案则是关于“优雅地完成任务”的。 - Trekkie
71

在WPF中，您可以修改或重新创建控件的外观和感觉。因此，如果您的示例是他们通过修改现有 TextBox 的 ControlTemplate 来更改 TextBox 的外观。因此，要查看和探索代码片段，请使用以下代码

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

我们在窗口的资源部分声明了一个静态资源，并将资源 TextBoxBaseControlTemplate 用作 TextBox 的 Template 属性，如下所示：Template="{StaticResource TextBoxBaseControlTemplate}"。

要自定义 WPF 控件，请参考此文档以获取相关想法：http://msdn.microsoft.com/en-us/magazine/cc163497.aspx

35

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

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

受以下答案启发：https://dev59.com/o2zXa4cB1Zd3GeqPPQlh#13858357

还有一个完全相同的副本 https://dev59.com/62445IYBdhLWcg3wmLde#31556325，早在三年前就发布了。 - Robert Harvey
7

只需将文本框的BorderThickness设置为零，即可在文本框周围添加边框。

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

以下是输出结果，如图所示！ 输出结果！

4
你可以使用附加属性来设置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" />
相对于其他答案，对于新手来说，这看起来非常复杂。 - ErraticFox
@ErraticFox 1. 这比被接受的答案容易得多，并且适用于不同的控件，因此您不必重复代码。2. 我不确定其他答案是否适用于您想要为某些控件设置圆角或者对它们设置不同的半径，因此这是更灵活的选择。3. 新手可能知道C#，但对XAML知之甚少，所以这是值得商榷的。 - Vadim Ovchinnikov
4
7
这个帖子中的最后一个对于简单解决方案非常有用： - Smolla
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接