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>

感谢一群人，我设法让它运作起来。我不能把它放在Border标签内，因为border标签只接受1个子元素。相反，我使用了Grid。网格也很好，因为在文档中我读到了某个地方，它允许堆叠元素在彼此之上。这就是我为将来偶然发现的人所做的一切。

在<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>

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

<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>

在使用路径

2 个答案: