C# 角落有小三角形的文本框

我尝试创建一个文本框，右上角有一个小三角形。我真的不知道如何实现它。我尝试通过以下方式将多边形添加到文本框：

<TextBox 
      x:Name="PartnerEmail"
      TextWrapping="Wrap" 
      MaxLength="50"
      Grid.Column="1"
      Grid.Row="12"
      Margin="5,1,0,1" >
      <TextBox.Style>
          <Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
                <Setter Property="Template">
                      <Setter.Value>
                           <ControlTemplate>
                                <Polygon Points="0,0 10,0 0,10 0,0" Margin="0,2,2,0" HorizontalAlignment="Right" Fill="#fcba03" FlowDirection="RightToLeft"/>
                           </ControlTemplate>
                      </Setter.Value>
                </Setter>
           </Style>
      </TextBox.Style>

---

但很明显，这不起作用，因为我覆盖了默认模板，所以在这之后，我只有一个多边形，文本框消失了。有人能找到一个好的解决方案吗？

你基本上是用一个三角形来代替整个文本框。您应该复制基础模板，并从中修改它：

    <SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
    <SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
    <SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>

    <Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <!--<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>-->
                        <Grid>
                            <Polygon Points="0,0 10,0 0,10 0,0" Margin="0,2,2,0" HorizontalAlignment="Right" Fill="#fcba03" FlowDirection="RightToLeft"/>
                            <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Opacity" TargetName="border" Value="0.56"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
                    <Condition Property="IsSelectionActive" Value="false"/>
                </MultiTrigger.Conditions>
                <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
            </MultiTrigger>
        </Style.Triggers>
    </Style>

---

至于模板本身，您可以从或通过创建一个用户（复合）控件获得它。该控件将使多边形（最后绘制）根据需要覆盖角落中的文本框。使用

Canvas

控件进行特定放置，或在

网格中使用
控件进行常规放置


在这里，我必须在网格中的文本字段上放置一个搜索图标。我根据需要设置
ZIndex


代码

<TextBox Grid.ColumnSpan="2" 
         Panel.ZIndex="0" 
         HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch"  />

<Image Grid.Column="1" Source="../Assets/Search.png" 
       Panel.ZIndex="1"
       HorizontalAlignment="Stretch" 
       VerticalAlignment="Stretch"  
       Stretch="Uniform"/>

你的思路是对的，但是工作有点太辛苦了

关于WPF中的UI元素，需要记住的是它们是分层工作的。将元素视为要堆叠在三维空间中的较小项目的组合。您不再像WinForms的GDI渲染空间那样只在二维绘图空间中工作

因此，让我们从逻辑上思考一下您在这里想要做什么。让我们尝试在解决方案中实现几个目标：


让我们制作一个控件模板，允许我们重用新创建的控件
让控件在三维空间中完全可移植，即不使用光栅图像，如果调整控件大小，光栅图像将发生扭曲-让我们仅在绘图时使用几何图形

让我们很容易决定在角上三角形的大小

让我们决定允许以后进行简单的修改，例如三角形放置（您想更改其位置）、点击测试（是否应该是文本表面或边框的一部分？），颜色（同样，边框或文本？）等


好的，为了解决这个问题，我提到了分层对象的概念。让我们将绘图表面划分为网格：


这意味着我们要使用
网格
控件。我们想要定义两行两列，我们想要
TextBox
覆盖所有4个单元格。我们将确保设置
行span
和
列span
以填充网格

然后，我们将在第1行第1列添加第二项，即我们的
多段线
三角形，并将其添加到文本框之后。这样，它的Z顺序将位于顶部

下面是控制模板：

<Window.Resources>
    <Style x:Key="TriangleTextBox" TargetType="{x:Type TextBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="10"/>
                            <RowDefinition Height="6*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="6*" />
                            <ColumnDefinition Width="10" />
                        </Grid.ColumnDefinitions>
                        <TextBox Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,0,0" Text="{TemplateBinding Text}" BorderThickness="1"/>
                        <Polygon Grid.Row="0" Grid.Column="1" Points="0,0 10,0 0,10 0,0" Fill="Black" FlowDirection="RightToLeft"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>



请注意，我们将键设置为“TriangleTextBox”

现在只需使用我们的控件模板，如下所示：

<Grid>
    <TextBox Style="{StaticResource ResourceKey=TriangleTextBox}" Width="100" Height="20"/>
</Grid>



就在这里：


你可以从这里展开