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

问题

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.

回答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.

来源：https://stackoverflow.com/questions/15405098/how-to-change-the-item-template-of-list-box-depending-upon-the-current-orientati

标签

xaml

windows-8

microsoft-metro

winrt-xaml

itemtemplate