wpf 研习1-24小时自学wpf16

Visualizing Lists-displaying model

 

The Control Hierarchy

The most common list-related classes

 

 

The most common contentrelated classes

Dissecting ItemsControl 

Items,What items should be displayed in two ways,Add method,or done in XAML by declaring multiple child elements;

 

property-ItemsSource(Gets or sets a collection used to generate the content of the ItemsControl.),the performance of ItemsControl and some advanced data binding scenarios are influenced by what type of collection you use for the ItemsSource:

In general,ObservableCollection is the best in terms of performance and features, followed by List, and ending with plain old IEnumerable.

 

Rendering,

 

ItemContainerGenerator,to interact with the automatic system generation of container for the UI control,several methods are essential:ItemFromContainer,ContainerFromItem

 

DataTemplateSelector,classic using scenario-sometimes a user interface’s portrayal of data needs to be based on complex logic and can only be determined at runtime,then inherit from this class and override its SelectTemplate method.

 

public class MyTemplateSelector : DataTemplateSelector
{
  public override DataTemplate SelectTemplate(object item, DependencyObject container)
 {
   DataTemplate dataTemplate;
   //custom logic for determining the template
   return dataTemplate;
  }
}

 

(1)the custom selector is generally instantiated in a Resources collection;

(2)At runtime, the item parameter of the SelectTemplate method refers to the data that is being displayed by the template, and the container parameter refers to the UI container that is hosting the data (such as a ListBoxItem);

(3)The SelectTemplate method programmatically determines which of these templates to use based on properties of the data item.

(4)another way to alter the appearance of templates at runtime without resorting to custom code:Triggers.

 

StyleSelector,

StyleSelector follows the same pattern as DataTemplateSelector, except that it has a SelectStyle method.  

 

 

Layout

ItemsPanelTemplate.ItemsPanel,describes what type of Panel should be used to lay out the items;VirtualizingStackPanel is the default panel template,a special type of StackPanel that is smart enough to not attempt the rendering of nonvisible elements.we could tell the ItemsControl to use a Grid, a Canvas, or any other Panel, though.

 

Another way to customize layout of items in ItemsControl,is by setting the GroupStyle (or the GroupStyleSelector) property(Using a CollectionViewSource, you can specify how items should be grouped.Meanwhile,ItemsControl understands these groups and will attempt to render them according to the GroupStyle).

 

everything that inherits from ItemsControl has these capabilities.

 

 

Customizing the SideBar

 

 //SideBar.xaml

    <UserControl.Resources>
        <CollectionViewSource x:Key="contactSource"
                              Source="{Binding CurrentContacts}">
            <CollectionViewSource.SortDescriptions>
                <cm:SortDescription PropertyName="LookupName" />
            </CollectionViewSource.SortDescriptions>
        </CollectionViewSource>
    </UserControl.Resources>

...

            <ItemsControl Width="250"
                          VerticalAlignment="Stretch"
                          BorderThickness="0"
                          ItemsSource="{Binding Source={StaticResource contactSource}}"
                          ButtonBase.Click="OpenContact_Click">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="2">
                            <Border Margin="2 2 0 0"
                                    CornerRadius="4"
                                    Background="Gray"
                                    Opacity=".5" />
                            <Border BorderBrush="{StaticResource redBrush}"
                                    BorderThickness="2"
                                    CornerRadius="4"
                                    Background="White"
                                    Margin="0 0 2 2"
                                    Padding="3">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <TextBlock Grid.ColumnSpan="2"
                                               FontWeight="Bold"
                                               Text="{Binding LookupName}" />
                                       
                                        <TextBlock Grid.Row="1"
                                                   Text="   Office: " />
                                        <TextBlock Grid.Row="1"
                                                   Grid.Column="1"
                                                   Text="{Binding Path=OfficePhone, Converter={StaticResource phoneConverter}}" />
                                           
                                        <TextBlock Grid.Row="2"
                                                   Text="   Email: " />
                                        <TextBlock Grid.Row="2"
                                                   Grid.Column="1"
                                                   Text="{Binding PrimaryEmail}" />
                                    </Grid>
                            </Border>
                            <Button Style="{StaticResource openButton}" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </DockPanel>
</UserControl>

 

Applying Data Templates

 

(1)A DataTemplate is similar to a Style in the way that it can be set.f.e,store a template in Resources somewhere,give it an x:Key,then use StaticResource set the ItemTemplate property;

 

(2)Another way in which DataTemplate is similar to Style is that it has a DataType property that functions the same as a style’s TargetType.So, we could have declared our template with this property DataType=”{x:Type ns:Contact}”(where ns is a declared namespace);

 

(3)data templates work with ContentControl and its inheritors. f.e,so you could set the Content property to a Contact,the ContentControl would search the Resources for an appropriate template.

 

Selector Class,its functionality is shared by several very commonly used controls: ComboBox, ListBox, ListView, and TabControl;

 

Selector takes all the functionality of ItemsControl and adds to it the capability to select one or more items;

 

property-

SelectedItem,determine which item is selected (or set the selected item);

SelectedIndex,represents which element index in the Items collection is selected;

IsSynchronizedWithCurrentItem,allows you to synchronize the selection across multiple selectors(For example, you might have two ComboBox instances bound to the same collection, and they need to keep their SelectedItem synchronized);

 

event-

SelectionChanged;

 

//实例

//app.xaml

  <ObjectDataProvider  x:Key="stateNames"
                                     MethodName="GetNames"
                                     ObjectType="{x:Type Model:States}" />
 

并且增加,

 xmlns:Model=”clr-namespace:ContactManager.Model”

 

//EditContactView.xaml

 <ComboBox x:Name="state"
                     Grid.Row="2"
                     Grid.Column="3"
                     ItemsSource="{Binding Source={StaticResource stateNames}}"
                     SelectedItem="{Binding Contact.Address.State}" />

//扩展,调试.查看在多个tab间选择不同的state的结果

                     IsSynchronizedWithCurrentItem=”True” 

 

(ObjectDataProvider is a simple class that lets us point to an ObjectType and a Method. At runtime, the provider locates the ObjectType and calls the method to obtain a set of data. By placing this in the application resources, we have made available a single state list that the entire application can use.)

 

//States.cs
using System.Collections.Generic;

namespace ContactManager.Model
{
    public static class States
    {
        private static readonly List<string> _names;

        static States()
        {
            _names = new List<string>(50);

            _names.Add("Alabama");
            _names.Add("Alaska");
            _names.Add("Arizona");
            _names.Add("Arkansas");
            _names.Add("California");
            _names.Add("Colorado");
            _names.Add("Connecticut");
            _names.Add("Delaware");
            _names.Add("Florida");
            _names.Add("Georgia");
            _names.Add("Hawaii");
            _names.Add("Idaho");
            _names.Add("Illinois");
            _names.Add("Indiana");
            _names.Add("Iowa");
            _names.Add("Kansas");
            _names.Add("Kentucky");
            _names.Add("Louisiana");
            _names.Add("Maine");
            _names.Add("Maryland");
            _names.Add("Massachusetts");
            _names.Add("Michigan");
            _names.Add("Minnesota");
            _names.Add("Mississippi");
            _names.Add("Missouri");
            _names.Add("Montana");
            _names.Add("Nebraska");
            _names.Add("Nevada");
            _names.Add("New Hampshire");
            _names.Add("New Jersey");
            _names.Add("New Mexico");
            _names.Add("New York");
            _names.Add("North Carolina");
            _names.Add("North Dakota");
            _names.Add("Ohio");
            _names.Add("Oklahoma");
            _names.Add("Oregon");
            _names.Add("Pennsylvania");
            _names.Add("Rhode Island");
            _names.Add("South Carolina");
            _names.Add("South Dakota");
            _names.Add("Tennessee");
            _names.Add("Texas");
            _names.Add("Utah");
            _names.Add("Vermont");
            _names.Add("Virginia");
            _names.Add("Washington");
            _names.Add("West Virginia");
            _names.Add("Wisconsin");
            _names.Add("Wyoming");
        }

        public static IList<string> GetNames()
        {
            return _names;
        }
    }
}

 

ItemsControl is one of the most important base classes in WPF, this control provides a great deal of functionality that will affect much of what you build with this technology. This control allows for the rendering of multiple items, allowing for custom templating and stylization of each item in the list. Additionally, ItemsControl can arrange its items using any type of Panel and can perform grouping of items as well. For selectable lists, WPF offers Selector and its descendents, each one meeting a specific UI need and providing a wealth of UI possibilities.

 

扩展：

RangeBase,TextBoxBase;

XmlDataProvider

 

小结：

The DataTemplate could be declared (1)inline using the ItemTemplate property.(2)It could also be declared in a Resources collection and applied either by keyor type. (3)Finally, a DataTemplateSelector can be used to apply the template based on advanced runtime conditions.