Search code examples
listviewuwpdatatemplateuwp-xaml

Changing ListView's ItemPanelTemplate Orientation

I have a ListView in a DataTemplate in my app page. I want to use it in two different places, 1. on top and then secondly on the side. Now I have an ItemPanelTemplate in it so I can easily manage it how to display the View but I cant seem to change the Orientation in VisualStateManager. It simply doesn't work. It works if I change the Orientation directly in the StackPanel but it doesn't work like that. The code I am trying is:

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

If someone has any idea how can I do this please point me in the right direction. Thank you.

Update: I tried both the answers below but unfortunately it's the same thing as it was before. Once the panel gets set at the start time whether it's Horizontal or Vertical it stays the same for me. It doesn't change the Orientation for some reason.

Here is the code for the whole page:

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

I am using ContentPresenter to show the Templates, can this be the reason for this not changing the Orientation? Thanks for trying to help.

Solution

  • As @James Croft said that you could not place <VisualStateManager.VisualStateGroups> under the <ItemsPanelTemplate>. And you could create some resources for <VisualState.Setters> and then move the visual states to the UserControl level.

    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.

    For your scenario you just need to move resources from <Page.Resources> to <UserControl.Resources> base on James Croft's answer. And you can reference the follow code sample.

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

    And this is Datatemplate effect. enter image description here