Wpf实现横向纵向切换页面
在实际项目开发中，我们可能会遇到点击按钮实现切换多个页面的效果，这个时候我们就可以将这多个界面放入一个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