WPF技术问询:如何向LabelTextBlock的Text中插入StackPanel元素
如何在AnimatedTextBox的LabelTextBlock中嵌入StackPanel增强文本功能
我希望将<StackPanel>插入到x:Name为LabelTextBlock的<TextBlock>中,以此为标签文本添加更多功能。以下是修改后的自定义AnimatedTextBox样式代码:
<Color x:Key="Color.Control.Border.Focus">#164096</Color> <Duration x:Key="ColorDuration">0:0:0:0.5</Duration> <Duration x:Key="AnimationDuration">0:0:0:0.1</Duration> <Style TargetType="{x:Type local:AnimatedTextBox}"> <Setter Property="AllowDrop" Value="true" /> <Setter Property="Background" Value="#FFF"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush" Value="#222"/> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/> <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:AnimatedTextBox}"> <ControlTemplate.Resources /> <Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0 0 0 2" SnapsToDevicePixels="True"> <StackPanel> <!-- 修改后的LabelTextBlock,嵌入StackPanel --> <TextBlock x:Name="LabelTextBlock" Focusable="False" FontSize="{TemplateBinding LabelFontSize}" Margin="{TemplateBinding LabelMargin}" VerticalAlignment="Center" Foreground="{TemplateBinding BorderBrush}"> <TextBlock.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <TranslateTransform X="0" Y="-2"/> </TransformGroup> </TextBlock.RenderTransform> <TextBlock.Inlines> <InlineUIContainer> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <!-- 绑定原标签文本 --> <Run Text="{TemplateBinding Label}"/> <!-- 可在此添加其他UI元素,比如图标、按钮等 --> <Rectangle Width="8" Height="8" Fill="Red" Margin="4 0 0 0"/> </StackPanel> </InlineUIContainer> </TextBlock.Inlines> </TextBlock> <Grid> <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/> <TextBlock x:Name="HintTextBlock" Margin="5 0 0 0" Focusable="False" Foreground="{DynamicResource SolidColorBrush.Hint}" IsHitTestVisible="False" Opacity="0" Text="{TemplateBinding Hint}"> </TextBlock> </Grid> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsFocused" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <ColorAnimation Duration="{StaticResource ColorDuration}" Storyboard.TargetProperty="BorderBrush.Color" To="{StaticResource Color.Control.Border.Focus}"/> <ColorAnimation Duration="{StaticResource ColorDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="Foreground.Color" To="{StaticResource Color.Control.Border.Focus}"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard> <ColorAnimation Duration="{StaticResource ColorDuration}" Storyboard.TargetProperty="BorderBrush.Color"/> <ColorAnimation Duration="{StaticResource ColorDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="Foreground.Color"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0"/> <Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="false"/> </MultiDataTrigger.Conditions> <MultiDataTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1"/> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1"/> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)" To="15"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.EnterActions> <MultiDataTrigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"/> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"/> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="LabelTextBlock" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(TranslateTransform.Y)"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.ExitActions> </MultiDataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding Path=Text.Length, RelativeSource={RelativeSource Self}}" Value="0" /> <Condition Binding="{Binding Path=IsFocused, RelativeSource={RelativeSource Self}}" Value="true" /> </MultiDataTrigger.Conditions> <MultiDataTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="HintTextBlock" Storyboard.TargetProperty="Opacity" To="1"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.EnterActions> <MultiDataTrigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Duration="{StaticResource AnimationDuration}" Storyboard.TargetName="HintTextBlock" Storyboard.TargetProperty="Opacity"/> </Storyboard> </BeginStoryboard> </MultiDataTrigger.ExitActions> </MultiDataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
修改说明
- 移除了LabelTextBlock的
Text="{TemplateBinding Label}"属性:TextBlock的Text属性仅支持纯文本,无法直接嵌入UI元素 - 添加
<TextBlock.Inlines>节点:通过<InlineUIContainer>包裹<StackPanel>,实现在TextBlock中嵌入任意UI元素 - 保留原标签文本绑定:使用
<Run Text="{TemplateBinding Label}" />维持原有标签文本的绑定逻辑 - 可扩展功能:在StackPanel中可以添加图标、按钮等任意UI元素,示例中添加了一个红色小矩形作为演示
- 动画逻辑不受影响:原有的缩放、位移动画依然会作用于整个LabelTextBlock,保持原有的交互效果
内容的提问来源于stack exchange,提问作者Yaron Binder
相关产品推荐
相关产品推荐

