Question

我正在使用Windows 8 Metro app / RT应用。我对用户控件有特定要求。

<UserControl
    x:Class="controlMagnifier.MagnifierUsercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"

    d:DesignWidth="200">


    <Canvas x:Name="controlCanvas" x:FieldModifier="public"   >
        <Canvas.RenderTransform>
            <RotateTransform>

            </RotateTransform>
        </Canvas.RenderTransform>

        <Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >

                <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
                <Border.Background>
                    <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                </Border.Background>
            </Border>


            <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
            <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
            <Path x:Name="MagnifyTip"  Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />


        </Grid>
    </Canvas>

</UserControl>

请在此处查看video。当我点击屏幕时，用户控件会显示一些动画并随着一些动画消失。如果我点击并按住它持续x秒（或ms）它并将其删除，它会以一些动画结束。我希望用户控件在0.04秒内以完整形状显示，并在我离开手指时消失。我需要类似的动画。不知道它。请帮助

Answer 1

这个答案分为两部分： 1）在Blend中创建动画和 2）轻触触发动画

for 1）见这里：http://www.kirupa.com/net/intro_blend_animation_pg3.htm本教程展示了如何在Blend中为WPF添加简单动画，商店应用动画可以以类似的方式添加。例如，尝试在一段时间内对Opacity控件进行动画处理（例如0.4s）这是我的XAML：

   <Grid PointerPressed="Grid_PointerPressed" Background="Black">
        <Grid.Resources>
            <Storyboard x:Name="animFadeIn">
                <DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
            </Storyboard>
        </Grid.Resources>
        <TextBlock Text="tap anywhere" FontSize="46" />
        <Border x:Name="border" BorderBrush="White" BorderThickness="1" HorizontalAlignment="Left" Height="109" Margin="463,310,0,0" VerticalAlignment="Top" Width="158" Opacity="0" Background="White"/>
    </Grid>

for 2）你可以从PointerPressed事件后面的代码触发动画。注意我已经在上面的XAML中有了处理程序。

  private void Grid_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        animFadeIn.Begin();
    }

XAML动画：如何使用BLEND设置用户控件外观和消失的动画

1 个答案: