WPF之ListBox用法之一

介绍ItemTemplate用法以及在ItemTemplate模板中使用ListBoxItem属性的方法。

实现如下效果(点击某一项的时候该项图片进行放大)：

C#代码：

using System.Collections.ObjectModel;
using System.Windows;

namespace ListBox用法
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public ObservableCollection<Person> PList { get; set; }
        public MainWindow()
        {
            InitializeComponent();

            PList = new ObservableCollection<Person>();
            PList.Add(new Person { IsFemale = true, Name = "小红" });
            PList.Add(new Person { IsFemale = false, Name = "小明" });

            this.DataContext = this;
        }
    }

    public class Person
    {
        public bool IsFemale { get; set; }
        public string Name { get; set; }
    }
}

XAML代码：

<Window x:Class="ListBox用法.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ListBox用法"
        Title="MainWindow" Height="350" Width="525">
    <ListBox ItemsSource="{Binding PList}">
        <ListBox.ItemTemplate>
            <DataTemplate DataType="local:Person">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image x:Name="img">
                        <Image.Style>
                            <Style TargetType="Image">
                                <Setter Property="Width" Value="16"/>
                                <Setter Property="Height" Value="16"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsSelected,RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="true">
                                        <Setter Property="Width" Value="24"/>
                                        <Setter Property="Height" Value="24"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                    <TextBlock Grid.Column="1" Text="{Binding Name}"/>
                </Grid>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsFemale}" Value="true">
                        <Setter Property="Source" Value="./image/20140324072056503_easyicon_net_32.png" TargetName="img"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsFemale}" Value="false">
                        <Setter Property="Source" Value="./image/20140324072142365_easyicon_net_32.png" TargetName="img"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Window>

其中用了RelativeSource来寻找上级ListBoxItem对象来进行绑定达到目的。

代码

作者：FoolRabbit
出处：http://blog.csdn.net/rabbitsoft_1987
欢迎任何形式的转载，未经作者同意，请保留此段声明！