全国精品课程建设网站,我国的课程一般通过,视频网站建设技术方案,无忧网站模板最近项目中有这么个需求#xff1a;菜单栏滚动到顶部后固定在顶部#xff0c;专业的名词叫吸顶。。这在移动端还是比较常见的。看看效果#xff1a;下面直接看看代码喽#xff0c;代码不多#xff1a;第一种方法思路#xff1a;写一个和菜单一模一样的菜单#xff0c;放… 最近项目中有这么个需求 菜单栏滚动到顶部后固定在顶部专业的名词叫吸顶。。这在移动端还是比较常见的。看看效果下面直接看看代码喽代码不多第一种方法思路 写一个和菜单一模一样的菜单放在窗口顶部隐藏当菜单滚动到上方时就显示出来反之隐藏。MainWindow1.xaml如下Window x:Classwpfcore.MainWindow1xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:wpfcoremc:IgnorabledTitleMainWindow1 Height450 Width800GridScrollViewer ScrollChangedScrollViewer_ScrollChangedGridGrid.RowDefinitionsRowDefinition Height200/RowDefinition Heightauto/RowDefinition Height*//Grid.RowDefinitionsGrid Grid.Row0 x:NamebannerImage SourceD:\bizhi\国漫\2-9.jpg StretchUniformToFill HorizontalAlignmentCenter VerticalAlignmentCenter/TextBlock HorizontalAlignmentCenter VerticalAlignmentCenter FontSize30 ForegroundWhite Text这是顶部Banner//GridStackPanel Grid.Row1 Panel.ZIndex100 x:Namemenu OrientationHorizontal TextBlock.FontSize18 BackgroundLightBlueTextBlock Text首页 Margin10/TextBlockTextBlock Text编辑 Margin10/TextBlockTextBlock Text视图 Margin10/TextBlockTextBlock Text调试 Margin10/TextBlockTextBlock TextWPF UI Margin10/TextBlock/StackPanelBorder Height1000 Grid.Row22Border.BackgroundLinearGradientBrushGradientStop ColorRed Offset0/GradientStop ColorGreen Offset0.5/GradientStop ColorBlue Offset1//LinearGradientBrush/Border.BackgroundTextBlock HorizontalAlignmentCenter VerticalAlignmentCenter FontSize30 ForegroundWhite Text这是顶部Banner//Border/Grid/ScrollViewerStackPanel x:NametopMenu VerticalAlignmentTop VisibilityHidden OrientationHorizontal TextBlock.FontSize18 BackgroundLightBlueTextBlock Text首页 Margin10/TextBlockTextBlock Text编辑 Margin10/TextBlockTextBlock Text视图 Margin10/TextBlockTextBlock Text调试 Margin10/TextBlockTextBlock TextWPF UI Margin10/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:Classwpfcore.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:wpfcore xmlns:controlshttp://metro.mahapps.com/winfx/xaml/controlsmc:IgnorabledUseLayoutRoundingTrueTitleMainWindow Width600 Height340GridScrollViewer ScrollChangedScrollViewer_ScrollChangedGridGrid.RowDefinitionsRowDefinition Height200/RowDefinition Heightauto/RowDefinition Height*//Grid.RowDefinitionsGrid Grid.Row0 x:NamebannerImage SourceD:\bizhi\国漫\2-9.jpg StretchUniformToFill HorizontalAlignmentCenter VerticalAlignmentCenter/TextBlock HorizontalAlignmentCenter VerticalAlignmentCenter FontSize30 ForegroundWhite Text这是顶部Banner//GridStackPanel Grid.Row1 Panel.ZIndex100 x:Namemenu OrientationHorizontal TextBlock.FontSize18 BackgroundLightBlueStackPanel.RenderTransformTranslateTransform x:NamemenuTranslate Y0.0//StackPanel.RenderTransformTextBlock Text首页 Margin10/TextBlockTextBlock Text编辑 Margin10/TextBlockTextBlock Text视图 Margin10/TextBlockTextBlock Text调试 Margin10/TextBlockTextBlock TextWPF UI Margin10/TextBlock/StackPanelBorder Height1000 Grid.Row22Border.BackgroundLinearGradientBrushGradientStop ColorRed Offset0/GradientStop ColorGreen Offset0.5/GradientStop ColorBlue Offset1//LinearGradientBrush/Border.BackgroundTextBlock HorizontalAlignmentCenter VerticalAlignmentCenter FontSize30 ForegroundWhite Text这是顶部Banner//Border/Grid/ScrollViewerStackPanel x:NametopMenu VerticalAlignmentTop VisibilityHidden OrientationHorizontal TextBlock.FontSize18 BackgroundLightBlueTextBlock Text首页 Margin10/TextBlockTextBlock Text编辑 Margin10/TextBlockTextBlock Text视图 Margin10/TextBlockTextBlock Text调试 Margin10/TextBlockTextBlock TextWPF UI Margin10/TextBlock/StackPanel/Grid
/WindowMainWindow.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交流群哦关注本公众号后回复加群即可获取群二维码。如果喜欢点个赞呗~
