版权声明:本文为博主原创文章,未经博主允许不得转载。 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;
}