How to change the item template of list box depending upon the Current Orientation in metro app? - xaml

Question

Hi I am developing an metro app , my app works perfectly fine in landscape mode but now i want to make it compatible to Portrait mode also.
This is how i have defined students listbox :-
<ListBox x:Name="lstbxbStudents" Background="Transparent" Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionChanged="lstbxbStudents_SelectionChanged_1" HorizontalAlignment="Left" Width="Auto" Margin="4,50,0,122" Style="{StaticResource ListBoxStyle1}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel Width="100" Orientation="Horizontal">
<TextBlock Text="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="450">
<TextBlock Text="{Binding studsc}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Orientation="Horizontal" Width="180">
<StackPanel>
<TextBlock Width="50" Text="{Binding stu_cod}" x:Name="txtblkstucode" HorizontalAlignment="Right" />
</StackPanel>
</StackPanel>
<StackPanel Width="150">
<TextBlock Text="{Binding stuby_prc}" VerticalAlignment="Center" TextAlignment="Right" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stuqty, Mode=TwoWay}" TextAlignment="Center" x:Name="txtbxbqty" Tag="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Right" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now my doubt is when i rotate it to Portrait mode from landscape mode , since the width of the textblocks present inside the itemtemplate of listbox is already defined , when i rotate the it to Portrait, i am not able to see all the data present (it cuts off) since the width of the Portrait mode is less when compared to landscape mode.
1)Can i have two item templates for same listbox and switch between those two templates depending upon current orientation ??
2)How can i decrease/increase the width of the textblock present inside a item template of a listbox in runtime codebehind when the orentation changed event is fired.??
3)will visual states be useful at this point , if so then how ??
4)is there any other way of which i can solve the problem , am i missing any alternatives ??
Please help me out , Thanks in advance.

Answer 1

You can change the ItemTemplate using visual states. First put both of your item templates in resources:
<Page.Resources>
<DataTemplate x.Key="Landscape">
<!-- your landscape template -->
</DataTemplate>
<DataTemplate x.Key="Portrait">
<!-- your portrait template -->
</DataTemplate>
</Page.Resources>
Initially assign the landscape template to ListBox:
<ListBox x:Name="listbox" ItemTemplate="{StaticResource Landscape}" />
In VisualStateManager change the template for FullScreenPortrait visual state:
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="listbox" Storyboard.TargetProperty="ItemTemplate">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource Portrait}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateManager.VisualStateGroups>
Make sure you are using LayoutAwarePage as the base class for your page to make this work.