How to change ItemTemplate based on orientation ?

Question

Hi,

I have created the ListView containing ItemTemplate, On changing the orientation i want to change the item template designed using XAML.

Please suggest how can i obtained such behavior preferably by using VisualStateManager ?

Thanks,

 

---

C Mahone

Answer 1

change the itemtemplate with the VSM

---

Microsoft Certified Solutions Developer - Windows Store Apps Using C#

Answer 2

Thanks for the reply,

Actually i am trying to do the same but unable to do it.

could you please demonstrate it ?

---

C Mahone

Answer 3

Xaml:

<common:LayoutAwarePage
    x:Class="App1.MainPage"
    xmlns:common="using:App1.Common"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <common:LayoutAwarePage.Resources>
        <DataTemplate x:Name="FullScreenItemTemplate">
            <TextBlock Text="{Binding}"
                       Foreground="Red"/>
        </DataTemplate>
        <DataTemplate x:Name="SnappItemTemplate">
            <TextBlock Text="{Binding}"
                       Foreground="Green"/>
        </DataTemplate>
        <DataTemplate x:Name="PortraitItemTemplate">
            <TextBlock Text="{Binding}"
                       Foreground="Yellow"/>
        </DataTemplate>
    </common:LayoutAwarePage.Resources>
        <Grid>
            <Grid>
                <ListView x:Name="ListViewDataTemplateExemple"
                              ItemsSource="{Binding SomeItemCollection}"
                              ItemTemplate="{StaticResource FullScreenItemTemplate}"/>
            </Grid>

            <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListViewDataTemplateExemple" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ListViewDataTemplateExemple" Storyboard.TargetProperty="ItemTemplate">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappItemTemplate}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
    </Grid>
    
</common:LayoutAwarePage>

Code behind:

public sealed partial class MainPage : LayoutAwarePage
    {
        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;           
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            var listItems = new List<string>
            {
                "first item",
                "second item",
                "third item"
            };
            this.ListViewDataTemplateExemple.ItemsSource = listItems;
        }
    }

You can find LayoutAwarePage class in standard Grid app.

Answer 4

That is appreciable , Thanks.

---

C Mahone