使用路径设置样式后，文本框不显示任何文本

Question

我使用 PATH 为文本框制作了自定义样式。该框看起来正是我想要的，但是当我在其中写任何文本时，似乎什么也没有出现。似乎我的风格中的某些东西阻止了它，或者我需要添加一些东西才能显示内容。但我不确定到底是什么，有没有人知道我可以做些什么来让文本出现在定制的盒子里？

<Style x:Key="AppearingTextbox" TargetType="{x:Type TextBox}">
  <Setter Property="Cursor" Value="Arrow"/>
  <Setter Property="Foreground" Value="#3E82C4"/>
  <Setter Property="Background" Value="#0F1C2B"/>
  <Setter Property="Opacity" Value="0"/>
  <Setter Property="IsReadOnly" Value="True"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type TextBox}">
        <StackPanel>
          <Path Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
        </StackPanel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
    <DataTrigger Binding="{Binding ElementName=Ikona, Path=IsMouseOver}" Value="True">
      <DataTrigger.EnterActions>
        <BeginStoryboard >
          <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
            <DoubleAnimation From="0" To="1" Duration="00:00:00.3"/>
          </Storyboard>
        </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
        <BeginStoryboard >
          <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
            <DoubleAnimation From="1" To="0" Duration="00:00:00.3"/>
          </Storyboard>
        </BeginStoryboard>
      </DataTrigger.ExitActions>
    </DataTrigger>
  </Style.Triggers>
</Style>

应用到这个TextBox：

<TextBox Style="{DynamicResource AppearingTextbox}" Height="30" Width="100" FontSize="10" Margin="0,480,0,0">
        Some text
</TextBox>

感谢一群人，我设法让它工作。 我不能把它放在边框标签内，因为边框标签只接受 1 个子元素。 相反，我使用了网格。网格也很好，因为在文档中我在某处读到它允许将元素堆叠在一起。 这就是我为将来偶然发现此问题的任何人所做的。

在<ControlTemplate> 标签中，我做了以下操作：

<ControlTemplate TargetType="{x:Type TextBox}">
  <Grid>
    <Path Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
    <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
  </Grid>
</ControlTemplate>

这立即使文本出现在我制作的框中。一点点样式使文本正好在我想要的位置，但仅此而已。
非常感谢并认为这已解决:)

Answer 1

TextBox 模板需要命名部分

<ScrollViewer x:Name="PART_ContentHost" />

托管其内容并提供编辑功能

来自MSDN

可以包含 FrameworkElement 的可视元素。 TextBox 的文本显示在此元素中。

编辑

<ControlTemplate TargetType="{x:Type TextBox}">
   <Grid>
      <Path Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
      <ScrollViewer x:Name="PART_ContentHost"/>
   </Grid>
</ControlTemplate>

Answer 2

MSDN 给出了TextBox 样式的示例并枚举了命名部分。对于TextBox，它是显示其内容的 PART_ContentHost。默认模板是ScrollViewer:

<ScrollViewer Margin="0" x:Name="PART_ContentHost" />

如果将其添加到StackPanel，元素将连续显示，但您需要在Path 前面显示文本。然后把StackPanel改成Grid。

<Grid>
    <Path Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
    <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Grid>

接下来我们需要将元素相互对齐，然后你可以添加VerticalAlignment和HorizontalAlignment。

<Grid>
    <Path VerticalAlignment="Center" HorizontalAlignment="Center" Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
    <ScrollViewer VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" x:Name="PART_ContentHost"  />
</Grid>

最后你还有一个问题。默认情况下，文本颜色为黑色。您可以通过覆盖 Foreground 属性来更改它：

<Setter Property="Foreground" Value="White" />

完整样式如下所示：

<Style x:Key="AppearingTextbox" TargetType="{x:Type TextBox}">
    <Setter Property="Cursor" Value="Arrow"/>
    <Setter Property="Foreground" Value="#3E82C4"/>
    <Setter Property="Background" Value="#0F1C2B"/>
    <Setter Property="Opacity" Value="0"/>
    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">
                <Grid>
                    <Path VerticalAlignment="Center" HorizontalAlignment="Center" Data="M0 0 30 0 50 -10 70 0 100 0 100 30 0 30z" Fill="#0F1C2B"/>
                    <ScrollViewer VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" x:Name="PART_ContentHost" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=Ikona, Path=IsMouseOver}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard >
                    <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
                        <DoubleAnimation From="0" To="1" Duration="00:00:00.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard >
                    <Storyboard TargetProperty="Opacity" Duration="00:00:00.3" AutoReverse="False">
                        <DoubleAnimation From="1" To="0" Duration="00:00:00.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>