uwp - 上滑隱藏導航欄下滑顯示

阿新 • • 發佈：2018-11-07

好久沒寫部落格了，因為忙著工作。昨天週末填坑需要做一個上滑列表資料時隱藏導航欄下滑時顯示的效果，下面分享一下我的做法，希望能給你帶來幫助。

思路是通過判斷滾動條是往下還是往上滑然後做出相應的顯示隱藏導航欄處理即可；

首先在我們的內容外套一個ScrollViewer，然後在ScrollViewer的事件ViewChanged中做判斷。

我們新建一個page，佈局出列表（包含模擬測試用的資料）、導航欄，程式碼如下：

  1   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush} 
">
  2         <ScrollViewer x:Name="sv" ViewChanged="sv_ViewChanged">
  3             <!--模擬資料-->
  4             <StackPanel>
  5                 <Grid Height="50" Margin="0,10,0,0" >
  6                     <Grid.Background>
  7                         <LinearGradientBrush  
EndPoint="0.5,1" StartPoint="0.5,0">
  8                             <LinearGradientBrush.RelativeTransform>
  9                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 10                             </LinearGradientBrush.RelativeTransform>
 11 
                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 12                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 13                         </LinearGradientBrush>
 14                     </Grid.Background>
 15                     <TextBlock Text="模擬資料1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 16                 </Grid>
 17                 <Grid Height="50" Margin="0,10,0,0" >
 18                     <Grid.Background>
 19                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 20                             <LinearGradientBrush.RelativeTransform>
 21                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 22                             </LinearGradientBrush.RelativeTransform>
 23                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 24                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 25                         </LinearGradientBrush>
 26                     </Grid.Background>
 27                     <TextBlock Text="模擬資料2" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 28                 </Grid>
 29                 <Grid Height="50" Margin="0,10,0,0" >
 30                     <Grid.Background>
 31                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 32                             <LinearGradientBrush.RelativeTransform>
 33                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 34                             </LinearGradientBrush.RelativeTransform>
 35                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 36                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 37                         </LinearGradientBrush>
 38                     </Grid.Background>
 39                     <TextBlock Text="模擬資料3" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 40                 </Grid>
 41                 <Grid Height="50" Margin="0,10,0,0" >
 42                     <Grid.Background>
 43                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 44                             <LinearGradientBrush.RelativeTransform>
 45                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 46                             </LinearGradientBrush.RelativeTransform>
 47                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 48                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 49                         </LinearGradientBrush>
 50                     </Grid.Background>
 51                     <TextBlock Text="模擬資料4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 52                 </Grid>
 53                 <Grid Height="50" Margin="0,10,0,0" >
 54                     <Grid.Background>
 55                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 56                             <LinearGradientBrush.RelativeTransform>
 57                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 58                             </LinearGradientBrush.RelativeTransform>
 59                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 60                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 61                         </LinearGradientBrush>
 62                     </Grid.Background>
 63                     <TextBlock Text="模擬資料5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 64                 </Grid>
 65                 <Grid Height="50" Margin="0,10,0,0" >
 66                     <Grid.Background>
 67                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 68                             <LinearGradientBrush.RelativeTransform>
 69                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 70                             </LinearGradientBrush.RelativeTransform>
 71                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 72                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 73                         </LinearGradientBrush>
 74                     </Grid.Background>
 75                     <TextBlock Text="模擬資料6" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 76                 </Grid>
 77                 <Grid Height="50" Margin="0,10,0,0" >
 78                     <Grid.Background>
 79                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 80                             <LinearGradientBrush.RelativeTransform>
 81                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 82                             </LinearGradientBrush.RelativeTransform>
 83                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 84                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 85                         </LinearGradientBrush>
 86                     </Grid.Background>
 87                     <TextBlock Text="模擬資料7" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
 88                 </Grid>
 89                 <Grid Height="50" Margin="0,10,0,0" >
 90                     <Grid.Background>
 91                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 92                             <LinearGradientBrush.RelativeTransform>
 93                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
 94                             </LinearGradientBrush.RelativeTransform>
 95                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
 96                             <GradientStop Color="#FFF7AFED" Offset="1"/>
 97                         </LinearGradientBrush>
 98                     </Grid.Background>
 99                     <TextBlock Text="模擬資料8" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
