UWP 实现Tab导航首页
发布时间:2017-06-19 00:00:22
先看效果:这个是用Pivot来实现1、自定义Pivot的样式,使用Blend工具生成模板,将HeaderTemplate的布局都隐藏 1 <Style x:Key="PivotStyle1" TargetType="Pivot"> ...
先看效果:
这个是用Pivot来实现
1、自定义Pivot的样式,使用Blend工具生成模板,将HeaderTemplate的布局都隐藏
1 <Style x:Key="PivotStyle1" TargetType="Pivot"> 2 <Setter Property="Margin" Value="0"/> 3 <Setter Property="Padding" Value="0"/> 4 <Setter Property="Background" Value="{ThemeResource PivotBackground}"/> 5 <Setter Property="IsTabStop" Value="False"/> 6 <Setter Property="ItemsPanel"> 7 <Setter.Value> 8 <ItemsPanelTemplate> 9 <Grid/> 10 </ItemsPanelTemplate> 11 </Setter.Value> 12 </Setter> 13 <Setter Property="Template"> 14 <Setter.Value> 15 <ControlTemplate TargetType="Pivot"> 16 <Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> 17 <Grid.Resources> 18 <Style x:Key="BaseContentControlStyle" TargetType="ContentControl"> 19 <Setter Property="FontFamily" Value="XamlAutoFontFamily"/> 20 <Setter Property="FontWeight" Value="SemiBold"/> 21 <Setter Property="FontSize" Value="15"/> 22 <Setter Property="Template"> 23 <Setter.Value> 24 <ControlTemplate TargetType="ContentControl"> 25 <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" OpticalMarginAlignment="TrimSideBearings" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 26 </ControlTemplate> 27 </Setter.Value> 28 </Setter> 29 </Style> 30 <Style x:Key="TitleContentControlStyle" BasedOn="{StaticResource BaseContentControlStyle}" TargetType="ContentControl"> 31 <Setter Property="FontFamily" Value="{ThemeResource PivotTitleFontFamily}"/> 32 <Setter Property="FontWeight" Value="{ThemeResource PivotTitleThemeFontWeight}"/> 33 <Setter Property="FontSize" Value="{ThemeResource PivotTitleFontSize}"/> 34 </Style> 35 </Grid.Resources> 36 <Grid.RowDefinitions> 37 <RowDefinition Height="Auto"/> 38 <RowDefinition Height="*"/> 39 </Grid.RowDefinitions> 40 <VisualStateManager.VisualStateGroups> 41 <VisualStateGroup x:Name="Orientation"> 42 <VisualState x:Name="Portrait"> 43 <Storyboard> 44 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl"> 45 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}"/> 46 </ObjectAnimationUsingKeyFrames> 47 </Storyboard> 48 </VisualState> 49 <VisualState x:Name="Landscape"> 50 <Storyboard> 51 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl"> 52 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}"/> 53 </ObjectAnimationUsingKeyFrames> 54 </Storyboard> 55 </VisualState> 56 </VisualStateGroup> 57 <VisualStateGroup x:Name="NavigationButtonsVisibility"> 58 <VisualState x:Name="NavigationButtonsHidden"/> 59 <VisualState x:Name="NavigationButtonsVisible"> 60 <Storyboard> 61 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NextButton"> 62 <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 63 </ObjectAnimationUsingKeyFrames> 64 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="NextButton"> 65 <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> 66 </ObjectAnimationUsingKeyFrames> 67 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PreviousButton"> 68 <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 69 </ObjectAnimationUsingKeyFrames> 70 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="PreviousButton"> 71 <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> 72 </ObjectAnimationUsingKeyFrames> 73 </Storyboard> 74 </VisualState> 75 <VisualState x:Name="PreviousButtonVisible"> 76 <Storyboard> 77 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PreviousButton"> 78 <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 79 </ObjectAnimationUsingKeyFrames> 80 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="PreviousButton"> 81 <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> 82 </ObjectAnimationUsingKeyFrames> 83 </Storyboard> 84 </VisualState> 85 <VisualState x:Name="NextButtonVisible"> 86 <Storyboard> 87 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NextButton"> 88 <DiscreteObjectKeyFrame KeyTime="0" Value="1"/> 89 </ObjectAnimationUsingKeyFrames> 90 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="NextButton"> 91 <DiscreteObjectKeyFrame KeyTime="0" Value="True"/> 92 </ObjectAnimationUsingKeyFrames> 93 </Storyboard> 94 </VisualState> 95 </VisualStateGroup> 96 <VisualStateGroup x:Name="HeaderStates"> 97 <VisualState x:Name="HeaderDynamic"/> 98 <VisualState x:Name="HeaderStatic"> 99 <Storyboard>100 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Header">101 <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>102 </ObjectAnimationUsingKeyFrames>103 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="StaticHeader">104 <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>105 </ObjectAnimationUsingKeyFrames>106 </Storyboard>107 </VisualState>108 </VisualStateGroup>109 </VisualStateManager.VisualStateGroups>110 <ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" IsTabStop="False" Margin="{StaticResource PivotPortraitThemePadding}" Style="{StaticResource TitleContentControlStyle}" Visibility="Collapsed"/>111 <Grid Grid.Row="1">112 <Grid.Resources>113 <ControlTemplate x:Key="NextTemplate" TargetType="Button">114 <Border x:Name="Root" BorderBrush="{ThemeResource PivotNextButtonBorderBrush}" BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" Background="{ThemeResource PivotNextButtonBackground}">115 <VisualStateManager.VisualStateGroups>116 <VisualStateGroup x:Name="CommonStates">117 <VisualState x:Name="Normal"/>118 <VisualState x:Name="PointerOver">119 <Storyboard>120 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">121 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBackgroundPointerOver}"/>122 </ObjectAnimationUsingKeyFrames>123 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">124 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBorderBrushPointerOver}"/>125 </ObjectAnimationUsingKeyFrames>126 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">127 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonForegroundPointerOver}"/>128 </ObjectAnimationUsingKeyFrames>129 </Storyboard>130 </VisualState>131 <VisualState x:Name="Pressed">132 <Storyboard>133 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">134 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBackgroundPressed}"/>135 </ObjectAnimationUsingKeyFrames>136 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">137 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonBorderBrushPressed}"/>138 </ObjectAnimationUsingKeyFrames>139 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">140 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotNextButtonForegroundPressed}"/>141 </ObjectAnimationUsingKeyFrames>142 </Storyboard>143 </VisualState>144 </VisualStateGroup>145 </VisualStateManager.VisualStateGroups>146 <FontIcon x:Name="Arrow" Foreground="{ThemeResource PivotNextButtonForeground}" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center"/>147 </Border>148 </ControlTemplate>149 <ControlTemplate x:Key="PreviousTemplate" TargetType="Button">150 <Border x:Name="Root" BorderBrush="{ThemeResource PivotPreviousButtonBorderBrush}" BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}" Background="{ThemeResource PivotPreviousButtonBackground}">151 <VisualStateManager.VisualStateGroups>152 <VisualStateGroup x:Name="CommonStates">153 <VisualState x:Name="Normal"/>154 <VisualState x:Name="PointerOver">155 <Storyboard>156 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">157 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBackgroundPointerOver}"/>158 </ObjectAnimationUsingKeyFrames>159 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">160 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBorderBrushPointerOver}"/>161 </ObjectAnimationUsingKeyFrames>162 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">163 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonForegroundPointerOver}"/>164 </ObjectAnimationUsingKeyFrames>165 </Storyboard>166 </VisualState>167 <VisualState x:Name="Pressed">168 <Storyboard>169 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">170 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBackgroundPressed}"/>171 </ObjectAnimationUsingKeyFrames>172 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">173 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonBorderBrushPressed}"/>174 </ObjectAnimationUsingKeyFrames>175 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Arrow">176 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPreviousButtonForegroundPressed}"/>177 </ObjectAnimationUsingKeyFrames>178 </Storyboard>179 </VisualState>180 </VisualStateGroup>181 </VisualStateManager.VisualStateGroups>182 <FontIcon x:Name="Arrow" Foreground="{ThemeResource PivotPreviousButtonForeground}" FontSize="12" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" HorizontalAlignment="Center" MirroredWhenRightToLeft="True" UseLayoutRounding="False" VerticalAlignment="Center"/>183 </Border>184 </ControlTemplate>185 </Grid.Resources>186 <ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="False" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="{TemplateBinding Padding}" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">187 <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">188 <Grid x:Name="PivotLayoutElement">189 <Grid.ColumnDefinitions>190 <ColumnDefinition Width="Auto"/>191 <ColumnDefinition Width="*"/>192 <ColumnDefinition Width="Auto"/>193 </Grid.ColumnDefinitions>194 <Grid.RowDefinitions>195 <RowDefinition Height="Auto"/>196 <RowDefinition Height="*"/>197 </Grid.RowDefinitions>198 <Grid.RenderTransform>199 <CompositeTransform x:Name="PivotLayoutElementTranslateTransform"/>200 </Grid.RenderTransform>201 <ContentPresenter Visibility="Collapsed" x:Name="LeftHeaderPresenter" ContentTemplate="{TemplateBinding LeftHeaderTemplate}" Content="{TemplateBinding LeftHeader}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>202 <ContentControl x:Name="HeaderClipper" Grid.Column="1" HorizontalContentAlignment="Stretch" UseSystemFocusVisuals="True">203 <ContentControl.Clip>204 <RectangleGeometry x:Name="HeaderClipperGeometry"/>205 </ContentControl.Clip>206 <Grid Background="{ThemeResource PivotHeaderBackground}">207 <Grid.RenderTransform>208 <CompositeTransform x:Name="HeaderOffsetTranslateTransform"/>209 </Grid.RenderTransform>210 <PivotHeaderPanel x:Name="StaticHeader">211 <PivotHeaderPanel.RenderTransform>212 <CompositeTransform x:Name="StaticHeaderTranslateTransform"/>213 </PivotHeaderPanel.RenderTransform>214 </PivotHeaderPanel>215 <PivotHeaderPanel x:Name="Header">216 <PivotHeaderPanel.RenderTransform>217 <CompositeTransform x:Name="HeaderTranslateTransform"/>218 </PivotHeaderPanel.RenderTransform>219 </PivotHeaderPanel>220 </Grid>221 </ContentControl>222 <Button Visibility="Collapsed" x:Name="PreviousButton" Background="Transparent" Grid.Column="1" HorizontalAlignment="Left" Height="36" IsTabStop="False" IsEnabled="False" Margin="{ThemeResource PivotNavButtonMargin}" Opacity="0" Template="{StaticResource PreviousTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Top" Width="20"/>223 <Button Visibility="Collapsed" x:Name="NextButton" Background="Transparent" Grid.Column="1" HorizontalAlignment="Right" Height="36" IsTabStop="False" IsEnabled="False" Margin="{ThemeResource PivotNavButtonMargin}" Opacity="0" Template="{StaticResource NextTemplate}" UseSystemFocusVisuals="False" VerticalAlignment="Top" Width="20"/>224 <ContentPresenter Visibility="Collapsed" x:Name="RightHeaderPresenter" ContentTemplate="{TemplateBinding RightHeaderTemplate}" Content="{TemplateBinding RightHeader}" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>225 <ItemsPresenter Visibility="Collapsed" x:Name="PivotItemPresenter" Grid.ColumnSpan="3" Grid.Row="1">226 <ItemsPresenter.RenderTransform>227 <TransformGroup>228 <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>229 <CompositeTransform x:Name="ItemsPresenterCompositeTransform"/>230 </TransformGroup>231 </ItemsPresenter.RenderTransform>232 </ItemsPresenter>233 </Grid>234 </PivotPanel>235 </ScrollViewer>236 </Grid>237 </Grid>238 </ControlTemplate>239 </Setter.Value>240 </Setter>241 </Style>
原标题:UWP 实现Tab导航首页
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。