好久沒寫部落格了，因為忙着工作。昨天周末填坑需要做一個上滑清單資料時隐藏導航欄下滑時顯示的效果，下面分享一下我的做法，希望能給你帶來幫助。
uwp - 上滑隐藏導航欄下滑顯示
思路是通過判斷滾動條是往下還是往上滑然後做出相應的顯示隐藏導航欄處理即可；
首先在我們的内容外套一個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點選下載下傳】