100                 </Grid>
101                 <Grid Height="50" Margin="0,10,0,0" >
102                     <Grid.Background>
103                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
104                             <LinearGradientBrush.RelativeTransform>
105                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
106                             </LinearGradientBrush.RelativeTransform>
107                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
108                             <GradientStop Color="#FFF7AFED" Offset="1"/>
109                         </LinearGradientBrush>
110                     </Grid.Background>
111                     <TextBlock Text="模擬資料9" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
112                 </Grid>
113                 <Grid Height="50" Margin="0,10,0,0" >
114                     <Grid.Background>
115                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
116                             <LinearGradientBrush.RelativeTransform>
117                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
118                             </LinearGradientBrush.RelativeTransform>
119                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
120                             <GradientStop Color="#FFF7AFED" Offset="1"/>
121                         </LinearGradientBrush>
122                     </Grid.Background>
123                     <TextBlock Text="模擬資料10" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
124                 </Grid>
125                 <Grid Height="50" Margin="0,10,0,0" >
126                     <Grid.Background>
127                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
128                             <LinearGradientBrush.RelativeTransform>
129                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
130                             </LinearGradientBrush.RelativeTransform>
131                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
132                             <GradientStop Color="#FFF7AFED" Offset="1"/>
133                         </LinearGradientBrush>
134                     </Grid.Background>
135                     <TextBlock Text="模擬資料11" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
136                 </Grid>
137                 <Grid Height="50" Margin="0,10,0,0" >
138                     <Grid.Background>
139                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
140                             <LinearGradientBrush.RelativeTransform>
141                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
142                             </LinearGradientBrush.RelativeTransform>
143                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
144                             <GradientStop Color="#FFF7AFED" Offset="1"/>
145                         </LinearGradientBrush>
146                     </Grid.Background>
147                     <TextBlock Text="模擬資料12" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
148                 </Grid>
149                 <Grid Height="50" Margin="0,10,0,0" >
150                     <Grid.Background>
151                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
152                             <LinearGradientBrush.RelativeTransform>
153                                 <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
154                             </LinearGradientBrush.RelativeTransform>
155                             <GradientStop Color="#FF3FBBD6" Offset="0"/>
156                             <GradientStop Color="#FFF7AFED" Offset="1"/>
157                         </LinearGradientBrush>
158                     </Grid.Background>
159                     <TextBlock Text="模擬資料13" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
160                 </Grid>
161             </StackPanel>
162         </ScrollViewer>
163 
164 
165 
166         <!--導航欄-->
167         <Grid x:Name="bar" Height="50" Background="#FFB05AEC" VerticalAlignment="Bottom" Canvas.ZIndex="2" Opacity="0.9">
168             <TextBlock Text="導航欄" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"></TextBlock>
169         </Grid>
170     </Grid>

MainPage.xaml

以上程式碼的效果是這樣的：

然後轉到mainpage的後臺，程式碼如下：

 1  //滾動條位置變數
 2         double scrlocation = 0;
 3         //導航欄當前顯示狀態（這個是為了減少不必要的開銷，因為我做的是動畫隱藏顯示效果如果不用一個變數來記錄當前導航欄狀態的會重複執行隱藏或顯示）
 4         bool isshowbmbar = true;
 5         public MainPage()
 6         {
 7             this.InitializeComponent();
 8             
 9         }
10 
11         private void sv_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
12         {
13             if (sv.VerticalOffset != scrlocation)
14             {
15                 if (sv.VerticalOffset > scrlocation)
16                 {
17                     //滾動條當前位置大於儲存的變數值時代表往下滑，隱藏底部欄
18                     //隱藏
19                     if (isshowbmbar)
20                     {
21                         //這裡為了簡潔易懂就不做動畫隱藏效果，直接用透明度進行隱藏。
22                         bar.Opacity = 0;
23                         isshowbmbar = false;
24                         
25                     }
26                 }
27                 else
28                 {
29                     //顯示
30                     if (isshowbmbar == false)
31                     {
32                         bar.Opacity = 1;
33                         isshowbmbar = true;
34                        
35                     }
36 
37                 }
38 
39             }
40             scrlocation = sv.VerticalOffset;
41         }

mainpage.xaml.cs

程式碼中也寫了非常詳細的註釋了，這裡在簡單說幾句，我用一個變數scrlocation來記錄滾動停止後的滾動條所在位置，然後在列表滾動時也就是viewchanged事件發生時獲取滾動條的位置，只要判斷viewchanged事件發生時獲取滾動條的位置是大於scrlocation還是小於就可以知道使用者是往上滑還是往下滑了。這裡還有一個變數isshowbmbar是記錄當前導航欄的顯示狀態，因為滑動列表的時候viewchanged事件會不停地觸發，如果不用這個變數記錄並且判斷的話會導致導航欄不停地顯示或隱藏，如果你只是單純用透明度來隱藏或顯示的話效能影響上來說不算太大，但是如果你像我用動畫來做隱藏顯示效果的話會加大這個開銷或者出現動畫顯示不正常的情況。

以上程式碼執行起來的效果如下（沒有動畫效果看起來不是很好看，懶得寫懶啊大家自己加上就和我第一張效果圖一樣了。）：

希望我的思路能給你帶來幫助，謝謝。如果寫得不好見諒。

我把這個demo傳上來，大家可以自己執行。（in vs2017rc .net4.6）

【上滑隱藏顯示demo.zip點選下載】

uwp - 上滑隱藏導航欄下滑顯示

uwp - 上滑隱藏導航欄下滑顯示

仿知乎主頁，上滑隱藏NavigationBar，下滑顯示

Android 浮動按鈕+上滑隱藏按鈕+下滑顯示按鈕

iOS側滑返回到隱藏導航欄的VC，導航欄會閃現一次

隱藏導航欄時新增在self.view上的Tableview位置產生20個單位的誤差

VUE 爬坑之旅-- 用 Vuex 狀態管理來控制底部導航欄的顯示隱藏

iOS隱藏導航欄返回上一介面的back

[RK3288][Android6.0] 除錯筆記 --- 動態顯示和隱藏導航欄(廣播方式)

iOS開發-隱藏導航欄線

在UWP中頁面滑動導航欄置頂

Android bc信用盤搭建自定義behavior 實現上滑隱藏底部view

iOS 隱藏導航欄後，UITableView向下偏移狀態列高度筆記

隱藏導航欄底部橫線隱藏navigationBar底部的線

Vue中導航欄的顯示開關控制

iOS 隱藏導航欄後，UITableView向下偏移狀態列高度筆記

Android9.0 完全隱藏導航欄、狀態列

[Android6.0][RK3399] 隱藏導航欄或狀態列

AppBarLayout+TabLayout+RecyclerView實現滑動隱藏導航欄。

單獨的某個頁面隱藏導航欄下面的黑線

phpcms 迴圈一級導航欄，顯示所有文章，並帶有二級導航欄標題

uwp - 上滑隱藏導航欄下滑顯示

相關推薦