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交流群哦，关注本公众号后，回复加群，即可获取群二维码。

如果喜欢，点个赞呗~