Question

我正在创建一个Windows Phone 7应用程序，因为我创建了图像幻灯片，图像随时间间隔而变化，但我想在这里给它们滑动效果是我的代码：

xaml代码：

<Grid Background="Red" HorizontalAlignment="Left" Height="242" 
                Margin="10,12,0,0"  
                VerticalAlignment="Top" Width="458">      
    <Image x:Name="myImg" Stretch="UniformToFill" Margin="0,0,0,28"/>
</Grid>

.cs代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Microsoft.Phone.Controls;
using System.Windows.Threading;
using System.Windows.Navigation;
namespace test
{
    public partial class MainPage : PhoneApplicationPage
    {
        private DispatcherTimer tmr = new DispatcherTimer();
        private List<string> images = new List<string>();
        private List<string> texts = new List<string>();
              private int imageIndex = 0;
        private int textIndex = 0;

        public MainPage()
        {

            InitializeComponent();


            Loaded += new RoutedEventHandler(MainPage_Loaded);
            //FirstStoryBoard.Begin();
        }


        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            tmr.Interval = TimeSpan.FromSeconds(2);
            tmr.Tick += new EventHandler(tmr_Tick);

            LoadImages();
             LoadText();


            ShowNextImage();
        }

        private void LoadImages()
        {
            images.Add("/img/11.jpg");
            images.Add("/img/ee.jpg");
            images.Add("/img/images.jpg");
            images.Add("/img/20130820080826_F2.jpg");
        }
        private void LoadText()
        {
            texts.Add("image 1");
            texts.Add("image2");
            texts.Add("image3");
            texts.Add("image3");
        }
        private void ShowNextImage()
        {
            var bi = new BitmapImage(new Uri(images[imageIndex], UriKind.Relative));

            myImg.Source = bi;

            imageIndex = (imageIndex + 1) % images.Count;
        }
        private void ShowNextText()
        {
            var bi = new BitmapImage(new Uri(images[imageIndex], UriKind.Relative));
            //var ti = new BitmapSource(new Uri(texts[textIndex], UriKind.Relative));
            var ti = texts[textIndex];
            mytext.Text = ti;
            //mytext.Source = ti;
             textIndex = (textIndex + 1) % texts.Count;
        }


        void tmr_Tick(object sender, EventArgs e)
        {
            ShowNextImage();
            ShowNextText();
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            if (!tmr.IsEnabled)
            {
                tmr.Start();
            }

            base.OnNavigatedTo(e);
        }

        protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
        {
            tmr.Stop();

            base.OnNavigatedFrom(e);
        }

Answer 1

这可能会对你有帮助。

Complete Code Snippet

由于图像是UIElement，您可以通过以下方式进行动画处理。

**For Page Transistion** 
Here's what it all looks like in XAML:

<Page>

<toolkit:TransitionService.NavigationInTransition>

    <toolkit:NavigationInTransition>

        <toolkit:NavigationInTransition.Backward>

            <toolkit:TurnstileTransition Mode="BackwardIn"/>

        </toolkit:NavigationInTransition.Backward>

        <toolkit:NavigationInTransition.Forward>

            <toolkit:TurnstileTransition Mode="ForwardIn"/>

        </toolkit:NavigationInTransition.Forward>

    </toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

    <toolkit:NavigationOutTransition>

        <toolkit:NavigationOutTransition.Backward>

            <toolkit:TurnstileTransition Mode="BackwardOut"/>

        </toolkit:NavigationOutTransition.Backward>

        <toolkit:NavigationOutTransition.Forward>

            <toolkit:TurnstileTransition Mode="ForwardOut"/>

        </toolkit:NavigationOutTransition.Forward>

    </toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

</Page>

UIElement Transition

由于TransitionElement.GetTransition采用UIElement，您可以使用内置的转换族来为任意UIElements进行转换。以下是如何滑动按钮：

Button button = ...

SlideTransition slideTransition = new SlideTransition { Mode = SlideTransitionMode.SlideUpFadeIn };

ITransition transition = slideTransition.GetTransition(button);

transition.Completed += delegate { transition.Stop(); };

transition.Begin();

图片转换

myImg =new BitMapImage();
SlideTransition slideTransition2 = new SlideTransition { Mode = SlideTransitionMode.SlideUpFadeIn };
ITransition trans=slideTransition2.GetTransition(myImg);
trans.Completed +=delegate (transition.Stop();};
trans.Begin();

图像加载和淡出时执行;

See Example of page Transition

注意*过渡适用于所有UIElement

Windows Phone 7中网格中滑动图像的过渡效果

1 个答案: