更改 ListView 的 ItemPanelTemplate 方向

Question

我的应用程序页面中有 DataTemplate 中的 ListView。我想在两个不同的地方使用它，1. 在顶部，然后在侧面。现在我在其中有一个 ItemPanelTemplate，因此我可以轻松地管理它如何显示视图，但我似乎无法更改 VisualStateManager 中的 Orientation。它根本行不通。如果我直接在 StackPanel 中更改 Orientation 它会起作用，但它不会那样起作用。我正在尝试的代码是：

    <DataTemplate x:Name="SidePaneTemplate">
        <UserControl>
            <ListView SelectionChanged="TopListBox_SelectionChanged"
                      SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      SelectionMode="Single"
                      Margin="0,10,0,0">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel x:Name="TemplatePanel"
                                    >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup>
                                    <VisualState x:Name="w_state">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowHeight="550"
                                                             MinWindowWidth="451"/>
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="TemplatePanel.Orientation"
                                                    Value="Vertical"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="n_state">
                                        <VisualState.StateTriggers>
                                            <AdaptiveTrigger MinWindowWidth="0"/>
                                        </VisualState.StateTriggers>
                                        <VisualState.Setters>
                                            <Setter Target="TemplatePanel.Orientation"
                                                    Value="Horizontal"/>
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.Items>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE8B2;"
                                  Margin="5"/>
                            <TextBlock Text="Movies"
                                   TextAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE7F4;"
                                  Margin="5"/>
                            <TextBlock Text="TV Shows"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE721;"
                                  Margin="5"/>
                            <TextBlock Text="Search"
                                   TextAlignment="DetectFromContent"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE728;"
                                  Margin="5"/>
                            <TextBlock Text="Favorites"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE713;"
                                  Margin="5"/>
                            <TextBlock Text="Settings"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView.Items>
            </ListView>
        </UserControl>
    </DataTemplate>

如果有人知道我该怎么做，请指出正确的方向。谢谢。

更新： 我尝试了下面的两个答案，但不幸的是它和以前一样。一旦面板在开始时间设置好，无论是 Horizontal 还是 Vertical，它对我来说都是一样的。由于某种原因，它不会更改 Orientation。

这是整个页面的代码：

<Page.Resources>
    <!--
    <DataTemplate x:Name="SidePaneTemplate">
        <UserControl>
            <UserControl.Resources>
                <ItemsPanelTemplate x:Name="SidePanelTemp">
                    <ItemsStackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>

                <ItemsPanelTemplate x:Name="TopPanelTemp">
                    <ItemsStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </UserControl.Resources>
            <ListView SelectionChanged="TopListBox_SelectionChanged"
                      Name="List"
                      SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      SelectionMode="Single"
                      Margin="0,10,0,0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowHeight="550"
                                                 MinWindowWidth="451"/>
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="List.ItemsPanel"
                                        Value="{StaticResource SidePanelTemp}"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState>
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0"
                                                 />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="List.ItemsPanel"
                                        Value="{StaticResource TopPanelTemp}"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ListView.Items>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE8B2;"
                                  Margin="5"/>
                            <TextBlock Text="Movies"
                                   TextAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE7F4;"
                                  Margin="5"/>
                            <TextBlock Text="TV Shows"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE721;"
                                  Margin="5"/>
                            <TextBlock Text="Search"
                                   TextAlignment="DetectFromContent"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE728;"
                                  Margin="5"/>
                            <TextBlock Text="Favorites"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE713;"
                                  Margin="5"/>
                            <TextBlock Text="Settings"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView.Items>
            </ListView>
        </UserControl>
    </DataTemplate>
    -->
        <DataTemplate x:Key="DoubleSidePaneTemplate">
        <UserControl>
            <UserControl.Resources>
                <ItemsPanelTemplate x:Key="HorizontalStackPanel">
                    <ItemsStackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>

                <ItemsPanelTemplate x:Key="VerticalStackPanel">
                    <ItemsStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </UserControl.Resources>
            <ListView
                x:Name="rootview"
                Margin="0,10,0,0"
                SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                SelectionChanged="TopListBox_SelectionChanged"
                SelectionMode="Single">
                <ListView.Items>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon
                                Margin="5"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                Glyph="&#xE8B2;"/>
                            <TextBlock Text="Movies" TextAlignment="Center" />
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon
                                Margin="5"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                Glyph="&#xE7F4;"/>
                            <TextBlock Text="TV Shows" />
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon
                                Margin="5"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                Glyph="&#xE721;" />
                            <TextBlock Text="Search" TextAlignment="DetectFromContent" />
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon
                                Margin="5"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                Glyph="&#xE728;" />
                            <TextBlock Text="Favorites"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon
                                Margin="5"
                                FontFamily="Segoe MDL2 Assets"
                                FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                Glyph="&#xE713;" />
                            <TextBlock Text="Settings" />
                        </StackPanel>
                    </ListViewItem>
                </ListView.Items>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="w_state">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger  MinWindowWidth="500" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="rootview.ItemsPanel" Value="{StaticResource VerticalStackPanel }" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="n_state">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="rootview.ItemsPanel" Value="{StaticResource  HorizontalStackPanel}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </ListView>
        </UserControl>
    </DataTemplate>

    <!--    
    <DataTemplate x:Name="TopPaneTemplate">
        <UserControl>
            <ListView SelectionChanged="TopListBox_SelectionChanged"
                      ItemsPanel="{StaticResource TopPanelTemp}"
                      SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      SelectionMode="Single"
                      Margin="0,10,0,0">
                <ListView.Items>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE8B2;"
                                  Margin="5"/>
                            <TextBlock Text="Movies"
                                   TextAlignment="Center"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE7F4;"
                                  Margin="5"/>
                            <TextBlock Text="TV Shows"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE721;"
                                  Margin="5"/>
                            <TextBlock Text="Search"
                                   TextAlignment="DetectFromContent"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE728;"
                                  Margin="5"/>
                            <TextBlock Text="Favorites"/>
                        </StackPanel>
                    </ListViewItem>
                    <ListViewItem HorizontalContentAlignment="Center">
                        <StackPanel>
                            <FontIcon FontFamily="Segoe MDL2 Assets"
                                  FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                  Glyph="&#xE713;"
                                  Margin="5"/>
                            <TextBlock Text="Settings"/>
                        </StackPanel>
                    </ListViewItem>
                </ListView.Items>
            </ListView>
        </UserControl>
    </DataTemplate>
