Создание вкладок в Windows 8.1 Универсальное приложение

Question

Я работаю над универсальным приложением Windows 8.1 (с использованием VS2013), и я хотел бы создавать вкладки внутри GridView. После поиска я обнаружил, что вкладки не могут быть созданы, поэтому мне нужно некоторое решение, где я могу создать что-то, что по крайней мере выглядит как вкладки.

Вот что мне нужно:

У меня есть изображения в качестве вкладки заголовков. Когда я нажимаю на каждое изображение (например, Appbar значок), разные StackPanel должны появляться в одной и той же сетке.

Это, как мне нужно мое приложение выглядеть следующим образом:

Answer 1

На телефоне, рассмотрите возможность использования элемента управления 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.

Просмотрите код. Фокус в визуальных состояниях. Вы можете обновить их, чтобы делать все, что хотите, включая обновление нескольких элементов управления. Все что тебе нужно.

выглядит так:

удачи!