locked
[UWP][XAML]Changing ItemTemplate when selecting items in Gridview RRS feed

  • Question

  • Hi,

     I currently have 2 different ItemTemplate in my GridView where it shows the default state and selected state, and obviously change the selected item to selected state, and the others to back to default state.

    <Page.Resources>
      <DataTemplate x:Key="defaultState">
                <Grid BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="My Items Text" Foreground="Black"/>
                </Grid>
            </DataTemplate>
    
            <DataTemplate x:Key="selectedState">
                <Grid BorderBrush="Red" BorderThickness="1">
                    <TextBlock Text="My Items Text" Foreground="Red"/>
                </Grid>
            </DataTemplate>
    </Page.Resources>

    under my GridView

    <GridView Name="myGridView"
    ItemTemplate="{StaticResource defaultState}"
    ItemsSource="{Binding Path=myData}" />

    I tried running on Blend and edit a copy of the itemContainterStyle of the gridview, unfortunately under the State tab it didn't show anything and I was not able to add any states to it. Any help will be appreciated. Thanks!


    • Edited by Osirus Tuesday, December 15, 2015 12:47 AM
    Tuesday, December 15, 2015 12:44 AM

Answers

  • Hello,  Osirus.

    The DataTemplateSelector is also need to create class to get the DataTemplate.  

    Create Item.cs

      public class Item 
        {
            public string Name { get; set; }
            public string Content { get; set; }
        }
    
        public class DefaultStateTextItem : Item
        {
        }
    
        public class SelectedStateTextItem : Item
        {      
        }

    And Create MyDataTemplateSelector.cs

     public sealed class MyDataTemplateSelector : DataTemplateSelector
        {
            public DataTemplate DefaultStateTextTemplate { get; set; }
            public DataTemplate SelectedStateTextItemTextTemplate { get; set; }
    
            protected override DataTemplate SelectTemplateCore(object item,
                                                               DependencyObject container)
            {
                if (item is DefaultStateTextItem)
                    return DefaultStateTextTemplate;
                if (item is SelectedStateTextItem)
                    return SelectedStateTextItemTextTemplate;
                return base.SelectTemplateCore(item, container);
            }
        }


    The Xaml code.

     <Page.Resources>
            <DataTemplate x:Key="defaultState">
                <Grid BorderBrush="Black" BorderThickness="1">
                    <TextBlock Text="{Binding Content}" Foreground="Black"/>
                </Grid>
            </DataTemplate>
    
            <DataTemplate x:Key="selectedState">
                <Grid BorderBrush="Red" BorderThickness="1">
                    <TextBlock Text="{Binding Content}" Foreground="Red"/>
                </Grid>
            </DataTemplate>
            
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <GridView Name="myGridView"
                      SelectionChanged="myGridView_SelectionChanged"
     >
                <GridView.ItemTemplateSelector>
                    <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
            DefaultStateTextTemplate="{StaticResource defaultState}"
            SelectedStateTextItemTextTemplate="{StaticResource selectedState}">
                    </local:MyDataTemplateSelector>
                </GridView.ItemTemplateSelector>
            </GridView>
        </Grid>


    And the xaml.cs code

     public sealed partial class MainPage : Page
        {
           
            List<Item> items;
            public MainPage()
            {
                this.InitializeComponent();
                 items = new List<Item>();
    
                items.Add(new DefaultStateTextItem
                {
                    Name = "DefaultStateTextItem",
                    Content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur..."
                });
    
             
    
                items.Add(new DefaultStateTextItem
                {
                    Name = "DefaultStateTextItem",
                    Content = "Quisque sapien urna, fermentum sollicitudin vehicula in, cursus..."
                });
    
                items.Add(new DefaultStateTextItem
                {
                    Name = "DefaultStateTextItem",
                    Content = "Sed malesuada, mauris eu scelerisque blandit, magna erat rutrum velit... "
                });
    
                items.Add(new SelectedStateTextItem
                {
                    Name = "DefaultStateTextItem",
                    Content = "Integer blandit tempor nulla, id pretium ante egestas vel..."
                });
    
                myGridView.ItemsSource = items;
            }
        }

    I test the select the GridView and change the item, then put a breakpoint in the MyDataTemplateSelector.cs. The DataTemplateSelector will get the type of the item when the GridView load the data. 

    There is a case like your problem. DataTemplate

    Best regards,

    Jayden.


    Tuesday, December 15, 2015 6:37 AM