How to create tabs in windows phone 8 - xaml

Question

I'm a beginner on windows phone 8 developpement, and I need to create a tabs system ( a little like slidingDrawer on Android).
I explain myself, i've implemented a xaml interface which look like this :
http://img15.hostingpics.net/pics/974529onglet.png
The code of this interface :
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50" Text="Qualité orale" Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension" Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Fichiers relatifs" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Le conférencier" Foreground="White"/>
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
</StackPanel>
What i want to do here is that when the user touch a stackpanel, the stackpanel change his colour and the gray content at the right change too.
Can you help me solve my problem ?
Thank you in advance

Answer 1

Simply add Tap attributes to the TextBlocks and handle the events from the code behind.
For example:
<TextBlock Text="Questions"
Foreground="White"
Tap="MyEventHandler"
/>
Then you would want to give Name attributes to your StackPanels so that you can reference it in your code. Like so:
<StackPanel Height="50" Name="QuestionsStackPanel">
<TextBlock Text="Questions" Foreground="White"/>
</StackPanel>
In the code behind file, visual studio may auto generate the method stub, if not it should look like this.
private void MyEventHandler(object sender, System.Windows.Input.GestureEventArgs e)
{
//Make changes here
QuestionsStackPanel.Background = Colors.Blue
}
From here you can change the colors of the specific tabs and the grey area you mentioned.

Answer 2

First, Just for informations, the "android tabs interface" is not in agreement with the "UI (metro)" interface. It's not very very important, for more information about a "Ui design style you can go here for styling your app :d
For your Problem, in your Xaml, you can add an event for detect the click (or other event in your 'TextBlock'.
For sample, you can add a "Tap Event" in all your button in your "Code.xaml" (also, You can add a "Name" attribute for find easily your control after):
<StackPanel VerticalAlignment="top" Orientation="Horizontal" Height="402" Width="480">
<StackPanel Name ="Global_Onglets" Width="161" Margin="0,10,0,0" >
<StackPanel Height="50" Background="DarkCyan">
<TextBlock Height="50"
Text="Qualité orale"
Name="TextBlock_Quality"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50" >
<TextBlock Text="Compréhension"
Name="TextBlock_Comprehension"
Tap="MyPersonalEvent"
Foreground="White" />
</StackPanel>
<StackPanel Height="50">
<TextBlock Text="Général"
Name="TextBlock_General"
Tap="MyPersonalEvent"
Foreground="White"/>
</StackPanel>
</StackPanel>
</StackPanel>
And, in your "code.cs", you create your event method :
/// <summary>
/// Event handler called by Textblock Tap.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void MyPersonalEvent(object sender, EventArgs e)
{
// Get, the current textblock where called the event.
TextBlock CurrentTextBlock = sender as TextBlock;
// Check just the clicked textBlock, for attributes specific colors..
foreach (TextBlock textblock in Global_Onglets.Children)
{
if (textblock == sender)
{
// Attribute secific color for this tap textblock;
}
// Attribute a "normal" color for alls others textBlock..
}
}
You can have more details about events here!!
Also, I saw You create your app in French. But, You can easy Localized your application for create here in other languages (and distrube in other country...) if you want you've a great tutorial here about "localizing your app"... Better think before, that any duty again later. :D