最近項目中有這么個需求：

????菜單欄滾動到頂部后固定在頂部，專業的名詞叫吸頂。。這在移動端還是比較常見的。

看看效果：

下面直接看看代碼嘍，代碼不多：

第一種方法思路：

????寫一個和菜單一模一樣的菜單，放在窗口頂部隱藏，當菜單滾動到上方時，就顯示出來，反之隱藏。

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交流群哦，關注本公眾號后，回復加群，即可獲取群二維碼。

如果喜歡，點個贊唄~

總結

以上是生活随笔為你收集整理的WPF 菜单栏滚动到顶部后固定的两种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。