XAML 为什么当我将鼠标悬停在一个元素上获得投影效果时,元素内的文本会移动?

uxhixvfz  于 2023-10-14  发布在  其他
关注(0)|答案(1)|浏览(95)

我有一个自定义的UserControl,一个包含一个大按钮的网格,里面有一些元素。我添加了一个下拉阴影效果,当鼠标在它上面时,它都工作,但按钮内的文本要么稍微垂直拉伸或垂直移动,很难说,有些人可能会说它变得模糊。这是非常明显和分散注意力,特别是当快速获得鼠标在它的一个和关闭连续。
我想知道是什么原因造成的,以及如何修复它。
我会附上几张照片,他们可能不会做这个问题的正义。without dropshadowwith dropshadow
我试着改变了一些主要的网格属性的基础上,一些模糊的文本和阴影,但没有效果-UseLayoutRoundingSnapsToDevicePixels。我认为问题可能是WidthHeight以某种方式强制渲染到一个受限制的固定大小,但没有任何工作。
我还尝试了TextOptions.TextFormattingMode="Display",这有一点帮助,但没有完全解决这个问题,文本仍然移动。
我把按钮的内容放在一个边框中,就像一些解决方案建议的那样,但是我不能点击按钮,它甚至对移动文本没有帮助。
还能做些什么呢?
编辑:添加复制代码的按钮与触发下拉阴影鼠标。

<Button Background="White" Margin="20,20,0,0" Width="300" Height="200" >
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}">
                <TextBlock FontSize="12" FontWeight="Light" HorizontalAlignment="Center" VerticalAlignment="Center">
                    Text
                </TextBlock>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Effect">
                        <Setter.Value>
                            <DropShadowEffect Direction="270" ShadowDepth="3" BlurRadius="14" Opacity="0.2"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>
jtoj6r0c

jtoj6r0c1#

我发现视觉效果最好的解决方案是在底部创建一个边框,作为主按钮的兄弟。然后我添加了MouseEnter和MouseLeave事件处理程序,分别在其中添加和删除这个额外边框的DropShadow效果。它工作得很好,不会对原始按钮上的文本或图像造成明显的失真。

相关问题