WPF XAML集合绑定

绑定集合是将数据集合绑定到控件中的值

工具/原料

 

• VS2012 for Windows phone
• win8 操作系统

方法/步骤

 

1. 1

   model层

   namespace MyBindingDataDemo.Model

   {

       public class Food

       {

           public string Name

           {

               get;

               set;

           }

    

           public string Description

           {

               get;

               set;

           }

    

           public string IconUri

           {

               get;

               set;

           }

    

           public string Type

           {

               get;

               set;

           }

    

       }

   }

    

2. 2

   VM层

   using System;

   using System.Collections.Generic;

   using System.Linq;

   using System.Text;

   using System.Threading.Tasks;

   using System.ComponentModel;

   using System.Collections.ObjectModel;

   using MyBindingDataDemo.Model;

    

   namespace MyBindingDataDemo.ViewModel

   {

       public class FoodViewModel :  INotifyPropertyChanged

       {

           public event  PropertyChangedEventHandler PropertyChanged;

           private ObservableCollection<Food> _allFood;

    

           public ObservableCollection<Food> AllFood 

           { 

               get

               {

                   if (_allFood == null)

                   

                       _allFood = new ObservableCollection<Food>();                   

               

                   return _allFood;

               }

    

               set

               {

                   if (_allFood != value)

                   {

                       _allFood = value;

                       NotifyPropertyChanged("AllFood");

                     

                   }

               }

                       

           }

    

           public void NotifyPropertyChanged(string p)

           {

               if (PropertyChanged != null) 

               {

                   PropertyChanged(this,new PropertyChangedEventArgs(p)); 

               }

           }

    

           public FoodViewModel()

           {

               try

               {

                   Food item0 = new Food()

                   {

                       Name = "tomato",

                       IconUri = "Images/Tomato.png",

                       Type = "Healthy",

                       Description = "It teaste very delicious!"

                   };

                   Food item1 = new Food()

                   {

                       Name = "eggplant",

                       IconUri = "Images/Beer.png",

                       Type = "NotDetermined",

                       Description = "I donnot know the feel of it!"

                   };

                   Food item2 = new Food()

                   {

                       Name = "hamt",

                       IconUri = "Images/fries.png",

                       Type = "Unhealthy",

                       Description = "I donnot know the feel of it!"

                   };

    

                   AllFood.Add(item0);

                   AllFood.Add(item1);

                   AllFood.Add(item2);

    

               }

               catch(Exception e) {

                   System.Windows.MessageBox.Show("Exception" + e.Message);

               }

           }

       }

   }

    

3. 3

   XAML　ｖｉｅｗ层

   <phone:PhoneApplicationPage

       x:Class="MyBindingDataDemo.MainPage"

       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

        xmlns:my="clr-namespace:MyBindingDataDemo.ViewModel"

       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      

       mc:Ignorable="d"

       FontFamily="{StaticResource PhoneFontFamilyNormal}"

       FontSize="{StaticResource PhoneFontSizeNormal}"

       Foreground="{StaticResource PhoneForegroundBrush}"

       SupportedOrientations="Portrait" Orientation="Portrait"

       shell:SystemTray.IsVisible="True">

    

       <phone:PhoneApplicationPage.Resources>

           <my:FoodViewModel x:Key="food"/>

           </phone:PhoneApplicationPage.Resources>

    

    

       <!--LayoutRoot 是包含所有页面内容的根网格-->

       <Grid x:Name="LayoutRoot" Background="White">

           

           <Grid.RowDefinitions>

               <RowDefinition Height="Auto"/>

               <RowDefinition Height="*"/>

           </Grid.RowDefinitions>

    

           <!-- 本地化说明:

               若要本地化显示的字符串，请将其值复制到应用程序的非特定语言资源文件(AppResources.resx)

               中的适当命名的键，然后

               将属性的引号之间的硬编码文本值

               替换为其路径指向该字符串名称的绑定子句。

    

               例如:

    

                   Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

    

               此绑定指向模板的名为“ApplicationTitle”的字符串资源。

    

               在“项目属性”选项卡中添加受支持的语言将会为

               每种语言创建一个新的 resx 文件，该文件可以包含 UI 字符串的翻译值

               。这些示例中的绑定将导致在运行时从

               与应用程序的 CurrentUICulture 匹配的 .resx 文件中

               提取属性的值。

            -->

    

           <!--TitlePanel 包含应用程序的名称和页标题-->

           <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

               <TextBlock Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Blue"/>

               <TextBlock Text="数据绑定" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="Blue"/>

           </StackPanel>

    

           <!--ContentPanel - 在此处放置其他内容-->

           <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" DataContext="{StaticResource food}">

               <ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding AllFood}">

                   <ListBox.ItemTemplate>

                       <DataTemplate>

                           <StackPanel Orientation="Horizontal" Background="Gray" Width="450" Margin="10">

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

                               <TextBlock Text="{Binding Name}" FontSize="40" Width="150"/>

                               <TextBlock Text="{Binding Description}" FontSize="20" Width="280" />

                           </StackPanel>

                       </DataTemplate>

                   </ListBox.ItemTemplate>

               </ListBox>

    

    

           </Grid>

    

           <!--取消注释，以显示对齐网格，从而帮助确保

               控件在公用边界上对齐。图像在系统栏中显示时的

               上边距为 -32px。如果隐藏了系统栏，则将此值设为 0

               (或完全删除边距)。

    

               在发送之前删除此 XAML 和图像本身。-->

           <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

       </Grid>

    

   </phone:PhoneApplicationPage>

    

4. 4

   运行结果

    

   

   
5. 5

   public void NotifyPropertyChanged(string p)

           {

               if (PropertyChanged != null) 

               {

                   PropertyChanged(this,new PropertyChangedEventArgs(p)); 

               }

           }

    

   END

注意事项

 

• public event PropertyChangedEventHandler PropertyChanged;　　定义属性改变事件
• ItemsSource="{Binding AllFood}"