WPF 自定義listbox的ItemTemplate實現通訊錄




<Window x:Class="ListSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <!--這裏定義了複選框的樣式 我用兩張圖片代替選中與不選中-->
        <Style TargetType="CheckBox">
                <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="CheckBox">
                                <Image HorizontalAlignment="Left" Name="image1"
                                         Stretch="Fill" VerticalAlignment="Top" Width="16" Height="16"
                             Source="/ListSample;component/images/checkd.png" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsChecked" Value="False">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="CheckBox">
                                <Image HorizontalAlignment="Left" Name="image1"
                                        Stretch="Fill" VerticalAlignment="Top" Width="16" Height="16"
                             Source="/ListSample;component/images/uncheck.png" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListBox Margin="64,45,0,55" Name="listBox1" Width="260" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="0,0,0,1" Width="200" BorderBrush="#FFB4A1A1" >
                        <Grid Name="grid1" Width="auto">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40" />
                                <ColumnDefinition Width="50" />
                                <ColumnDefinition Width="110*" />
                            </Grid.ColumnDefinitions>
                            <CheckBox IsChecked="{Binding UserSelect}" Margin="10,25,10,25"/>
                            <Image Grid.Column="1" Name="image1" Source="{Binding UserIco}" Margin="10,10,10,10"/>
                            <TextBlock  Margin="5,10,5,5" Grid.Column="2" Height="23" Name="textBlock1" Text="{Binding UserName}" VerticalAlignment="Top" />
                            <TextBlock  Grid.Column="2" Height="23" Margin="5,33,5,5" Name="textBlock2" Text="{Binding UserNum}" VerticalAlignment="Top" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="測試" Height="23" HorizontalAlignment="Right" Margin="0,124,78,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>
</Window>

C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.ComponentModel;

namespace ListSample
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Init();
        }
        ObservableCollection<User> Users = new ObservableCollection<User>();
        void Init()
        {
            Users.Add(new User() { UserName = "Cs",UserNum = "+86123456"});
            Users.Add(new User() { UserName = "Jxy", UserNum = "+86123456" });
            Users.Add(new User() { UserName = "Lmf", UserNum = "+86123456" });
            Users.Add(new User() { UserName = "asd", UserNum = "+86123456" });
            Users.Add(new User() { UserName = "張三", UserNum = "+86123456" });
            this.listBox1.ItemsSource = Users;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            string s = "";
            foreach (var user in Users)
            {
                if (user.UserSelect)
                {
                    s += user.ToString();
                }
            }
            MessageBox.Show(s);
        }
    }

    public class User : INotifyPropertyChanged
    {
        bool _UserSelect;

        public bool UserSelect
        {
            get { return _UserSelect; }
            set { _UserSelect = value; FirePropertyChanged("UserSelect"); }
        }

        string _UserName;

        public string UserName
        {
            get { return _UserName; }
            set { _UserName = value; FirePropertyChanged("UserName"); }
        }

        string _UserNum;

        public string UserNum
        {
            get { return _UserNum; }
            set { _UserNum = value; FirePropertyChanged("UserNum"); }
        }


        string _UserIco = AppDomain.CurrentDomain.BaseDirectory + "imgs\\user.png";

        public string UserIco
        {
            get { return _UserIco; }
            set { _UserIco = value; FirePropertyChanged("UserIco"); }
        }

        public override string ToString()
        {
            return UserName + " : " + UserNum + "\n";
        }

        public virtual event PropertyChangedEventHandler PropertyChanged;

        public virtual void FirePropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
我的個人博客

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章