图片切换特过渡效果

由于经常看到各种图片切换效果,感觉用到的地方挺多,整理一下,还是很有必要的,以便于以后查阅,程序主要使用Transitionals.dll来实现切换效果的,

效果如下:

xaml前台代码:

<Window x:Class="SwitchPicture.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<!--定义了切换控件所在的命名空间-->         
xmlns:transitionalsControls="clr-namespace:Transitionals.Controls;assembly=Transitionals"
        Title="MainWindow" Height="388" Width="516" Name="win" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="7*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Canvas Name="canv" Grid.Column="0" Grid.Row="0" Background="AliceBlue">
 <!--定义了一个TransitionElement元素来实现特效--> 
            <transitionalsControls:TransitionElement x:Name="TransitionBox" Transition="{Binding}" Width="350" Height="350"></transitionalsControls:TransitionElement>
        </Canvas>
       
        <Button Grid.Column="1" Grid.Row="0" Height="30" Content="切换效果" Click="Button_Click"></Button>
       
    </Grid>
</Window>

在后台代码中,设置了两幅图片,进行切换:

  /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<Type> transitionTypes = new ObservableCollection<Type>();
        //private ICollectionView view;
        Image img1 = new Image();
        Image img2 = new Image();
        Canvas canv1 = new Canvas();
        Canvas canv2 = new Canvas();
        int m_nCount = 0;
        int m_nIndex = 0;
        private ObjectDataProvider TransitionDS = new ObjectDataProvider();


        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = TransitionDS;

            //设定图片大小
            img1.Width = 350;
            img1.Height = 350;
            img2.Width = 350;
            img2.Height = 350;
            img1.Source = new BitmapImage(new Uri(System.IO.Path.GetFullPath("1.jpg")));
            img2.Source = new BitmapImage(new Uri(System.IO.Path.GetFullPath("2.jpg")));

            canv1.Children.Add(img1);
            canv2.Children.Add(img2);
            LoadTransitions(Assembly.GetAssembly(typeof(Transition)));
        }

        public void LoadTransitions(Assembly assembly)
        {
            foreach (Type type in assembly.GetTypes())
            {
                // Must not already exist
                if (transitionTypes.Contains(type)) { continue; }

                // Must not be abstract.
                if ((typeof(Transition).IsAssignableFrom(type)) && (!type.IsAbstract))
                {
                    transitionTypes.Add(type);
                }
            }
        }

        private void SwapCell()
        {

            if (m_nCount++ % 2 == 0)
            {
                TransitionBox.Content = canv1;
            }
            else
            {
                TransitionBox.Content = canv2;
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            m_nIndex++;
            if (m_nIndex >= transitionTypes.Count)
            {
                m_nIndex = 0;
            }
            Type transitionType = transitionTypes[m_nIndex];
            // Create the instance
            Transition transition = (Transition)Activator.CreateInstance(transitionType);

            // Bind
            TransitionDS.ObjectInstance = transition;
            //App.CurrentApp.PropertyWindow.SelectedObject = transition;

            SwapCell();
        }
    }

 

源码下载

posted on 2013-05-14 14:17  闪闪的幸运星  阅读(1557)  评论(0编辑  收藏  举报