奇怪的 WPF 圆形文本框

Question

我是 WPF 的新手，我正在尝试做一个圆角文本框。我从这里收集了很多例子。但是我似乎无法让它发挥作用。下面是我尝试的两种方式和得到的结果。

第一种方式：

<SolidColorBrush x:Key="SubTransparentTextBoxBG" Color="#ffffff" Opacity="0.12"/>        
    <Style TargetType="TextBox">
        <Style.Setters>
            <Setter Property="Background" Value="{StaticResource SubTransparentTextBoxBG}" />
            <Setter Property="FontSize" Value="24px" />
            <Setter Property="FontFamily" Value="Segoe UI Semibold"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="2"/>
        </Style.Setters>
        <Style.Resources>
            <Style TargetType="Border">
                <Setter Property="CornerRadius" Value="10"/>
            </Style>                
        </Style.Resources>            
    </Style>

结果：

显然我所有的二传手都生效了，但角半径没有生效

第二种方式：

<SolidColorBrush x:Key="SubTransparentTextBoxBG" Color="#ffffff" Opacity="0.12"/>        
    <Style TargetType="TextBox">
        <Style.Setters>
            <Setter Property="Background" Value="{StaticResource SubTransparentTextBoxBG}" />
            <Setter Property="FontSize" Value="24px" />
            <Setter Property="FontFamily" Value="Segoe UI Semibold"/>
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Padding" Value="10" />
            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">
                        <Border x:Name="border" CornerRadius="10" BorderBrush="#000" BorderThickness="2" Background="#fff"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style.Setters>

    </Style>

结果：

这一次，只有 Round Border 出现，其余的属性被覆盖。

有哪位大侠帮忙指出这两种方式有什么错误吗？

Answer 1

提供 TextBox 圆角的最佳方法是覆盖模板。

以下是您的 Style，但已修复。它现在包含强制性部分及其强制性命名：名为 PART_ContentHost 的内容主机。为了使样式设置器起作用，您需要使用 TemplateBinding 将模板的控件（在本例中为 Border 属性）绑定到模板化父项（TextBox）的适当属性.

<Style TargetType="TextBox">
  <Style.Setters>
    <Setter Property="Background"
            Value="{StaticResource SubTransparentTextBoxBG}" />
    <Setter Property="FontSize"
            Value="24px" />
    <Setter Property="FontFamily"
            Value="Segoe UI Semibold" />
    <Setter Property="Foreground"
            Value="White" />
    <Setter Property="Padding"
            Value="10" />
    <Setter Property="BorderBrush"
            Value="Red" />
    <Setter Property="BorderThickness"
            Value="2" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="TextBox">
          <Border CornerRadius="10"
                  Margin="{TemplateBinding Margin}"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  Padding="{TemplateBinding Padding}">

            <!-- The required part with the required name -->
            <ScrollViewer x:Name="PART_ContentHost"/>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style.Setters>
</Style>

将 TextBox 包裹在带有圆角的 Border 中仍然会留下带有尖角的 TexBox，这些尖角会与周围 Border 的圆角重叠。

某些控件具有强制性模板元素（部分），它们必须是 ContorlTemplate 的一部分并且具有特殊名称。当缺少这些部分或名称与所需名称不匹配时，模板化控件的功能可能会被破坏。要了解 TextBox 的部件及其名称，请访问 TextBox Parts. To know the named parts of all WPF controls visit Control Styles and Templates。此链接还包含实际样式和模板的示例。

获取所需模板部件的另一种方法是 select 您希望模板化的控件，然后打开 XAML 设计器视图。右键单击 selected 控件并 select 编辑模板 。在弹出窗口中 select 编辑副本。一个对话框打开。您可以在此处为提取的模板命名并设置提取的模板将移动到的位置。现在您可以编辑这个已经包含所有必需部分的模板。

奇怪的 WPF 圆形文本框

Weird WPF Round TextBox

wpf

textbox

rounding