0

我正在用 C#/XAML 设计一个 Windows 8.1 应用程序。我正在尝试复制在 Windows Phone 上发现的倾斜效果。我用 ScaleTransform 和 PointerDownThemeAnimation 都试过了。

然而，规模效应似乎在 Y 方向上被破坏了。它在页面上垂直向下推动 UI 元素，而不是仅仅将其缩小。我在 8.1 之前的 Windows 8 应用程序中使用过缩放，但没有遇到此问题。

即使是陌生人在设计视图中也可以正常工作。我尝试将 RenderTransformOrigin 设置为“0.5、0.5”。以下是我将文本块的比例设置为 0.5 时发生的情况的示例： 在此处输入图像描述

您认为问题是什么以及如何解决？谢谢

编辑：这是大部分 XAML：

<Grid Height="{Binding PalettePanelHeight}">
                <TextBlock Text="Palettes" FontSize="70" Margin="24,22,0,0"/>
                <StackPanel Orientation="Horizontal" Name="typePanel" HorizontalAlignment="Right" Margin="0,52,24,0">
                    <StackPanel.Resources>
                        <Style TargetType="TextBlock">
                            <Setter Property="Margin" Value="0,0,24,0"/>
                            <Setter Property="FontWeight" Value="Light"/>
                            <Setter Property="FontSize" Value="28"/>
                        </Style>
                    </StackPanel.Resources>
                    <TextBlock Text="Newest" Opacity="1" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="newest_Tapped" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                    <TextBlock Text="Most popular" Opacity="0.45" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="popular_Tapped" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <ScaleTransform/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                    <TextBlock Text="Highest rated" Opacity="0.45" PointerPressed="on_PointerDown" PointerExited="on_PointerUp" PointerReleased="on_PointerUp" Tapped="rating_Tapped" RenderTransformOrigin="0.5,0.5">
                        <TextBlock.RenderTransform>
                            <ScaleTransform/>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </StackPanel>

示例图像中显示了比例为 0.5 的“最新”文本块。'PalettePanelHeight' 只是代码中的 Window.Current.Bounds.Height。

4

1 回答 1

0

如果要保留ScaleTransform，请使用 VerticalAlignment 确保文本位于顶部 

<TextBlock VerticalAlignment="Top" Text="Newest" Opacity="1" RenderTransformOrigin="0.5,0.5">
                    <TextBlock.RenderTransform>
                        <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
                    </TextBlock.RenderTransform>
                </TextBlock>

如果您想像其他标题一样保留它，请删除 scaleTrandform 并使其：- 

 <TextBlock VerticalAlignment="Top" Text="Newest" Opacity="1" RenderTransformOrigin="0.5,0.5">
</TextBlock>
于 2015-03-25T13:46:35.880 回答