文本框在我用Path设置样式后没有显示任何文本
本文关键字:文本 任何 显示 样式 设置 Path | 更新日期: 2023-09-27 18:28:35
我使用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标签只接受一个子元素。相反,我使用了网格。网格也很好,因为在我读到的文档中,它允许将元素堆叠在一起。这就是我为任何在未来偶然发现这一点的人所做的。
在<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>
这立刻使文本出现在我制作的盒子里。一点样式使文本符合我的要求,但仅此而已。
感谢很多人,并考虑解决这个问题:)
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>
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>