3

コードビハインドからアプリケーションでランダムなタイルフリップアニメーションを実行しようとしています。タイマーは、ラノドムタイルを3秒ごとに反転させる必要があります。そのようなアニメーションの実行方法をインターネットで検索してきましたが、うまくいくものが見つからないようです。

ビューは次のとおりです。1つのコンテナビューには、互いに反転することになっている2つのビューが保持されています。1つは画像で、もう1つのビューには2つのテキストブロックがあります

 //Create single news container
            Canvas container = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Margin = new Thickness(viewX, viewY, 0, 0)
                };

            //Create image container
            Canvas imageContainer = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Background = new SolidColorBrush(Colors.Transparent),
                    Visibility = Visibility.Collapsed
                };

            //Create title and leadtext container
            Canvas textContainer = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Background = GetCategoryColor(news.Cat[0]),
                    Visibility = Visibility.Visible,
                };

            //Set image source and crop image accordingly
            var image = new BitmapImage(new Uri(news.ImageUrl[0]));
            var viewImage = new Image
                {
                    Source = image,
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Stretch = Stretch.UniformToFill
                };

            //Set header view
            TextBlock title = new TextBlock
                {
                    MaxHeight = titleHeight,
                    MaxWidth = titleWidth,
                    Height = titleHeight,
                    Width = titleWidth,
                    Text = news.Title,
                    Margin = new Thickness(titleX, titleY, 0, 0),
                    Padding = new Thickness(framePadding),
                    Foreground = new SolidColorBrush(Colors.White),
                    TextWrapping = TextWrapping.Wrap,
                    FontWeight = FontWeights.Bold,
                    FontSize = 22,
                    FontFamily = new FontFamily("Calibri"),
                    TextTrimming = TextTrimming.WordEllipsis
                };

            //Set ingress view
            TextBlock leadText = new TextBlock
                {
                    MaxHeight = leadTextHeight,
                    MaxWidth = leadTextWidth,
                    Height = leadTextHeight,
                    Width = leadTextWidth,
                    Margin = new Thickness(leadTextX, leadTextY, 0, 0),
                    Padding = new Thickness(framePadding, 0, framePadding, framePadding),
                    Text = news.LeadText,
                    Foreground = new SolidColorBrush(Colors.White),
                    TextWrapping = TextWrapping.Wrap,
                    FontSize = 18,
                    FontFamily = new FontFamily("Calibri"),
                    TextTrimming = TextTrimming.WordEllipsis
                };

            //Add subviews to container and viewlist
            imageContainer.Children.Add(viewImage);
            textContainer.Children.Add(title);
            textContainer.Children.Add(leadText);
            container.Children.Add(imageContainer);
            container.Children.Add(textContainer);
            _viewsList.Add(container);
            //Add single news container to main content canvas
            ContentCanvas.Children.Add(container);

誰かがここで私を助けてくれることを願っています！

4

2 に答える 2

6

もちろん、質問を作成してから数分後に私の質問に対する答えが見つかりました。ここに答えがあります（http://codepaste.net/xyo2ib）

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
 
public class Flipper
{
    public enum Directions { LeftToRight, RightToLeft }
 
    public static void FlipItem(UIElement over, UIElement under, Directions direction = Directions.LeftToRight, int duration = 200)
    {
        // setup visible plane
        over.Visibility = Visibility.Visible;
        over.Projection = new PlaneProjection { CenterOfRotationY = 0 };
 
        // setup hidden plane
        under.Visibility = Visibility.Collapsed;
        under.Projection = new PlaneProjection { CenterOfRotationY = 0 };
 
        // gen storyboard
        var _StoryBoard = new System.Windows.Media.Animation.Storyboard();
        var _Duration = TimeSpan.FromMilliseconds(duration);
 
        // add animation: hide-n-show items
        _StoryBoard.Children.Add(CreateVisibility(_Duration, over, false));
        _StoryBoard.Children.Add(CreateVisibility(_Duration, under, true));
 
        // add animation: rotate items
        if (direction == Directions.LeftToRight)
        {
            _StoryBoard.Children.Add(CreateRotation(_Duration, 0, -90, -180, (PlaneProjection)over.Projection));
            _StoryBoard.Children.Add(CreateRotation(_Duration, 180, 90, 0, (PlaneProjection)under.Projection));
        }
        else if (direction == Directions.RightToLeft)
        {
            _StoryBoard.Children.Add(CreateRotation(_Duration, 0, 90, 180, (PlaneProjection)over.Projection));
            _StoryBoard.Children.Add(CreateRotation(_Duration, -180, -90, 0, (PlaneProjection)under.Projection));
        }
 
        // start animation
        _StoryBoard.Begin();
    }
 
    private static DoubleAnimationUsingKeyFrames CreateRotation(TimeSpan duration, double degreesFrom, double degreesMid, double degreesTo, PlaneProjection projection)
    {
        var _One = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(0), Value = degreesFrom, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn } };
        var _Two = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(duration.Ticks / 2), Value = degreesMid, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn } };
        var _Three = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(duration.Ticks), Value = degreesTo, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut } };
 
        var _Animation = new DoubleAnimationUsingKeyFrames { BeginTime = new TimeSpan(0) };
        _Animation.KeyFrames.Add(_One);
        _Animation.KeyFrames.Add(_Two);
        _Animation.KeyFrames.Add(_Three);
        Storyboard.SetTargetProperty(_Animation, new PropertyPath("RotationY"));
        Storyboard.SetTarget(_Animation, projection);
        return _Animation;
    }
 
    private static ObjectAnimationUsingKeyFrames CreateVisibility(Duration duration, UIElement element, bool show)
    {
        var _One = new DiscreteObjectKeyFrame { KeyTime = new TimeSpan(0), Value = (show ? Visibility.Collapsed : Visibility.Visible) };
        var _Two = new DiscreteObjectKeyFrame { KeyTime = new TimeSpan(duration.TimeSpan.Ticks / 2), Value = (show ? Visibility.Visible : Visibility.Collapsed) };
 
        var _Animation = new ObjectAnimationUsingKeyFrames { BeginTime = new TimeSpan(0) };
        _Animation.KeyFrames.Add(_One);
        _Animation.KeyFrames.Add(_Two);
        Storyboard.SetTargetProperty(_Animation, new PropertyPath("Visibility"));
        Storyboard.SetTarget(_Animation, element);
        return _Animation;
    }
}
于 2012-11-18T18:28:26.130 に答える
1

http://phone.codeplex.com/で入手できるWindowsPhoneToolkitのHubTileコントロールを使用してみませんか。

これを実現するために、Telerik（ http://www.telerik.com/products/windows-phone/overview/all-controls/hubtile.aspx）から入手できるHubTileコントロールを使用することもできます。

于 2012-11-19T02:38:43.670 に答える