XAMLプラットフォームで解像度とかにあわせてStoryboardの動きを変えたいとき、っていうか
ようはC#からStoryboardの要素をいじる方法。
C#かけない某デザイナーがアニメーションの多解像度対応できないーって言ってたので、C#かけばいいよって言っておきました(
ボタンつついたら、四角が右に動くやつ。
初期値。
左のボタン押したらここまで動く。
右のボタン押してから、左のボタン押したらもっとうごく。
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App12" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core" xmlns:Media="using:Microsoft.Xaml.Interactions.Media" x:Class="App12.MainPage" mc:Ignorable="d"> <Page.Resources> <Storyboard x:Name="Storyboard1"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100" x:Name="EasKey"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:1" Value="4"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="48" Margin="152,94,0,0" Stroke="Black" VerticalAlignment="Top" Width="159" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <CompositeTransform/> </Rectangle.RenderTransform> </Rectangle> <Button Content="Start" HorizontalAlignment="Left" Height="59" Margin="62,10,0,0" VerticalAlignment="Top" Width="113"> <Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Click"> <Media:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/> </Core:EventTriggerBehavior> </Interactivity:Interaction.Behaviors> </Button> <Button Content="toLong" HorizontalAlignment="Left" Height="59" Margin="288,10,0,0" VerticalAlignment="Top" Width="113" Click="Button_Click"/> </Grid> </Page>
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation; namespace App12 { /// <summary> /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。 /// </summary> public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) { (this.FindName("EasKey") as EasingDoubleKeyFrame).Value = 300; } } }
要はxamlのEasingDoubleKeyFrameにNameつけて、
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="100" x:Name="EasKey"/>
C#からValueの値を変えてるだけ。
(this.FindName("EasKey") as EasingDoubleKeyFrame).Value = 300;
今回はボタンをつついたタイミングだけど、ロード時とか画面のサイズが変わった時にActualWidthを突っ込むとかすると、いつでも端っこまで動くアニメとかができます。
名前つけたResourceの値を変更するビヘイビアとかあっても便利かもしれませんね。