wpf - WinRT (C#/XAML) 缩放而不模糊

Question

我已经整理了一个基本动画，它的控制比例从 0.1 到 1.0（x 和 y）。我一直看到的问题是上述控件在最终静止状态之前的“模糊”。

一个例子是我拍的这个屏幕摄像头。

观看屏幕摄像头

我不确定是什么原因造成的。它是您将通过 Blend 生成的默认动画/故事板。

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="UIBorder" >
            <EasingDoubleKeyFrame KeyTime="0" Value="0.2">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseInOut"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BackEase EasingMode="EaseInOut" Amplitude="3"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>

上述控制：

<Grid x:Name="UIBorder" Width="555"  HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform ScaleY="0.2" ScaleX="0.2"/>
            </Grid.RenderTransform>

            <Grid Margin="122,0,0,0" RenderTransformOrigin="0.5,0.5" >
                <Border Background="#FF343434" ManipulationMode="None" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" RenderTransformOrigin="0.5,0.5"  >
                    <Border.RenderTransform>
                        <CompositeTransform/>
                    </Border.RenderTransform>
                </Border>
            </Grid>
            <Image HorizontalAlignment="Left" VerticalAlignment="Center" Source="ms-appx:///Assets/Chrome/LoginSeal.png" Stretch="None"/>
        </Grid>

笔记：

• 我已经在 Windows 8 PC 和 Surface RT 平板电脑上从两个独立来源（即非硬件特定）确认了这种模糊。
• 我试过 BitmapCache 看看它是否有任何变化（变得更糟）。

Answer 1

似乎是一个错误。显然，WinRT 在动画期间自动将 CacheMode 转换为 BitmapCache，并以低比例缓存对象。虽然我无法重现您现在看到的内容，但在为 TextBlocks 的投影属性设置动画时，我在 Windows 8 的一个预发布版本中遇到了类似的问题。我认为可能发生的情况是它使用在开始动画之前使用的控件的最大大小来确定用于 BitmapCache 的 RenderAtScale 属性值（在 WinRT 中不可用，但存在于 Silverlight 或 WPF 中，它似乎是它的一个版本存在于 WinRT 中，只是不向 API 的用户公开）。一种解决方法可能是在加载位图时以某种方式不可见地将位图的 ScaleX/ScaleY 值设置为 1，然后在位图首次显示之前将其设置回 0.2。或者，您可以在动画开始之前将控件的不透明度设置为 0 并缩放为 1，然后在将缩放动画设置为 0.2 后淡入控件。如果您确实需要在动画之前显示小的控件-您可以拥有两个控件副本-一个小的控件在动画开始后立即消失，另一个开始大但不可见（或在 Opacity="0.005" ) 并在动画开始时很快动画到不透明度 1，比例 0.2。

这对我来说很好：

<Page
    x:Class="App76.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App76"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Storyboard
            x:Name="anim"
            SpeedRatio="0.2">
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                Storyboard.TargetName="UIBorder">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0.2">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.4"
                    Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase
                            EasingMode="EaseInOut"
                            Amplitude="3" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                Storyboard.TargetName="UIBorder">
                <EasingDoubleKeyFrame
                    KeyTime="0"
                    Value="0.2">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase
                            EasingMode="EaseInOut" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame
                    KeyTime="0:0:1.4"
                    Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase
                            EasingMode="EaseInOut"
                            Amplitude="3" />
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </Page.Resources>
    <Grid
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid
            x:Name="UIBorder"
            Width="555"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RenderTransformOrigin="0.5,0.5">
            <!--<Grid.CacheMode>
                <BitmapCache
                    />
            </Grid.CacheMode>-->
            <Grid.RenderTransform>
                <CompositeTransform
                    x:Name="ct"
                    ScaleY="0.2"
                    ScaleX="0.2" />
            </Grid.RenderTransform>

            <Grid
                Margin="122,0,0,0"
                RenderTransformOrigin="0.5,0.5">
                <Border
                    Background="#FF343434"
                    ManipulationMode="None"
                    IsDoubleTapEnabled="False"
                    IsHoldingEnabled="False"
                    IsRightTapEnabled="False"
                    IsTapEnabled="False"
                    RenderTransformOrigin="0.5,0.5">
                    <Border.RenderTransform>
                        <CompositeTransform />
                    </Border.RenderTransform>
                </Border>
            </Grid>
            <Image
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Source="ms-appx:///Assets/SplashScreen.png"
                Stretch="None" />
        </Grid>
        <Button
            VerticalAlignment="Bottom"
            HorizontalAlignment="Left"
            Content="TEST"
            Click="ButtonBase_OnClick" />
    </Grid>
</Page>

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App76
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            ct.ScaleX = 1;
            ct.ScaleY = 1;
            this.Loaded += MainPage_Loaded;
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            ct.ScaleX = 0.2;
            ct.ScaleY = 0.2;
        }

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            anim.Begin();
        }
    }
}

Answer 2

为 UIBorder 设置 UseLayoutRounding="True"