CODEWITHSUNDEEP
xamlwinrt-xamluwp
Alastair
Alastair

Reputation: 370

Dynamically change DataTemplate for a ListView at Runtime

I have 2 DataTemplates for displaying the contents of ClassA or ClassB inside a single ListView; which template to select will be based on a RadioButton selection by the user.

Is it possible to change the ItemTemplate of a ListView (in XAML) based on user input dynamically at runtime?

An example snippet of code:

XAML Page:

<Page...>
    <Page.Resources>
        <DataTemplate x:Key="ClassAListViewItemTemplate" x:DataType="vm:ClassA" ... />
        <DataTemplate x:Key="ClassBListViewItemTemplate" x:DataType="vm:ClassB" ... />    
    </Page.Resources>
    <RelativePanel>
        <RadioButton Content="ClassA" ... />
        <RadioButton Content="ClassB" ... />
        <ListView DataContext="{Binding Path=MainViewModel}"
                  ItemsSource="{Binding ListOfClassAOrB, Mode=TwoWay}"
                  ItemTemplate="{StaticResource ClassAListViewItemTemplate}"/>
    </RelativePanel>
</Page>

I have stripped the code down somewhat to the essentials, but I would like to be able to change the following at runtime:

ItemTemplate="{StaticResource ClassAListViewItemTemplate}"

I have seen solutions for Classic WPF applications that use Style.Triggers, but these aren't applicable for UWP

Marco Minerva's blog on Adaptive Triggers, RelativePanel and DataTemplate in the Universal Windows Platform talks of using UserControls within DataTemplates to modify the visual state using Adaptive Triggers, but this doesn't take into account switching out of templates based on user input

The closest answer I have found to my problem is another blog he wrote "Dynamically choose DataTemplate in WinRT" where there is an element of code-behind involved - but it only appears to be an if statement - but its the cleanest solution I have come across thus far, and what I'd like to replicate in XAML

Thanks

Upvotes: 2

Views: 3257

Answers (1)

user2198468
user2198468

Reputation: 21

you need to use overwrite SelectTemplateCore of Data template. Change your view model like this. Below code will helps you. 

public class SampleViewModel : DataTemplateSelector
{
    public DataTemplate ClassAListViewItemTemplate{ get; set; }
    public DataTemplate ClassBListViewItemTemplate{ get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        var itemsData = item as SampleClass; // add your Data class 
        if (itemsData.IsAddButton == false) // define any property to select the datatemplate
        {
            return ClassAListViewItemTemplate;
        }
        else
        {
            return ClassBListViewItemTemplate;
        }
    }
}

Add your two datatemplates to one key, and give the key to ItemTemplateSelector property in gridview.

<viewModels:SampleViewModel x:Key="FeedbackTempateSelector"
    ClassAListViewItemTemplate="{StaticResource ClassAListViewItemTemplate}"
    ClassBListViewItemTemplate="{StaticResource ClassBListViewItemTemplate}">

</viewModels:SampleViewModel>

Upvotes: 2

Related Questions