Question

我正在使用下面的模板来呈现一个半透明的标签＆＃39;显示某些数据。正如您所看到的那样，显示屏是椭圆形的（我为此使用Border.CornerRadius）。我现在正试图在基于鼠标输入/存在时弹出并收缩标签。这是有效的，但问题是，当弹出时，显示的文本显示为rectanble，而不是elipse ...而且似乎文本本身被展开，边框不是，导致一些文本被切断。总结一下......我怎样才能让弹出也显示为一个椭圆而不是删掉任何文字？

    <DataTemplate x:Key="LabelTmplt" >
    <Border Name="myBorder" BorderThickness="0" CornerRadius="9" RenderTransformOrigin="0.5,0.5" >
        <Border.Background>
            <SolidColorBrush Opacity=".3" Color="Red"/>
        </Border.Background>
        <TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5" Margin="0,0,0,0"/>
        <Border.RenderTransform>
            <ScaleTransform />
        </Border.RenderTransform>
        <Border.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard TargetName="myBorder">
                        <DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                            <DoubleAnimation.EasingFunction>
                                <BackEase Amplitude="2" EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Duration="0:0:0.25" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                            <DoubleAnimation.EasingFunction>
                                <BackEase Amplitude="2" EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard TargetName="myBorder">
                        <DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Duration="0:0:0.5" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                            <DoubleAnimation.EasingFunction>
                                <CircleEase EasingMode="EaseOut"/>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>                
        </Border.Triggers>
    </Border>
</DataTemplate>

Answer 1

如果您不介意文本实际上正在缩小并使用弹出窗口增长，您可以将其放在ViewBox中

    <Viewbox Margin="0,0,0,0">
        <TextBlock Text="{Binding Path=Text}" Padding="5,1,5,1.5"/>
    </Viewbox>

自定义边框与scaletransform无法正常工作

1 个答案: