WPF如何实现类似iPhone界面切换的效果(转载)

WPF如何实现类似iPhone界面切换的效果 （version .1）

转自：http://blog.csdn.net/fallincloud/article/details/6968764

在论坛上见到有人提出了这个问题（WPF实现点击横向切换界面）

我简单地做了个Sample。

效果图1：

 

效果图2：

设计思路

将这多个界面放入一个Orientation为Horizontal的StackPanel当中，点击Next时，里面所有控件执行TranslteTransform动画。

实现

xaml

 

 

<Window x:Class="WPFNavigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal"
                    x:Name="NavigationPanel"
                    Height="300"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top">

            <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
                  Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
                  Background="Blue" >
                <TextBlock FontSize="36">Page1</TextBlock>
            </Grid>
            <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
                  Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
                  Background="Violet">
                <TextBlock FontSize="36">Page2</TextBlock>
            </Grid>
            <Grid Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType={x:Type Window}}, Path=ActualWidth }"
                  Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"
                  Background="Purple" >
                <TextBlock FontSize="36">Page3</TextBlock>
            </Grid>
        </StackPanel>

        <StackPanel Grid.Row="1"  Orientation="Horizontal" >
            <Button Content="Previous" x:Name="ButtonPreviousPage" Click="ButtonPreviousPage_Click"></Button>
            <Button Content="Next" x:Name="ButtonNextPage" Click="ButtonNextPage_Click"></Button>
        </StackPanel>
    </Grid>
</Window>

 

 

cs中

 

 

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{

    private static readonly double COUNT_PAGE = 3;
    private TranslateTransform NavigationPanelTranslateTransform;

    public MainWindow()
    {
        InitializeComponent();

        NavigationPanelTranslateTransform = new TranslateTransform();

        this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        foreach (FrameworkElement fe in NavigationPanel.Children)
        {
            fe.RenderTransform = NavigationPanelTranslateTransform;
        }

        DeterminButtonStates();
    }

    private void DeterminButtonStates()
    {
        double currentTranX = NavigationPanelTranslateTransform.X;

        if (currentTranX >= 0)
        {
            ButtonPreviousPage.IsEnabled = false;
        }
        else if (currentTranX <= -(COUNT_PAGE - 1) * this.ActualWidth)
        {
            ButtonNextPage.IsEnabled = false;
        }
        else
        {
            ButtonPreviousPage.IsEnabled = true;
            ButtonNextPage.IsEnabled = true;
        }
    }

    private void ButtonPreviousPage_Click(object sender, RoutedEventArgs e)
    {
        double currentTranX = NavigationPanelTranslateTransform.X;

        DoubleAnimation da = new DoubleAnimation(currentTranX, currentTranX+this.ActualWidth, TimeSpan.FromMilliseconds(250));
        da.Completed += (o1, e1) =>
            {
                DeterminButtonStates();
            };

        NavigationPanelTranslateTransform.BeginAnimation(TranslateTransform.XProperty, da);
    }

    private void ButtonNextPage_Click(object sender, RoutedEventArgs e)
    {
        double currentTranX = NavigationPanelTranslateTransform.X;

        DoubleAnimation da = new DoubleAnimation(currentTranX, currentTranX - this.ActualWidth, TimeSpan.FromMilliseconds(250));
        da.Completed += (o1, e1) =>
        {
            DeterminButtonStates();
        };

        NavigationPanelTranslateTransform.BeginAnimation(TranslateTransform.XProperty, da);
    }
}