Xaml 如何根据metro应用程序中的当前方向更改列表框的项目模板？

嗨，我正在开发一个metro应用程序，我的应用程序在横向模式下运行得非常好，但现在我想让它也与纵向模式兼容

我是这样定义学生列表框的：-

 <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>

现在我的疑问是，当我将它从横向模式旋转到纵向模式时，因为listbox的itemtemplate中存在的文本块的宽度已经定义，当我将它旋转到纵向模式时，我无法看到所有存在的数据（它被切断），因为纵向模式的宽度比横向模式小

1） 我可以为同一个列表框使用两个项目模板，并根据当前方向在这两个模板之间切换吗

2） 当Orettion changed事件被触发时，如何在运行时代码隐藏中减少/增加listbox的项模板中存在的textblock的宽度

3） 视觉状态在这一点上有用吗？如果有用，那么如何使用

4） 有没有其他方法可以解决这个问题，我是否错过了其他选择

---

请帮助我，提前谢谢。

您可以使用可视状态更改

项目模板。首先将两个项目模板放入参考资料：

<Page.Resources>
    <DataTemplate x.Key="Landscape">
         <!-- your landscape template -->
    </DataTemplate>
    <DataTemplate x.Key="Portrait">
         <!-- your portrait template -->
    </DataTemplate>
</Page.Resources>

在
VisualStateManager
中，更改
FullScreenPicture
视觉状态的模板：

<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>



确保您正在使用
LayoutAwarePage
作为页面的基类来执行此操作。
是的，视觉状态可能会有所帮助-查看Grid应用程序模板的工作方式。在GroupedItemsPage中，有一个ListView和一个GridView，它们是隐藏的/显示的，具体取决于使用设备方向的VisualStateManager。本质上，可以设置所需属性（可见性、大小等）的动画
<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>