WP7 Toolkit ExpanderView 控件 介绍 02

这里来实现一个ListBox里面点击某项后 展示出它的选中项更多的数据

这时使用ExpanderView 来实现会非常简单

 

首先写实体类:

    public class CustomPizza : INotifyPropertyChanged 
    { 
        private bool isExpanded; 
        public string Image { get; set; } 
        public string Name { get; set; } 
        public DateTime DateAdded { get; set; } 
        public IList<PizzaOption> Options { get; set; } 
        public bool HasNoOptions 
        { 
            get { return this.Options == null || this.Options.Count == 0; }
        } 
        public bool IsExpanded 
        { 
            get { return this.isExpanded; } 
            set 
            {
                if (this.isExpanded != value) 
                { 
                    this.isExpanded = value;
                    this.OnPropertyChanged("IsExpanded");
                } 
            } 
        } 
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName) 
        { 
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null) 
            { 
                handler(this, new PropertyChangedEventArgs(propertyName)); 
            } 
        } 
    }

    public class PizzaOption 
    {
        public string Name { get; set; }
    } 

创建Images文件夹并放入4张图片

写入数据

public MainPage() 
{   
    List<CustomPizza> customPizzas = new List<CustomPizza>()    
    {    
        new CustomPizza() 
        { 
            Name = "Custom Pizza 1",
            DateAdded = new DateTime(2010, 7, 8),
            Image="Images/pizza1.png",  
            Options = new List<PizzaOption> 
            {     
                new PizzaOption() { Name = "Ham" },    
                new PizzaOption() { Name = "Mushrooms" },   
                new PizzaOption() { Name = "Tomatoes" }  
            }
        },     
        new CustomPizza() 
        { 
            Name = "Custom Pizza 2",
            DateAdded = new DateTime(2011, 2, 10), 
            Image="Images/pizza2.png", 
            Options = new List<PizzaOption> 
            {   
                new PizzaOption() { Name = "Ham" }, 
                new PizzaOption() { Name = "Olives" },
                new PizzaOption() { Name = "Mozzarella" }  
            }
        },      
        new CustomPizza() 
        {   
            Name = "Surprise Pizza",
            Image= null, 
            DateAdded = new DateTime(2011, 4, 1), 
            Options = null 
        },       
        new CustomPizza() 
        { 
            Name = "Custom Pizza 3", 
            Image="Images/pizza3.png", 
            DateAdded = new DateTime(2011, 5, 15), 
            Options = new List<PizzaOption>     
            {     
                new PizzaOption() { Name = "Salami" }, 
                new PizzaOption() { Name = "Mushrooms" },     
                new PizzaOption() { Name = "Onions" }     }
            }, 
         new CustomPizza() 
        { 
            Name = "Custom Pizza 4", 
            Image="Images/pizza4.png", 
            DateAdded = new DateTime(2011, 7, 20),
            Options = new List<PizzaOption>     
            {  
                new PizzaOption() { Name = "Pepperoni" }, 
                new PizzaOption() { Name = "Olives" }, 
                new PizzaOption() { Name = "Mozzarella" } 
            }
        },    
    };      
    //... 
} 

 

下面写前端页面,及数据跟UI的绑定

前面页面数据转换器:(比如08/08/2011年,我们即可以自动转换成文字"一个月以前")

<phone:PhoneApplicationPage.Resources> 

    <toolkit:RelativeTimeConverter x:Key="RelativeTimeConverter"/> 

</phone:PhoneApplicationPage.Resources> 

头部模板:

<phone:PhoneApplicationPage.Resources>

     <DataTemplate x:Key="CustomHeaderTemplate">  

           <TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>   

  </DataTemplate> 

</phone:PhoneApplicationPage.Resources> 

下拉扩展列表模板

<phone:PhoneApplicationPage.Resources>   

 <DataTemplate x:Key="CustomExpanderTemplate">   

  <StackPanel Orientation="Horizontal">        

<Image Source="{Binding Image}" Stretch="None"/>   

     <TextBlock Foreground="{StaticResource PhoneSubtleBrush}"   FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center"> 

        <TextBlock.Text> 

            <Binding Path="DateAdded" Converter="{StaticResource RelativeTimeConverter}" StringFormat="Date added: {0}" />   

      </TextBlock.Text>  

     </TextBlock>   

  </StackPanel>  

  </DataTemplate>

 </phone:PhoneApplicationPage.Resources> 

每ListBox的Item 模板

<phone:PhoneApplicationPage.Resources>    

    <DataTemplate x:Key="CustomItemTemplate">  

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

    </DataTemplate> 

</phone:PhoneApplicationPage.Resources> 

有没下拉列表时显示的模板

<phone:PhoneApplicationPage.Resources> 

   <DataTemplate x:Key="CustomNonExpandableHeaderTemplate"> 

    <StackPanel Orientation="Vertical"> 

       <TextBlock Text="{Binding Name}" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>   

     <TextBlock Foreground="{StaticResource PhoneSubtleBrush}" FontSize="{StaticResource PhoneFontSizeNormal}">      

           <TextBlock.Text> 

                     <Binding Path="DateAdded" Converter="{StaticResource RelativeTimeConverter}" StringFormat="Date added: {0}" />    

       </TextBlock.Text>      

  </TextBlock>          

 <TextBlock Text="The ingredients will be a surpise!"  Foreground="{StaticResource PhoneSubtleBrush}"FontSize="{StaticResource PhoneFontSizeNormal}" />   

  </StackPanel>   

 </DataTemplate> 

</phone:PhoneApplicationPage.Resources> 

这时添加一个ListBox

<ListBox Grid.Row="0" x:Name="listBox">

    <ListBox.ItemContainerStyle>

     <Style TargetType="ListBoxItem">

         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

     </Style> 

    </ListBox.ItemContainerStyle>

     <ListBox.ItemsPanel>

         <ItemsPanelTemplate>

             <StackPanel/>

         </ItemsPanelTemplate>

     </ListBox.ItemsPanel>

     <ListBox.ItemTemplate> 

        <DataTemplate>

             <toolkit:ExpanderView Header="{Binding}"   Expander="{Binding}" ItemsSource="{Binding Options}" NonExpandableHeader="{Binding}"IsNonExpandable="{Binding HasNoOptions}"  IsExpanded="{Binding IsExpanded, Mode=TwoWay}"HeaderTemplate="{StaticResource CustomHeaderTemplate}" ExpanderTemplate="{StaticResource CustomExpanderTemplate}"ItemTemplate="{StaticResource CustomItemTemplate}"NonExpandableHeaderTemplate="{StaticResource CustomNonExpandableHeaderTemplate}"/>

         </DataTemplate> 

    </ListBox.ItemTemplate>

 </ListBox>  

最后设置ListBox的ItemSource :this.listBox.ItemsSource = customPizzas;