User Tools

Site Tools


notes:uwp:datatemplate

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
notes:uwp:datatemplate [2016/12/21]
admin
notes:uwp:datatemplate [2020/08/26] (current)
Line 77: Line 77:
         }         }
     }     }
 +}
 +</code>
 +
 +The same template as above but defined in resources:
 +<code xml>
 +<Page x:Class="TestApp.MainPage"
 +      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 +      xmlns:local="using:TestApp">
 +
 +    <Page.Resources>
 +        <DataTemplate x:Key="PersonDataTemplate" x:DataType="local:Person">
 +            <StackPanel Orientation="Horizontal">
 +                <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0"/>
 +                <TextBlock Text="{x:Bind LastName}"/>
 +            </StackPanel>
 +        </DataTemplate>
 +    </Page.Resources>
 +
 +    <Grid>
 +        <ItemsControl ItemsSource="{x:Bind People}"
 +                      ItemTemplate="{StaticResource PersonDataTemplate}" />
 +    </Grid>
 +</Page>
 +</code>
 +
 +
 +Example: Select a //DataTemplate// dynamically in run-time using a class derived from //DataTemplateSelector//:
 +
 +{{uwp_TemplateSelector1.PNG}}
 +
 +<code xml>
 +<Page x:Class="TestApp.MainPage"
 +      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 +      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 +      xmlns:local="using:TestApp">
 +
 +    <Page.Resources>
 +        <DataTemplate x:Key="PersonDefaultTemplate" x:DataType="local:Person">
 +            <StackPanel Orientation="Horizontal" Padding="4">
 +                <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0" />
 +                <TextBlock Text="{x:Bind LastName}" />
 +            </StackPanel>
 +        </DataTemplate>
 +        <DataTemplate x:Key="PersonDisabledTemplate" x:DataType="local:Person">
 +            <StackPanel Orientation="Horizontal" Padding="4" Background="Gray">
 +                <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0" Foreground="White" />
 +                <TextBlock Text="{x:Bind LastName}" Foreground="White" />
 +            </StackPanel>
 +        </DataTemplate>
 +
 +        <local:CustomTemplateSelector x:Key="CustomTemplateSelector" 
 +                                      DefaultTemplate="{StaticResource PersonDefaultTemplate}" 
 +                                      DisabledTemplate="{StaticResource PersonDisabledTemplate}" />
 +    </Page.Resources>
 +
 +    <Grid>
 +        <ItemsControl ItemsSource="{x:Bind People}" 
 +                      ItemTemplateSelector="{StaticResource CustomTemplateSelector}" />
 +    </Grid>
 +</Page>
 +</code>
 +
 +<code csharp>
 +using System.Collections.ObjectModel;
 +using Windows.UI.Xaml;
 +using Windows.UI.Xaml.Controls;
 +
 +namespace TestApp
 +{
 +    class Person
 +    {
 +        public string FirstName { get; set; }
 +        public string LastName { get; set; }
 +        public bool IsDisabled { get; set; }
 +    }
 +
 +    public sealed partial class MainPage : Page
 +    {
 +        private ObservableCollection<Person> People;
 +
 +        public MainPage()
 +        {
 +            this.InitializeComponent();
 +
 +            People = new ObservableCollection<Person>();
 +
 +            Loaded += MainPage_Loaded;
 +        }
 +
 +        private void MainPage_Loaded(object sender, RoutedEventArgs e)
 +        {
 +            People.Add(new Person { FirstName = "John", LastName = "Makak", IsDisabled = false });
 +            People.Add(new Person { FirstName = "Steve", LastName = "Gibbon", IsDisabled = true });
 +            People.Add(new Person { FirstName = "Mike", LastName = "Chimp", IsDisabled = false });
 +        }
 +    }
 +
 +    class CustomTemplateSelector : DataTemplateSelector
 +    {
 +        public DataTemplate DefaultTemplate { get; set; }
 +        public DataTemplate DisabledTemplate { get; set; }
 +
 +        // Return the appropriate template.
 +        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
 +        {
 +            Person person = item as Person;
 +            if (person != null)
 +            {
 +                if (person.IsDisabled)
 +                    return DisabledTemplate;
 +            }
 +
 +            return DefaultTemplate;
 +        }
 +    }
 +}
 +</code>
 +
 +
 +Example: Change //DataTemplate// (and //ItemsPanelTemplate//) dynamically in code. We assume appropriate templates are defined in resources. To retrieve templates from application resources use //Application.Current.Resources// rather than //this.Resources//.
 +<code csharp>
 +// viewType is a variable of type enum 
 +switch(viewType)
 +{
 +    case ViewType.Default:
 +        {
 +            DataTemplate defaultTemplate = this.Resources["DefaultDataTemplate"] as DataTemplate;
 +            GridView1.ItemTemplate = defaultTemplate;
 +            GridView1.ItemsPanel = this.Resources["DefaultPanelTemplate"] as ItemsPanelTemplate;
 +        }
 +        break;
 +    case ViewType.Compact:
 +        {
 +            DataTemplate compactTemplate = this.Resources["CompactDataTemplate"] as DataTemplate;
 +            GridView1.ItemTemplate = compactTemplate;
 +            GridView1.ItemsPanel = this.Resources["CompactPanelTemplate"] as ItemsPanelTemplate;
 +        }
 +        break;
 +    case ViewType.Grid:
 +        {
 +            DataTemplate gridTemplate = this.Resources["GridDataTemplate"] as DataTemplate;
 +            GridView1.ItemTemplate = gridTemplate;
 +            GridView1.ItemsPanel = this.Resources["GridPanelTemplate"] as ItemsPanelTemplate;
 +        }
 +        break;
 +    default:
 +        throw new ArgumentException("Unrecognized view type.");
 } }
 </code> </code>
  
notes/uwp/datatemplate.1482328345.txt.gz ยท Last modified: 2020/08/26 (external edit)