WPF 菜单栏滚动到顶部后固定的两种方法

最近项目中有这么个需求：

菜单栏滚动到顶部后固定在顶部，专业的名词叫吸顶。。这在移动端还是比较常见的。

看看效果：

下面直接看看代码喽，代码不多：

第一种方法思路：

写一个和菜单一模一样的菜单，放在窗口顶部隐藏，当菜单滚动到上方时，就显示出来，反之隐藏。

MainWindow1.xaml如下：

<Window x:Class="wpfcore.MainWindow1"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"xmlns:local="clr-namespace:wpfcore"mc:Ignorable="d"Title="MainWindow1" Height="450" Width="800"><Grid><ScrollViewer ScrollChanged="ScrollViewer_ScrollChanged"><Grid><Grid.RowDefinitions><RowDefinition Height="200"/><RowDefinition Height="auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid Grid.Row="0" x:Name="banner"><Image Source="D:\bizhi\国漫\2-9.jpg" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="这是顶部Banner"/></Grid><StackPanel Grid.Row="1" Panel.ZIndex="100" x:Name="menu" Orientation="Horizontal" TextBlock.FontSize="18" Background="LightBlue"><TextBlock Text="首页" Margin="10"></TextBlock><TextBlock Text="编辑" Margin="10"></TextBlock><TextBlock Text="视图" Margin="10"></TextBlock><TextBlock Text="调试" Margin="10"></TextBlock><TextBlock Text="WPF UI" Margin="10"></TextBlock></StackPanel><Border Height="1000" Grid.Row="22"><Border.Background><LinearGradientBrush><GradientStop Color="Red" Offset="0"/><GradientStop Color="Green" Offset="0.5"/><GradientStop Color="Blue" Offset="1"/></LinearGradientBrush></Border.Background><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="这是顶部Banner"/></Border></Grid></ScrollViewer><StackPanel x:Name="topMenu" VerticalAlignment="Top" Visibility="Hidden" Orientation="Horizontal" TextBlock.FontSize="18" Background="LightBlue"><TextBlock Text="首页" Margin="10"></TextBlock><TextBlock Text="编辑" Margin="10"></TextBlock><TextBlock Text="视图" Margin="10"></TextBlock><TextBlock Text="调试" Margin="10"></TextBlock><TextBlock Text="WPF UI" Margin="10"></TextBlock></StackPanel></Grid>
</Window>

MainWindow1.cs代码：

using System.Windows;namespace wpfcore
{public partial class MainWindow1 : Window{public MainWindow1(){InitializeComponent();}private void ScrollViewer_ScrollChanged(object sender, System.Windows.Controls.ScrollChangedEventArgs e){if (e.VerticalOffset > banner.ActualHeight){topMenu.Visibility = Visibility.Visible;}else{topMenu.Visibility = Visibility.Hidden;}}}
}

---------------分隔线------------------

第二种方法：

在菜单栏内添加RenderTransform。当菜单滚动到上方时，就设置TranslateTransform.YProperty 达到同样效果

MainWindow.xaml代码如下：

<Window x:Class="wpfcore.MainWindow"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"xmlns:local="clr-namespace:wpfcore" xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"mc:Ignorable="d"UseLayoutRounding="True"Title="MainWindow" Width="600" Height="340"><Grid><ScrollViewer ScrollChanged="ScrollViewer_ScrollChanged"><Grid><Grid.RowDefinitions><RowDefinition Height="200"/><RowDefinition Height="auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid Grid.Row="0" x:Name="banner"><Image Source="D:\bizhi\国漫\2-9.jpg" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center"/><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="这是顶部Banner"/></Grid><StackPanel Grid.Row="1" Panel.ZIndex="100" x:Name="menu" Orientation="Horizontal" TextBlock.FontSize="18" Background="LightBlue"><StackPanel.RenderTransform><TranslateTransform x:Name="menuTranslate" Y="0.0"/></StackPanel.RenderTransform><TextBlock Text="首页" Margin="10"></TextBlock><TextBlock Text="编辑" Margin="10"></TextBlock><TextBlock Text="视图" Margin="10"></TextBlock><TextBlock Text="调试" Margin="10"></TextBlock><TextBlock Text="WPF UI" Margin="10"></TextBlock></StackPanel><Border Height="1000" Grid.Row="22"><Border.Background><LinearGradientBrush><GradientStop Color="Red" Offset="0"/><GradientStop Color="Green" Offset="0.5"/><GradientStop Color="Blue" Offset="1"/></LinearGradientBrush></Border.Background><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" Foreground="White" Text="这是顶部Banner"/></Border></Grid></ScrollViewer><StackPanel x:Name="topMenu" VerticalAlignment="Top" Visibility="Hidden" Orientation="Horizontal" TextBlock.FontSize="18" Background="LightBlue"><TextBlock Text="首页" Margin="10"></TextBlock><TextBlock Text="编辑" Margin="10"></TextBlock><TextBlock Text="视图" Margin="10"></TextBlock><TextBlock Text="调试" Margin="10"></TextBlock><TextBlock Text="WPF UI" Margin="10"></TextBlock></StackPanel></Grid>
</Window>

MainWindow.cs代码：

using System.Windows;
using System.Windows.Media;namespace wpfcore
{public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void ScrollViewer_ScrollChanged(object sender, System.Windows.Controls.ScrollChangedEventArgs e){menuTranslate.SetValue(TranslateTransform.YProperty, e.VerticalOffset);if (e.VerticalOffset > banner.ActualHeight){menuTranslate.SetValue(TranslateTransform.YProperty, e.VerticalOffset-banner.ActualHeight);}else{menuTranslate.SetValue(TranslateTransform.YProperty, 0.0);}}}
}

你还有更好的方法吗？

欢迎加入WPF UI交流群哦，关注本公众号后，回复加群，即可获取群二维码。