在实际项目开发中，我们可能会遇到点击按钮实现切换多个页面的效果，这个时候我们就可以将这多个界面放入一个Orientation为Horizontal的StackPanel当中，点击下一页的时后，里面所有控件执行TranslteTransform动画。这样就可以实现左右横向切换的效果了。下面做了一个demo去实现这个功能。

XML的代码：

 <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="*"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal"   

                    x:Name="NavigationPanel"  

                    Height="350"   

                    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="Red" >

                <TextBlock FontSize="36">页面1</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="Green">

                <TextBlock FontSize="36">页面2</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="Yellow" >

                <TextBlock FontSize="36">页面3</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="Black" >

                <TextBlock FontSize="36">页面4</TextBlock>

            </Grid>

        </StackPanel>

        <StackPanel Grid.Row="1"  Orientation="Horizontal" >

            <Button Content="上一页" x:Name="ButtonPreviousPage" Click="ButtonPreviousPage_Click"></Button>

            <Button Content="下一页" x:Name="ButtonNextPage" Click="ButtonNextPage_Click"></Button>

        </StackPanel>

</Grid>

 

CS代码：

 private static readonly double COUNT_PAGE = 4;

        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);

        }

}

效果1：

效果2：

本文地址：https://blog.csdn.net/weixin_44541250/article/details/112892166