In this article i will show you how to create a Dynamic Image Gallery in WPF application by using Listbox and UniformGrid Panel.
Step 1
Create a WPF Application and give solution name as WpfImageGallery.
Step 2
Create a New Folder in the Solution and give folder name as Images,it is look like this
Click on Image for Better View
Step 3
Create a XML file in Application BaseDirectory and give file name as ImageData.xml.(./bin/debug/ImageData.xml)
Step 4
The XML in the following example defines an XML document with a root node called Images. This root node contains one or more nodes called Image that include elements called
ImageName.,it is look like this
<?xml version="1.0" encoding="utf-8" ?>
<Images>
<Image>
<ImagePath>../Images/Gaara.png</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Choji.png</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Jiraiya.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Kakashi.png</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Kiba.png</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Naruto.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Neji.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/RockLee.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Sai.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Shikamaru.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Shino.jpg</ImagePath>
</Image>
<Image>
<ImagePath>../Images/Yamato.jpg</ImagePath>
</Image>
</Images>
Step 5
Create a ImageEntity Class in the solution.it is an Entity class,it is look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml.Linq;
namespace WpfImageGallery
{
public static class ImageView
{
#region Methods
public static List<ImageEntity> GetAllImagesData()
{
try
{
// Load Xml Document
XDocument XDoc = XDocument.Load("ImageData.xml");
// Query for retriving all Images data from XML
var Query = from Q in XDoc.Descendants("Image")
select new ImageEntity
{
ImagePath = Q.Element("ImagePath").Value
};
// return images data
return Query.ToList<ImageEntity>();
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
#endregion
}
}
<ListBox x:Name="LsImageGallery">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
<Window.Resources>
<DataTemplate x:Key="ImageGalleryDataTemplate">
<Grid>
<Border BorderBrush="#FFFF9800" BorderThickness="3" Width="120" Height="120" Padding="10" Margin="15" CornerRadius="10">
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
<!--View Large Image on Image Control Tooltip-->
<Image.ToolTip>
<Grid>
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
</Grid>
</Image.ToolTip>
</Image>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
<!--Display Images on UniformGrid Panel-->
<UniformGrid Columns="4" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Window.Resources>
<ListBox x:Name="LsImageGallery" ItemsSource="{Binding}" ItemTemplate="{DynamicResource ImageGalleryDataTemplate}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
using System;
using System.Collections.Generic;
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.Shapes;
namespace WpfImageGallery
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
try
{
BindImages(); // Bind Image in Constructor
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
/// <summary>
/// Bind Image in List Box Control
/// </summary>
private void BindImages()
{
try
{
// Store Data in List Object
List<ImageEntity> ListImageObj = ImageView.GetAllImagesData();
// Check List Object Count
if (ListImageObj.Count > 0)
{
// Bind Data in List Box Control.
LsImageGallery.DataContext = ListImageObj;
}
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
}
}
Move the Mouse Pointer to the Image
Full XAML Code
<Window
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" mc:Ignorable="d"
x:Class="WpfImageGallery.MainWindow"
x:Name="Window"
Title="Image Gallery"
Width="640" Height="500">
<Window.Resources>
<DataTemplate x:Key="ImageGalleryDataTemplate">
<Grid>
<Border BorderBrush="#FFFF9800" BorderThickness="3" Width="120" Height="120" Padding="10" Margin="15" CornerRadius="10">
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
<!--View Large Image on Image Control Tooltip-->
<Image.ToolTip>
<Grid>
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
</Grid>
</Image.ToolTip>
</Image>
</Border>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
<!--Display Images on UniformGrid Panel-->
<UniformGrid Columns="4" HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
</ItemsPanelTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ListBox x:Name="LsImageGallery" ItemsSource="{Binding}" ItemTemplate="{DynamicResource ImageGalleryDataTemplate}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</Window>
Download
Download Source Code I had created another Image Gallery.Please Check it.I hope you Like it.Download Source Code from the following Link