先看效果: 這個是用Pivot來實現 1、自定義Pivot的樣式,使用Blend工具生成模板,將HeaderTemplate的佈局都隱藏 1 <Style x:Key="PivotStyle1" TargetType="Pivot"> 2 <Setter Property="Margin" Valu ...
先看效果:
這個是用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>View Code
2、首頁TabPage.xaml佈局
1 <Page 2 x:Class="Demo.UWP.Views.TabPage