WPF 菜单栏滚动到顶部后固定的两种方法
Posted dotNET跨平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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交流群哦，关注本公众号后，回复加群，即可获取群二维码。
如果喜欢，点个赞呗~
以上是关于WPF 菜单栏滚动到顶部后固定的两种方法的主要内容，如果未能解决你的问题，请参考以下文章