如何根据Metro应用程序中的“当前方向"更改列表框的项目模板? [英] How to change the item template of list box depending upon the Current Orientation in metro app?

问题描述

我正在开发一个Metro应用程序，我的应用程序在横向模式下可以完美运行，但现在我也想使其与人像模式兼容.

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>

现在我的疑问是，当我将其从横向模式旋转到纵向模式时，由于已经定义了列表框的itemtemplate中存在的文本块的宽度，因此当我将其旋转至纵向时，我无法看到所有由于纵向模式的宽度与横向模式相比较小，因此存在(截止)数据.

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)我可以为同一个列表框使用两个项目模板，并根据当前方向在这两个模板之间进行切换吗?

1)Can i have two item templates for same listbox and switch between those two templates depending upon current orientation ??

2)如何在启动Orentation更改事件后，在运行时代码后面减小/增加列表框的项目模板内部存在的文本块的宽度.?

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)视觉状态在这一点上将是有用的，如果是的话，如何使用?

3)will visual states be useful at this point , if so then how ??

4)我还有其他方法可以解决问题吗，我是否缺少其他选择?

4)is there any other way of which i can solve the problem , am i missing any alternatives ??

请帮帮我，谢谢.

推荐答案

您可以使用视觉状态更改ItemTemplate.首先将两个项目模板都放入资源中:

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>

最初将景观模板分配给ListBox:

Initially assign the landscape template to ListBox:

<ListBox x:Name="listbox" ItemTemplate="{StaticResource Landscape}" />

在VisualStateManager中，将模板更改为FullScreenPortrait视觉状态:

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>

确保您使用LayoutAwarePage作为页面的基类来完成此工作.

Make sure you are using LayoutAwarePage as the base class for your page to make this work.

这篇关于如何根据Metro应用程序中的“当前方向"更改列表框的项目模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！