WPF 圆角文本框

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4779777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-08 22:31:21  来源:igfitidea点击:

WPF rounded corner textbox

wpftextboxrounded-corners

提问by Thomas

I don't know WPF and am now learning it. I was looking for rounded corners TextBoxin WPF. So I searched Google and found a piece of XAML:

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

So please tell me where to paste this XAML. Please help me in detail. I am a beginner in WPF.

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

回答by Kishore Kumar

In WPF you can modify or recreate the look and feel of controls. So if your example what they have done is they changed the appearance of the TextBox by modifying the ControlTemplateof the existing TextBox. So to see and explore the piece of code just use the below code

在 WPF 中,您可以修改或重新创建控件的外观和感觉。因此,如果您的示例他们所做的是通过修改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>

So we have declared a static resource in the Resource section of the Window and we have used the Resource TextBoxBaseControlTemplate in the Templateproperty of the TextBoxas Template="{StaticResource TextBoxBaseControlTemplate}".

因此,我们宣布在窗口的资源部分的静态资源,我们已经在使用的资源TextBoxBaseControlTemplateTemplate的财产TextBox作为 Template="{StaticResource TextBoxBaseControlTemplate}"

Templates to Customize WPF Controls just refere this document to get an idea

自定义 WPF 控件的模板只需参考此文档即可了解

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

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

回答by cheesus

@Smolla had a much better answer in his comment on @Daniel Casserly's answer:

@Smolla 在对@Daniel Casserly 的回答的评论中给出了更好的答案:

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

If you want all the borders of TextBoxes and ListBoxes to have rounded corners, put the style into your Window's or App's <Resources>.

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

回答by Class Skeleton

You can change all textboxes to have rounded corners by using the following style:

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

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

Inspired by the following answer: https://stackoverflow.com/a/13858357/3387453

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

回答by Daniel Casserly

this question is well discussed at msdn: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

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

Try the solutions there, they are in quite a lot of detail and certainly enough detail for you to know where to put the code.

尝试那里的解决方案,它们非常详细,当然足够详细,让您知道将代码放在哪里。

回答by Thunder

Just set BorderThicknessof textbox to zero add a border around textbox.

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

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

Output is as shown in image! Output!

输出如图所示! 输出!

回答by Vadim Ovchinnikov

You can use attached properties for setting TextBoxborder radius (also the same will work for buttons).

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

Create class for attached property

为附加属性创建类

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

Then you can use attached property syntax to style multiple textboxes without style duplicates:

然后,您可以使用附加属性语法来设置多个文本框的样式,而不会出现样式重复:

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