-->
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="550"
                                     MinWindowHeight="451"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyUITheme.Edge"
                            Value="Left"/>
                    <Setter Target="IndexPane.IsPaneOpen"
                        Value="True"/>
                    <Setter Target="TopPane.Visibility"
                            Value="Collapsed"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MyUITheme.Edge"
                            Value="Top"/>
                    <Setter Target="IndexPane.IsPaneOpen"
                        Value="False"/>
                    <Setter Target="TopPane.Visibility"
                            Value="Visible"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.Transitions>
        <TransitionCollection>
            <EdgeUIThemeTransition x:Name="MyUITheme"/>
        </TransitionCollection>
    </Grid.Transitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Viewbox x:Name="TopPane"
             MaxHeight="50">
        <ContentPresenter ContentTemplate="{StaticResource DoubleSidePaneTemplate}"/>
    </Viewbox>

    <SplitView Grid.Row="1"
               Grid.RowSpan="2"
               x:Name="IndexPane"
               OpenPaneLength="100"
               DisplayMode="Inline"
               PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView.Pane>
            <ContentPresenter ContentTemplate="{StaticResource DoubleSidePaneTemplate}"
                            VerticalAlignment="Stretch"/>
        </SplitView.Pane>
        <SplitView.Content>
            <Grid>
                <Frame x:Name="PaneContentFrame"/>
                <StackPanel HorizontalAlignment="Stretch"
                            VerticalAlignment="Bottom"
                            x:Name="InternetPanel"
                            Background="{StaticResource SystemControlBackgroundAccentBrush}"
                            MaxWidth="500">
                    <TextBlock Text="{Binding IsInternet, Mode=OneWay}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource BaseTextBlockStyle}"
                               Margin="10">
                    </TextBlock>
                    <StackPanel.RenderTransform>
                        <TranslateTransform/>
                    </StackPanel.RenderTransform>
                </StackPanel>
                <Grid.Resources>
                    <Storyboard x:Name="LocalNotifStoryboard"
                                Completed="LocalNotifStoryboard_Completed">
                        <DoubleAnimation AutoReverse="True"
                                         FillBehavior="HoldEnd"
                                         Duration="0:0:3"
                                         From="0"
                                         To="1"
                                         Storyboard.TargetName="InternetPanel"
                                         Storyboard.TargetProperty="(InternetPanel.Opacity)"/>
                    </Storyboard>
                </Grid.Resources>
            </Grid>

        </SplitView.Content>
    </SplitView>
</Grid>

我正在使用 ContentPresenter 来显示 Templates，这是否是不更改 Orientation 的原因？感谢您提供帮助。

Answer 1

不幸的是，您无法在您尝试达到的水平上做到这一点。

您需要为您支持的方向创建 ItemsPanelTemplate 资源，然后将视觉状态移动到包含 ListView 的网格。将 ListView 包装在 Grid 中的原因是，如果视觉状态处于根 UserControl 级别，则它们不能始终保证触发。

