基于modern ui for wpf的在线公开课平台 之四 ListBox+WrapPanel实现平铺效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wuma0q1an/article/details/50894980

使用Grid布局可以实现大多数页面布局，接下来实现图片+文字的平铺效果，可以使用到ListBox+WrapPanel，下面是效果图。

前端xaml代码，图片好文字是后台动态绑定。

<UserControl x:Class="zxgkkpt.Pages.Home"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" >
    <Grid x:Name="LayoutRoot"  Margin="5,-13,5,5" ShowGridLines="True" Style="{StaticResource ContentRoot}" ScrollViewer.VerticalScrollBarVisibility="Hidden">
        <ListBox Height="409" HorizontalAlignment="Left" Margin="-10,10,-450,-111" Name="listBox1" VerticalAlignment="Top" 
                 Width="750" Background="Transparent" ItemsSource="{Binding}"   ScrollViewer.CanContentScroll="True" 
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible" MouseDoubleClick="dataGrid1_MouseDown"  BorderBrush="White" 
                 >

            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel   ItemHeight="140" ItemWidth="120" >
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid      HorizontalAlignment="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0" ></RowDefinition>
                            <RowDefinition Height="100" ></RowDefinition>
                            <RowDefinition Height="40"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Source="{Binding Image}"  Grid.Row="1" Width="120" Height="100" HorizontalAlignment="Stretch"/>
                        <TextBlock Text="{Binding Name}" Grid.Row="2"  HorizontalAlignment="Center" VerticalAlignment="Center"  FontSize="8pt" TextWrapping="Wrap" />
                        
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

下面是后台绑定数据{Binding xx}代码的属性

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

namespace Entity
{
    public class videoNotify : INotifyPropertyChanged
    {
        private string _name;
        private string _id;
        private string _upperson;
        private string _local;
        private string _uptime;
        private string _downcount;
        private string _playcount;
        private string _info;
        private string _type;
        private string _image;
        public event PropertyChangedEventHandler PropertyChanged;
        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }
        
        public string Image
        {
            get { return _image; }
            set
            {
                _image = value;
                NotifyPropertyChanged("Image");
            }
        }
        public string Playcount
        {
            get { return _playcount; }
            set
            {
                _playcount = value;
                NotifyPropertyChanged("Playcount");
            }
        }
        public string Id
        {
            get { return _id; }
            set
            {
                _id = value;
                NotifyPropertyChanged("Id");
            }
        }
        public string Upperson
        {
            get { return _upperson; }
            set { _upperson = value;NotifyPropertyChanged("Upperson"); }
        }
        public string Local
        {
            get { return _local; }
            set { _local = value;NotifyPropertyChanged("Local"); }
        }
        public string Uptime
        {
            get { return _uptime; }
            set { _uptime = value;NotifyPropertyChanged("Uptime"); }
        }
        public string DownCount
        {
            get { return _downcount; }
            set { _downcount = value;NotifyPropertyChanged("Downcount"); }      
        }
        public string Info
        {
            get { return _info; }   
            set { _info = value;NotifyPropertyChanged("Info"); }
        }
        public string Type
        {
            get { return _type; }
            set { _type = value;NotifyPropertyChanged("Type"); }
        }
        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    }
}

如何绑定在下面

        public Home()
        {
            InitializeComponent();
            List<Entity.videoNotify> videos = new List<Entity.videoNotify>();
            control.homePageDal hpd = new control.homePageDal();
            dt = hpd.getAllTable();
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                videos.Add(new Entity.videoNotify()
                {
                    Name = dt.Rows[i]["v_name"].ToString(),
                    Local = dt.Rows[i]["v_local"].ToString(),
                    Image = dt.Rows[i]["v_image"].ToString()
                });
            }
            listBox1.ItemsSource = videos;
            timer.Elapsed += new System.Timers.ElapsedEventHandler(timer_elapsed);
            timer.Enabled = true;
        }