Su Codeplex è apparso un interessante progetto chiamato Transitionals.
Il progetto consiste in una libreria che permette di applicare degli effetti di transizione da uno usercontrol all'altro il tutto semplicemente modificando il valore della proprietà Content dell'oggetto contenitore TransitionElement.
Ecco un esempio di utilizzo:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:loc="clr-namespace:Transitions"
    xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"
    xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals"
    x:Class="Transitions.Window1"
    x:Name="Window"
    Title="Transitions"
    Width="640" Height="480">
    <Window.Resources>
        <loc:TransitionContent x:Key="uc1" ImageUri="giulia1.jpg" />
        <loc:TransitionContent x:Key="uc2" ImageUri="giulia2.jpg" />
    </Window.Resources>
    <Grid x:Name="LayoutRoot">
        <Button HorizontalAlignment="Left" Margin="22,0,0,21" x:Name="btnA" VerticalAlignment="Bottom" Width="101" Height="40" Content="A" Click="btnA_Click"/>
        <Button HorizontalAlignment="Left" Margin="154,0,0,21" VerticalAlignment="Bottom" Width="101" Height="40" Content="B" x:Name="btnB" Click="btnB_Click"/>
        <Border Margin="8,8,8,91" BorderBrush="#FF432BDF" BorderThickness="1,1,1,1">
            <transc:TransitionElement x:Name="tc">
                <transc:TransitionElement.Transition>
                    <transt:RotateTransition Angle="45" />
                </transc:TransitionElement.Transition>
            </transc:TransitionElement>
        </Border>
    </Grid>
</Window>


La finestra contiene nelle risorse due istanze di uno usecontrol chiamato TransitionContent composto da una semplice immagine e da una proprietà ImageUri

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="Transitions.TransitionContent"
    x:Name="UserControl"
    d:DesignWidth="78" d:DesignHeight="56">
    <Grid x:Name="LayoutRoot">
        <Border>
            <Image x:Name="img1"/>
        </Border>
    </Grid>
</UserControl>

 

namespace Transitions
{
    public partial class TransitionContent
    {
        public static readonly DependencyProperty ImageUriProperty =
                DependencyProperty.Register("ImageUri", typeof(string), typeof(TransitionContent),
                        new FrameworkPropertyMetadata(null,new PropertyChangedCallback(OnImageUriChanged)));

        public string ImageUri
        {
            get { return (string)GetValue(ImageUriProperty); }
            set { SetValue(ImageUriProperty, value); }
        }

        private static void OnImageUriChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Uri uri = new Uri((string)e.NewValue, UriKind.Relative);
            ((TransitionContent)d).img1.Source = new BitmapImage(uri);
        }      


        public TransitionContent()
        {
            this.InitializeComponent();
        }
    }
}

A questo punto i due pulsanti non fanno altro che assegnare alla proprietà Content di TransitionElement le diverse istanze dello UserControl

public partial class Window1 : Window
{
    public Window1()
    {
        this.InitializeComponent();            
    }

    private void btnA_Click (object sender, RoutedEventArgs e)
    {
        TransitionContent newContent = this.FindResource("uc1") as TransitionContent;
        tc.Content = newContent;
    }

    private void btnB_Click (object sender, RoutedEventArgs e)
    {
        TransitionContent newContent = this.FindResource("uc2") as TransitionContent;
        tc.Content = newContent;
    }
}


Premendo i pulsanti si ha il passaggio da un immagine all'altra con l'effetto rotazione, ma le possibilità offerte dalla libreria non si fermano qui, le transizioni sono parecchie e nella guida sono elencate tutte le varie alternative (es: Transizioni random)
Leggera, semplice da usare: mi piace! smile_regular

Technorati Tags: ,