Question

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

    <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的Grid。将ListView包装在网格中的原因是，如果视觉状态位于根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级别。

我不能为此创建两个不同的DataTemplates。否则，我已经在做同样的事情了。我希望能够在两个不同的地方使用一个模板，并在运行时更改模板属性。

对于您的方案，您只需根据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方向

2 个答案: