UWP 实现Tab导航首页，uwptab导航首页
投稿于 被查看 49007 次 评论：149
UWP 实现Tab导航首页，uwptab导航首页
先看效果：
这个是用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" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 6 xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 7 xmlns:bean="using:Demo.UWP.Models" 8 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 9 xmlns:dataTemplateSelectors="using:Demo.UWP.DataTemplateSelectors" 10 xmlns:itemviews="using:Demo.UWP.ItemViews" 11 xmlns:local="using:Demo.UWP.Views" 12 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 13 xmlns:mycontrols="using:Demo.UWP.Controls" 14 xmlns:viewmodels="using:Demo.UWP.ViewModels" 15 mc:Ignorable="d"> 16 <Page.DataContext> 17 <viewmodels:MainViewModel /> 18 </Page.DataContext> 19 <Page.Resources> 20 <ResourceDictionary> 21 <DataTemplate x:Key="HomeTabView" x:DataType="viewmodels:HomeViewModel"> 22 <itemviews:HomeTabView /> 23 </DataTemplate> 24 <DataTemplate x:Key="CouponTabView" x:DataType="viewmodels:CouponTabViewModel"> 25 <itemviews:CouponTabView /> 26 </DataTemplate> 27 <DataTemplate x:Key="FindTabView" x:DataType="viewmodels:FindTabViewModel"> 28 <itemviews:FindTabView /> 29 </DataTemplate> 30 <DataTemplate x:Key="MineTabView" x:DataType="viewmodels:MineViewModel"> 31 <itemviews:MineTabView /> 32 </DataTemplate> 33 <dataTemplateSelectors:MainTabDataTemplateSelector 34 x:Key="MainTabTemplateSelector" 35 CouponTabTemplate="{StaticResource CouponTabView}" 36 FindTabTemplate="{StaticResource FindTabView}" 37 HomeTabTemplate="{StaticResource HomeTabView}" 38 MineTabTemplate="{StaticResource MineTabView}" /> 39 <DataTemplate x:Key="PivotHeaderTemplate"> 40 <Grid> 41 <Grid.RowDefinitions> 42 <RowDefinition Height="Auto" /> 43 </Grid.RowDefinitions> 44 <TextBlock FontSize="12" Text="{Binding Title}" /> 45 </Grid> 46 </DataTemplate> 47 </ResourceDictionary> 48 </Page.Resources> 49 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 50 <Grid.RowDefinitions> 51 <RowDefinition x:Name="topHeight" Height="*" /> 52 <RowDefinition x:Name="bottomHeight" Height="Auto" /> 53 </Grid.RowDefinitions> 54 <Grid x:Name="tabLayout" Grid.Row="1"> 55 <Grid.ColumnDefinitions> 56 <ColumnDefinition Width="*" /> 57 <ColumnDefinition Width="*" /> 58 <ColumnDefinition Width="*" /> 59 <ColumnDefinition Width="*" /> 60 </Grid.ColumnDefinitions> 61 <Border 62 Grid.ColumnSpan="4" 63 BorderBrush="#e3e3e3" 64 BorderThickness="0,0.5,0,0" /> 65 <mycontrols:RadioImageButton 66 Grid.Column="0" 67 Margin="0,5,0,5" 68 HorizontalAlignment="Center" 69 Checked="{x:Bind ViewModel.RadioImageButton_Checked}" 70 Content="{x:Bind ViewModel.Home}" 71 FontSize="12" 72 FontWeight="Normal" 73 ForegroundChecked="Orange" 74 ImageHeight="32" 75 ImageMargin="0,0,0,2" 76 IsChecked="{x:Bind ViewModel.SelectedIndex, ConverterParameter=0, Converter={StaticResource RadioImageButtonConverter}, Mode=TwoWay}" 77 Source="ms-appx:///Assets/Main/main_index_home_normal.png" 78 SourceChecked="ms-appx:///Assets/Main/main_index_home_pressed.png" 79 Style="{StaticResource RadioImageButtonStyle1}" 80 TabIndex="0"> 81 <!--<Interactivity:Interaction.Behaviors> 82 <Core:EventTriggerBehavior EventName="Checked"> 83 <Core:InvokeCommandAction Command="{x:Bind HomeTab_Checked}" /> 84 </Core:EventTriggerBehavior> 85 </Interactivity:Interaction.Behaviors>--> 86 </mycontrols:RadioImageButton> 87 <mycontrols:RadioImageButton 88 Grid.Column="1" 89 Margin="0,5,0,5" 90 HorizontalAlignment="Center" 91 Checked="{x:Bind ViewModel.RadioImageButton_Checked}" 92 Content="品质优惠" 93 FontSize="12" 94 FontWeight="Normal" 95 ForegroundChecked="Orange" 96 ImageHeight="32" 97 ImageMargin="0,0,0,2" 98 IsChecked="{x:Bind ViewModel.SelectedIndex, ConverterParameter=1, Converter={StaticResource RadioImageButtonConverter}, Mode=TwoWay}" 99 Source="ms-appx:///Assets/Main/main_index_quality_normal.png" 100 SourceChecked="ms-appx:///Assets/Main/main_index_quality_pressed.png" 101 Style="{StaticResource RadioImageButtonStyle1}" 102 TabIndex="1"> 103 <!--<Interactivity:Interaction.Behaviors> 104 <Core:EventTriggerBehavior EventName="Checked"> 105 <Core:InvokeCommandAction Command="{x:Bind HomeTab_Checked}" /> 106 </Core:EventTriggerBehavior> 107 </Interactivity:Interaction.Behaviors>--> 108 </mycontrols:RadioImageButton> 109 <mycontrols:RadioImageButton 110 x:Name="findRb" 111 Grid.Column="2" 112 Margin="0,5,0,5" 113 HorizontalAlignment="Center" 114 Checked="{x:Bind ViewModel.RadioImageButton_Checked}" 115 Content="发现" 116 FontSize="12" 117 FontWeight="Normal" 118 ForegroundChecked="Orange" 119 ImageHeight="32" 120 ImageMargin="0,0,0,2" 121 IsChecked="{x:Bind ViewModel.SelectedIndex, ConverterParameter=2, Converter={StaticResource RadioImageButtonConverter}, Mode=TwoWay}" 122 Source="ms-appx:///Assets/Main/main_index_search_normal.png" 123 SourceChecked="ms-appx:///Assets/Main/main_index_search_pressed.png" 124 Style="{StaticResource RadioImageButtonStyle1}" 125 TabIndex="2"> 126 <!--<Interactivity:Interaction.Behaviors> 127 <Core:EventTriggerBehavior EventName="Checked"> 128 <Core:InvokeCommandAction Command="{x:Bind HomeTab_Checked}" /> 129 </Core:EventTriggerBehavior> 130 </Interactivity:Interaction.Behaviors>--> 131 </mycontrols:RadioImageButton> 132 <mycontrols:RadioImageButton 133 x:Name="mineRb" 134 Grid.Column="3" 135 Margin="0,5,0,5" 136 HorizontalAlignment="Center" 137 Checked="{x:Bind ViewModel.RadioImageButton_Checked}" 138 Content="我的" 139 FontSize="12" 140 FontWeight="Normal" 141 ForegroundChecked="Orange" 142 ImageHeight="32" 143 ImageMargin="0,0,0,2" 144 IsChecked="{x:Bind ViewModel.SelectedIndex, ConverterParameter=3, Converter={StaticResource RadioImageButtonConverter}, Mode=TwoWay}" 145 Source="ms-appx:///Assets/Main/main_index_my_normal.png" 146 SourceChecked="ms-appx:///Assets/Main/main_index_my_pressed.png" 147 Style="{StaticResource RadioImageButtonStyle1}" 148 TabIndex="3"> 149 <!--<Interactivity:Interaction.Behaviors> 150 <Core:EventTriggerBehavior EventName="Checked"> 151 <Core:InvokeCommandAction Command="{x:Bind HomeTab_Checked}" /> 152 </Core:EventTriggerBehavior> 153 </Interactivity:Interaction.Behaviors>--> 154 </mycontrols:RadioImageButton> 155 </Grid> 156 <Pivot 157 x:Name="pivot" 158 Grid.Row="0" 159 HeaderTemplate="{StaticResource PivotHeaderTemplate}" 160 ItemContainerStyle="{StaticResource PivotItemStyle1}" 161 ItemTemplateSelector="{StaticResource MainTabTemplateSelector}" 162 ItemsSource="{x:Bind ViewModel.Data}" 163 SelectedIndex="{x:Bind ViewModel.SelectedIndex, Mode=TwoWay}" 164 Style="{StaticResource PivotStyleLeft}" /> 165 </Grid> 166 </Page>View Code
和ListView一样，通过 ItemTemplateSelector 定制4个TabView模板
3、MainViewModel代码
1 using GalaSoft.MvvmLight; 2 using Demo.UWP.Models; 3 using System; 4 using System.Collections.Generic; 5 using System.Collections.ObjectModel; 6 using System.Linq; 7 using System.Text; 8 using System.Threading.Tasks; 9 using Windows.UI.Xaml.Media.Imaging; 10 using GalaSoft.MvvmLight.Command; 11 using Windows.UI.Popups; 12 using Windows.UI.Xaml; 13 using Demo.UWP.Controls; 14 15 namespace Demo.UWP.ViewModels 16 { 17 public class MainViewModel : ViewModelBase 18 { 19 private int _SelectedIndex; 20 21 public int SelectedIndex 22 { 23 get { return _SelectedIndex; } 24 set 25 { 26 Set<int>(ref _SelectedIndex, value); 27 } 28 } 29 30 public ObservableCollection<ViewModelBase> Data { get; set; } 31 32 public MainViewModel() 33 { 34 Data = new ObservableCollection<ViewModelBase> 35 { 36 new HomeViewModel() {Type = 1, Title = "首页"}, 37 new CouponTabViewModel() {Type = 2, Title = "品质优惠"}, 38 new FindTabViewModel() {Type = 3, Title = "发现"}, 39 new MineViewModel() {Type = 4, Title = "我的"} 40 }; 41 SelectedIndex = 0; 42 } 43 44 public string Home => "首页"; 45 46 public RelayCommand<RoutedEventArgs> HomeTab_Checked => new RelayCommand<RoutedEventArgs>((e) => 47 { 48 //RadioImageButton radio = e.OriginalSource as RadioImageButton; 49 //if (radio.IsChecked.Value) 50 //{ 51 // SelectedIndex = radio.TabIndex; 52 //} 53 //MessageDialog dlg = new MessageDialog("click." + SelectedIndex); 54 //var t = dlg.ShowAsync(); 55 }); 56 57 public void RadioImageButton_Checked(object sender, RoutedEventArgs e) 58 { 59 //RadioImageButton radio = e.OriginalSource as RadioImageButton; 60 //if (radio.IsChecked.Value) 61 //{ 62 // SelectedIndex = radio.TabIndex; 63 //} 64 //MessageDialog dlg = new MessageDialog("click." + SelectedIndex); 65 //var t = dlg.ShowAsync(); 66 } 67 } 68 }View Code
RadioImageButtonConverter 代码
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using Windows.UI.Xaml.Data; 7 8 namespace Demo.UWP.Converters 9 { 10 public class RadioImageButtonConverter : IValueConverter 11 { 12 public object Convert(object value, Type targetType, object parameter, string language) 13 { 14 if (string.Equals(value + "", parameter + "")) 15 { 16 return true; 17 } 18 else 19 return false; 20 } 21 22 public object ConvertBack(object value, Type targetType, object parameter, string language) 23 { 24 return Int32.Parse(parameter.ToString()); 25 } 26 } 27 }View Code
搞定！再配合微软提供的ToolKit.UWP就可以愉快的写项目了
源码地址 https://github.com/xiaocaidev/demo-uwp
转载请标明出处：http://www.cnblogs.com/xiaocaidev/p/7044206.html，本文出自：【xiaocaidev的博客】
相关文章
- 暂无相关文章
用户评论