На телефоне, рассмотрите возможность использования элемента управления Pivot. На рабочем столе такого контроля нет, пока вы не перейдете на Windows 10 UWP-приложений, где присутствует Pivot.
В противном случае, попробуйте следующее:
<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Loaded">
<Core:GoToStateAction StateName="Tab1State"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TabVisualStateGroup">
<VisualState x:Name="Tab1State">
<VisualState.Setters>
<Setter Target="Tab1Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab1Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab2State">
<VisualState.Setters>
<Setter Target="Tab2Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab2Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab3State">
<VisualState.Setters>
<Setter Target="Tab3Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab3Content}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<!-- re-template radiobuttons as togglebuttons -->
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="MinWidth" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
<ContentPresenter />
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="TabButtons" x:Name="Tab1Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Red" />
<TextBlock Margin="4,0" Text="Tab 1" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab2Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Green" />
<TextBlock Margin="4,0" Text="Tab2" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab3Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Blue" />
<TextBlock Margin="4,0" Text="Tab3" />
</StackPanel>
</RadioButton>
</StackPanel>
<FlipView x:Name="TabContent" Grid.Row="1">
<!-- if the user changes the item through the flipview -->
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab1Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab2Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab3Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Grid Background="Red" x:Name="Tab1Content">
<!-- content -->
</Grid>
<Grid Background="Green" x:Name="Tab2Content">
<!-- content -->
</Grid>
<Grid Background="Blue" x:Name="Tab3Content">
<!-- content -->
</Grid>
</FlipView>
</Grid>
Убедитесь, что вы ссылаетесь на XAML Behaviors SDK.
Просмотрите код. Фокус в визуальных состояниях. Вы можете обновить их, чтобы делать все, что хотите, включая обновление нескольких элементов управления. Все что тебе нужно.
выглядит так:
удачи!
Посмотрите на управление концентратором. https://msdn.microsoft.com/en-us/library/windows/apps/dn449149.aspx –
@KenTucker Спасибо за эту ссылку, но я не уверен, как получить вкладку через центр, потому что мне не нужны навигации. Я отредактировал мой вопрос, пожалуйста, проверьте ссылку на изображение. –
Вот ссылка на способ смоделирования вкладок http://blog.davemdavis.net/2012/10/03/simulating-a-tab-control-in-a-windows-8-application/ –