(XAML)Working with ItemsControls

Copyright

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 6번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 강의 원작자분께 게시허가도 받았습니다.

Content

1. Basic Elements, Shapes, Brushes, and Masks

2. Control Basics and Interacting with them

3. Panels and the Layout System

4. Data Binding Essentials

5. Working with ItemsControls

6. Using Resources and Styling Controls

7. Debugging and Analyzing XAML

8. Choosing the Right Tool for the Job

ItemsControl (<-- Control)

One of the content model classes (http://empisterian.tistory.com/10)

Base class for ListBox, ComboBox, etc

Exposes ItemsSource, a property to assign the collection(IEnumerable) to generate content

ItemsPanel

ItemsPanel of type ItemsPanelTemplate. ItemsPanelTemplate은 생성된 item들을 담는 panel을 정의한다. Control을 상속하는 각 ItemsControl은 default ItemsPanel을 가진다(ex ListBox의 디폴트 ItemsPanel은 StackPanel이고 이 속성을 통해 변경이 가능하다.)

ItemContainer

For each item in the data collection we set this ItemsSource, and ItemContainer is created behind the scenes, which holds the item. Each ItemsControl type has a corresponding ItemContainer type(ex For ListBox the ItemContainers are ListBoxItem controls. For ComboBox they are ComboBoxItem controls, and so on). They are automatically generated by the specific ItemsControl for each item the ItemsControl needs to display and they contain the data for that item.

ItemTemplate

This property should be set to something of type DataTemplate, which is what will define how each data object will be visualized.

ex   <ListBox Width="300" Height="300"

                     HorizontalAlignment="Center" VerticalAlignment="Center"

                     ItemsSource="{x:Bind personRepo.Peaple, Mode=OneWay}">

              <ListBox.ItemsPanel>

                    <ItemsPanelTemplate>

                        <StackPanel Orientation="Horizontal"/>     //Set Horizontal StackPanel in ItemsPanel

                    </ItemsPanelTemplate>

              </ListBox.ItemsPanel>

              <ListBox.ItemTemplate>

                   <DataTemplate x:DataType="model:Person">   //Set TextBlocks to visualize collection data

                        <StackPanel Orientation="Vertical">

                            <TextBlock Text="{x:Bind Name}"/>

                            <TextBlock Text="{x:Bind Age}"/>

                        </StackPanel>

                   </DataTemplate>

              </ListBox.ItemTemplate>

       </ListBox>

DataTemplateSelector

DataTemplateSelector로 collection의 각 item들에게 서로 다른 DataTemplate를 적용시켜 다르게 시각화시킬 수 있다.

1. DataTemplateSelector를 상속하는 클래스를 만든다.

2. Override and implement the SelectTemplate method

3. Assign an instance of it to the ItemTemplateSelector property of the ItemsControl

ex   public class PersonDataTemplateSelector : DataTemplateSelector

{

          public DataTemplate UnderThirtyTemplate { get; set; }

          public DataTemplate ThirtyOrOlderTemplate { get; set; }

          protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)

//item = data item

          {

              var person = item as Models.Person;

              if(person.Age < 30) return UnderThirtyTemplate;

              else return ThirtyOrOlderTemplate;

          }

}

<Page.Resources>

      <DataTemplate x:Key="dtYoungerThenThirty">

            <StackPanel Orientation="Vertical">

                <TextBlock Text="{Binding Name}"/>

                <TextBlock Text="{Binding Age}" Foreground="Blue"/>

            </StackPanel>

      </DataTemplate>

      <DataTemplate x:Key="dtOlderThenThirty">

            <StackPanel Orientation="Vertical">

                <TextBlock Text="{Binding Name}"/>

                <TextBlock Text="{Binding Age}" Foreground="Red"/>

            </StackPanel>

      </DataTemplate>

      <helper:PersonDataTemplateSelector x:Key="personDTS"

                                           ThirtyOrOlderTemplate="{StaticResource dtOlderThenThirty}"

                                           UnderThirtyTemplate="{StaticResource dtYoungerThenThirty}"/>

 </Page.Resources>

<ListBox Width="300" Height="300"

                     HorizontalAlignment="Center" VerticalAlignment="Center"

                     ItemTemplateSelector="{StaticResource personDTS}"

                     ItemsSource="{x:Bind personRepo.Peaple, Mode=OneWay}">

 </ListBox>

Notifying the UI : Collections

The collection should implement the INotifyCollectionChanged interface to be notified by changes of collection

This interface exposes a CollectionChanged event that should be invoked when the UI should be notified

There is a building collection that already implements this interface, the ObservableCollection<T>.

Summary(생략)

출처

이 모든 내용은 Pluralsight에 Kevin Dockx가 올린 'XAML Jumpstart : Getting Started With XAML' 이라는 강의의 6번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-jumpstart/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.