奇怪的 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>

结果：

这一次，只有圆形边框发生，其余的 Setter 属性被覆盖。

谁能帮忙指出这两种方式的错误是什么？

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。要了解所有 WPF 控件的命名部分，请访问Control Styles and Templates。此链接还包含实际样式和模板的示例。

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