下面是您将如何执行此操作的示例：

     <DataTemplate x:Name="SidePaneTemplate">
        <UserControl>
            <UserControl.Resources>
                <ItemsPanelTemplate x:Key="HorizontalStackPanel">
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>

                <ItemsPanelTemplate x:Key="VerticalStackPanel">
                    <StackPanel />
                </ItemsPanelTemplate>
            </UserControl.Resources>

            <Grid>
                <ListView
                    x:Name="List"
                    Margin="0,10,0,0"
                    SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    SelectionChanged="TopListBox_SelectionChanged"
                    SelectionMode="Single">
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel x:Name="TemplatePanel">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup>
                                        <VisualState x:Name="w_state">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowHeight="550" MinWindowWidth="451" />
                                            </VisualState.StateTriggers>
                                            <VisualState.Setters>
                                                <Setter Target="TemplatePanel.Orientation" Value="Vertical" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="n_state">
                                            <VisualState.StateTriggers>
                                                <AdaptiveTrigger MinWindowWidth="0" />
                                            </VisualState.StateTriggers>
                                            <VisualState.Setters>
                                                <Setter Target="TemplatePanel.Orientation" Value="Horizontal" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.Items>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE8B2;" />
                                <TextBlock Text="Movies" TextAlignment="Center" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE7F4;" />
                                <TextBlock Text="TV Shows" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE721;" />
                                <TextBlock Text="Search" TextAlignment="DetectFromContent" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE728;" />
                                <TextBlock Text="Favorites" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE713;" />
                                <TextBlock Text="Settings" />
                            </StackPanel>
                        </ListViewItem>
                    </ListView.Items>
                </ListView>

                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="w_state">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowHeight="550" MinWindowWidth="451" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="List.ItemsPanel" Value="{StaticResource VerticalStackPanel}" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="n_state">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="List.ItemsPanel" Value="{StaticResource HorizontalStackPanel}" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </UserControl>
    </DataTemplate>

Answer 2

正如@James Croft 所说，您不能将 <VisualStateManager.VisualStateGroups> 放在 <ItemsPanelTemplate> 下。您可以为 <VisualState.Setters> 创建一些资源，然后将视觉状态移动到 UserControl 级别。

I cannot create two different DataTemplates for this. Otherwise it would be the same thing that I am already doing. I want to be able to use one template for two different places and change the template properties during runtime.

对于您的场景，您只需根据 James Croft 的回答将 resources 从 <Page.Resources> 移动到 <UserControl.Resources>。您可以参考以下代码示例。

<DataTemplate x:Key="SidePaneTemplate">
            <UserControl>
                <UserControl.Resources>
                    <ItemsPanelTemplate x:Key="HorizontalStackPanel">
                        <ItemsStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>

                    <ItemsPanelTemplate x:Key="VerticalStackPanel">
                        <ItemsStackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </UserControl.Resources>
                <ListView
                    x:Name="rootview"
                    Margin="0,10,0,0"
                    SelectedIndex="{Binding CurrentSelectedPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                    SelectionChanged="ListView_SelectionChanged"
                    SelectionMode="Single">
                    <ListView.Items>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE8B2;"/>
                                <TextBlock Text="Movies" TextAlignment="Center" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE7F4;"/>
                                <TextBlock Text="TV Shows" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE721;" />
                                <TextBlock Text="Search" TextAlignment="DetectFromContent" />
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE728;" />
                                <TextBlock Text="Favorites"/>
                            </StackPanel>
                        </ListViewItem>
                        <ListViewItem HorizontalContentAlignment="Center">
                            <StackPanel>
                                <FontIcon
                                    Margin="5"
                                    FontFamily="Segoe MDL2 Assets"
                                    FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                    Glyph="&#xE713;" />
                                <TextBlock Text="Settings" />
                            </StackPanel>
                        </ListViewItem>
                    </ListView.Items>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup>
                            <VisualState x:Name="w_state">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger  MinWindowWidth="0" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="rootview.ItemsPanel" Value="{StaticResource VerticalStackPanel }" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="n_state">
                                <VisualState.StateTriggers>
                                    <AdaptiveTrigger MinWindowWidth="700" />
                                </VisualState.StateTriggers>
                                <VisualState.Setters>
                                    <Setter Target="rootview.ItemsPanel" Value="{StaticResource  HorizontalStackPanel}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </ListView>
            </UserControl>
        </DataTemplate>

这是Datatemplate效果。

更改 ListView 的 ItemPanelTemplate 方向

Changing ListView's ItemPanelTemplate Orientation

listview

datatemplate

uwp

uwp-xaml