Create tabs in Windows 8.1 Universal app - tabs

Question

I'm working on a Windows 8.1 Universal app (using VS2013) and I would like to create tabs inside the GridView. After searching, I found tabs cannot be created so I need some solution where I can create something that at least looks like tabs.
Here s what I need:
I have images as tab headers. When I click on each image (like Appbar icon) different StackPanel should appear on the same grid.
This is how I need my app to look like:

Answer 1

On phone, consider using the Pivot control. On desktop, there is no such control until you upgrade to Windows 10 UWP apps - where Pivot is present.
Otherwise, try this:
<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>
Be sure you reference the XAML Behaviors SDK.
Review the code. The trick is in the Visual States. You can update those to do anything you want, including updating multiple controls. Whatever you need.
Looks like this:
Best of luck!