WPF - Image Gallery in WPF

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;

namespace WpfImageGallery
{
    public class ImageEntity
    {
        #region Property

      
        public String ImagePath
        {
            get;
            set;
        }

        #endregion
    }
}

Step 6

Create a ImageView Static Class in a solution for retriving Image Path from XML Document,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
    }
}

Step 7

Now design Image gallery on window.Drag and drop ListBox Control from Toolbox and

set a Background Color,it is look like this

<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>

Step 8

Create a DataTemplate and ItemPanelTemplate to a Listbox control,it is look like this

<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>

Step 9

Apply DataTemplate and ItemPanelTemplate on ListBox Control,it is look like this

<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>

ItemSource Property - Gets or sets a collection used to generate the content of the ItemsControl.

ItemTemplate Property - Gets or sets the DataTemplate used to display each item.

ItemPanel Property -  Gets or sets the template that defines the panel that controls the layout of items.

Step 10

Now Bind the data in ListBox Control in Code Behind,it is look like this

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);
            }
        }
    }
}

Run The Project.

Output

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

 

Downalod Source Code - ImageGallery_2

Output