Skip to main content

How To Create Image Gallery in UWP Application

How to implement image gallery in gridview

This article demonstrates how to make image gallery application using universal windows platform. 

1. Let's start step by step. first of all open visual studio and create new blank UWP project as follows.

how to create image gallery in uwp 
 
2. Click next and enter your project name and choose location where you want to save your project.
 
image gallery c# windows forms

3. Click Create and choose target and minimum version that your UWP application will support.
 
c# uwp navigationview example

 

4. Click Ok and your UWP project will created automatically and look like as following.

uwp navigationview example

5. Now open MainPage.xaml file and enter below code between Grid tag.


<NavigationView IsSettingsVisible="False" IsBackButtonVisible="Collapsed">
            <NavigationView.MenuItems>
                <NavigationViewItem x:Name="MenuImage" Tag="image" Content="Image Category" Icon="Pictures"></NavigationViewItem>  
            </NavigationView.MenuItems>
            <ScrollViewer>
                <Frame x:Name="ContentFrame" Padding="12,0,12,24" IsTabStop="True" />
            </ScrollViewer>
        </NavigationView>

6. Now open MainPage.xaml.cs file and enter below code.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace ImageGallery
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            ContentFrame.Navigate(typeof(GalleryPage), null, null);
        }
    }
}

7. Now create new blank page and give name like GalleryPage.xaml

uwp gridview example

8. Create class file ImageGallery.cs as below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Media;

namespace ImageGallery
{
    public class ImgGallery
    {
        public string ImageName { get; set; }

        public ImageSource ImageURL { get; set; }
    }
} 

9. Now open GalleryPage.xaml file and copy and paste following code.

<GridView x:Name="CategoriesGrid" ItemsSource="{x:Bind ImageCategories, Mode=TwoWay}" IsItemClickEnabled="True">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid MaximumRowsOrColumns="4" Orientation="Horizontal" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="local:ImgGallery">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="200"/>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Image Margin="10,10,10,10" Grid.Row="0" Source="{x:Bind ImageURL}" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" FontWeight="Bold" Grid.Row="1" Text="{x:Bind ImageName}" />
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

10. Now open GalleryPage.xaml.cs file and copy and paste following code.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238

namespace ImageGallery
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class GalleryPage : Page
    {
        public List<ImgGallery> ImageCategories { get; set; }

        public GalleryPage()
        {
            this.InitializeComponent();

            ImageCategories = new List<ImgGallery>();
            LoadImages();
        }

        public void LoadImages()
        {
            ImageCategories.Add(new ImgGallery()
            {
                ImageName = "Test 1",
                ImageURL = new BitmapImage(new Uri("ms-appx:///Assets/Images/1.jpg"))
            });

            ImageCategories.Add(new ImgGallery()
            {
                ImageName = "Test 2",
                ImageURL = new BitmapImage(new Uri("ms-appx:///Assets/Images/2.jpg"))
            });

            ImageCategories.Add(new ImgGallery()
            {
                ImageName = "Test 3",
                ImageURL = new BitmapImage(new Uri("ms-appx:///Assets/Images/3.jpg"))
            });
        }
    }
}

11. Now create Images folder inside Assests folder and put some test images and rename that images like 1.jpg, 2.jpg, 3.jpg etc. Run your application and it's look like as below.

uwp image gallery


Comments

Popular posts from this blog

Angular 14 CRUD Operation with Web API .Net 6.0

How to Perform CRUD Operation Using Angular 14 In this article, we will learn the angular crud (create, read, update, delete) tutorial with ASP.NET Core 6 web API. We will use the SQL Server database and responsive user interface for our Web app, we will use the Bootstrap 5. Let's start step by step. Step 1 - Create Database and Web API First we need to create Employee database in SQL Server and web API to communicate with database. so you can use my previous article CRUD operations in web API using net 6.0 to create web API step by step. As you can see, after creating all the required API and database, our API creation part is completed. Now we have to do the angular part like installing angular CLI, creating angular 14 project, command for building and running angular application...etc. Step 2 - Install Angular CLI Now we have to install angular CLI into our system. If you have already installed angular CLI into your system then skip this step.  To install angular CLI open vis

Angular 14 : 404 error during refresh page after deployment

In this article, We will learn how to solve 404 file or directory not found angular error in production.  Refresh browser angular 404 file or directory not found error You have built an Angular app and created a production build with ng build --prod You deploy it to a production server. Everything works fine until you refresh the page. The app throws The requested URL was not found on this server message (Status code 404 not found). It appears that angular routing not working on the production server when you refresh the page. The error appears on the following scenarios When you type the URL directly in the address bar. When you refresh the page The error appears on all the pages except the root page.   Reason for the requested URL was not found on this server error In a Multi-page web application, every time the application needs to display a page it has to send a request to the web server. You can do that by either typing the URL in the address bar, clicking on the Menu link/

React js CRUD Example Step by Step

How to build basic CRUD app with ReactJS Here's an example of building a simple CRUD application for managing a list of books. Step 1: Set up the React application To set up the React application, you'll need to have Node.js and NPM installed on your computer. Open a terminal or command prompt and create a new directory for your project. mkdir react-crud-app cd react-crud-app Next, initialize a new React application using the create-react-app CLI. npx create -react-app . Step 2: Create a list of books In this step, you'll create a list of books and display them in a table. Create a new file BookList.js in the src directory and add the following code: import React from 'react' ; const BookList = ( { books } ) => { return ( < table > < thead > < tr > < th > Title </ th > < th > Author </ th > < th > Actions </ th > </ tr > &