Silverlight学习笔记（4）——数据绑定ListBox

本文将建立一个silverlight项目中运用ListBox演示数据绑定的简单实例，以下是详细步骤：

---

    在Silverlight项目中新建一个silverlight页，修改布局使其显示一个ListBox，本例Grid布局可以如下，

        <Grid.RowDefinitions >
            <RowDefinition Height="auto"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="600"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.Column="0">
            <ListBox x:Name="ListBox1" ItemsSource="{Binding Mode=OneWay}" Style="{StaticResource ListBoxStyle1}" ScrollViewer.VerticalScrollBarVisibility="Disabled" />
        </Border>

注意到ListBox1，数据源ItemsSource采用的是Binding绑定的方式，样式Style使用的是样式资源ListBoxStyle1

---

为了方便演示数据，定义一个Person类，另加几张图片用以演示，

Person类的定义如下，

    public class Person
    {
        private int _ID;
        public int ID
        {
            get { return _ID; }
            set { _ID = value; }
        }

        private string _sImgPath;
        public string sImgPath
        {
            get { return _sImgPath; }
            set { _sImgPath = value; }
        }

        private string _sLastName;
        public string sLastName
        {
            get { return _sLastName; }
            set { _sLastName = value; }
        }

        private string _sFirstName;
        public string sFirstName
        {
            get { return _sFirstName; }
            set { _sFirstName = value; }
        }

        public Person(int id, string simgpath, string slastname, string sfirstname)
        {
            this._ID = id;
            this._sImgPath = simgpath;
            this._sLastName = slastname;
            this._sFirstName = sfirstname;
        }

        public static Person[] Persons =
        {
            new Person(1,"../Images/qq_1.jpg","King","Robert"),
            new Person(2,"../Images/qq_2.jpg","Davolio","Nancy"),
            new Person(3,"../Images/qq_3.jpg","Fuller","Andrew"),
            new Person(4,"../Images/qq_4.jpg","Leverling","Janet"),
            new Person(5,"../Images/qq_5.jpg","Peacock","Margaret"),
            new Person(6,"../Images/qq_6.jpg","Buchanan","Steven"),
            new Person(7,"../Images/qq_7.jpg","Suyama","Michael"),
            new Person(8,"../Images/qq_8.jpg","Callahan","Laura"),
            new Person(9,"../Images/qq_9.jpg","Dodsworth","Anne"),
            new Person(10,"../Images/qq_10.jpg","Accorti","Paolo"),
            new Person(11,"../Images/qq_11.jpg","Afonso","Pedro"),
            new Person(12,"../Images/qq_12.jpg","Ashworth","Victoria"),
            new Person(13,"../Images/qq_13.jpg","Bennett","Helen"),
            new Person(14,"../Images/qq_14.jpg","Brown","Lesley")
        };
    }

注意图片sImgPath使用的虚拟路径的写法，

在Page页的代码中，实例化一些Person，作为ListBox1的数据源

        // 当用户导航到此页面时执行。
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.ListBox1.DataContext = Person.Persons;
        }

 

---

    ListBox1的数据源有了，现在完成样式ListBoxStyle1，来设置我们需要显示什么数据，以及如何展示，

           <Style x:Key="ListBoxStyle1" TargetType="ListBox" >
                <Setter Property="Height" Value="400"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value >
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Background="#FF484848"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" >
                    <Setter.Value >
                        <DataTemplate >
                            <Grid>
                                <Grid.ColumnDefinitions >
                                    <ColumnDefinition Width="200"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="20"/>
                                    <RowDefinition Height="20"/>
                                    <RowDefinition Height="20"/>
                                    <RowDefinition Height="300"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" FontSize="16" HorizontalAlignment="Center" Text="{Binding ID}" />
                                <TextBlock Grid.Row="1" FontSize="16" HorizontalAlignment="Center" Text="{Binding sFirstName}" />
                                <TextBlock Grid.Row="2" FontSize="16" HorizontalAlignment="Center" Text="{Binding sLastName}" />
                                <Border Grid.Row="3" BorderThickness="2" BorderBrush="White" Background="{Binding ID,Converter={StaticResource Person_ID_Converter}}" >
                                    <Image Width="170" Height="270" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Source="{Binding sImgPath}" />
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

显示区域ItemsPanel的Template模板，使用一个StackPanel布局控件，这里采用了横布局Orientation设置为水平Horizontal，

显示数据Data的展示模板Template，用到了三个TextBlock的Text属性，分别用来显示Person实体的ID,sFirstName,sLastName三个string属性，另用一个Image来显示图片，图片源Source="{Binding sImgPath}"从Person的sImgPath属性获取图片路径

---

    注意到用来显示图片的Border区域，背景Background="{Binding ID,Converter={StaticResource Person_ID_Converter}}"，这里用到了数据格式化，在项目中添加一个数据格式化方法Person_ID_Converter.cs，

Person_ID_Converter类继承自IValueConverter接口，可以通过加数据判断，格式出我们需要的结果，

   public class Person_ID_Converter : IValueConverter
    {

        #region IValueConverter 成员

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int id = (Int32)value;
            SolidColorBrush scb = new SolidColorBrush();
            if (id % 2 == 0)
            {
                scb = new SolidColorBrush(Colors.Yellow);
            }
            else
            {
                scb = new SolidColorBrush(Colors.Green);
            }
            return scb;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string strValue = value.ToString();
            Int32 result;
            if (Int32.TryParse(strValue, out result))
            {
                return result;
            }
            return value;
        }

        #endregion
    }

注意到ConvertBack方法只在绑定方式为TwoWay时才会调用，这里不予讨论，Convert方法是在将数据源传递到绑定目标时调用，本例进行了简单处理，通过判断传递的数据id，为奇数时返回一个颜色为Green的画笔，为偶数时返回一个颜色为Yellow的画笔

---

    重新生成项目，F5运行，

ListBox1被设置成了横向水平布局，ID,sFirstName,sLastName被显示在了TextBlock中，图片img的路径来此Person类的sImgPath属性，加上Person_ID_Converter格式化方法，通过判断ID的奇偶性，达到图片背景色不通来间隔显示的效果

---

Silverlight学习笔记目录