用控件模板和数据模板两种方式让 WPF ListBox控件显示图片加文字

keaidepangzi

已于 2024-06-07 16:22:16 修改

阅读量258

点赞数 2

文章标签： wpf

于 2024-06-07 15:59:35 首次发布

本文链接：https://blog.csdn.net/u013769013/article/details/139528840

版权

<Window x:Class="WPFstudy.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFstudy"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">

    <Window.Resources>
        <DataTemplate x:Key="myDataTemplate" DataType="local:Person">
            <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>

                </Grid.ColumnDefinitions>
                <Image Source="{Binding Photo}" Width="50" Grid.Column="0"/>
                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/>

            </Grid>
            
        </DataTemplate>

        <Style TargetType="ListBoxItem" x:Key="listBoxItemStyle" >
            <Setter Property="Template">


                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderThickness="2" Margin="5"  BorderBrush="Black" >
                            <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>

                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding Photo}" Width="50" Grid.Column="0"/>
                                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/>

                            </Grid>

                        </Border>                      
                    </ControlTemplate>
                 
                </Setter.Value>
            </Setter>
            
        </Style>
        
        
    </Window.Resources>
    <Grid >
        <ListBox ItemContainerStyle="{StaticResource listBoxItemStyle}"  ItemsSource="{Binding PersonList}"  >
           
        </ListBox>
    </Grid>
</Window>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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.Shapes;

namespace WPFstudy
{
    /// <summary>
    /// Window1.xaml 的交互逻辑
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.DataContext= new PersonCollection();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPFstudy
{
  public  class Person
    {
        public string Name { get; set; }
        public string Sex { get; set; }
        public string Address { get; set; }
        public string Photo { get; set; }
    }

    public class PersonCollection : Person 
    {
    ObservableCollection<Person> persons=new ObservableCollection<Person>();
        public PersonCollection()
        {
            persons.Add(new Person()
            {
                Address="北京",
                Name="北漂一族",
                Photo="/Image/gouwuche.png",
                Sex="男"
            });
            persons.Add(new Person()
            {
                Address = "山西",
                Name = "高山流水",
                Photo = "/Image/shan.png",
                Sex = "男"
            });
            persons.Add(new Person()
            {
                Address = "北京",
                Name = "河鱼天雁",
                Photo = "/Image/fish.png",
                Sex = "男"
            });
        }
        public ObservableCollection<Person> PersonList { get { return persons; } }


    }
}