Photo printing is still a valuable feature for both personal and professional users. In this post, we will walk through building a simple Photo Printing Application using WPF (Windows Presentation Foundation) with C#. This desktop application will allow users to:
- Browse and select images from their device.
- Preview the selected image.
- Configure basic print settings.
- Send the image to a printer.
 |
Create A Photo Printing Application in WPF
Gettin Started
This application is ideal for beginners looking to understand how WPF handles image processing, UI binding, and printing. Before we begin, ensure that you have the following installed:
- Visual Studio 2017 or later
- .NET Desktop Development workload
- Basic understanding of C# and XAML
If you're new to WPF, this is a perfect starter project that touches on essential concepts while producing a practical tool. Here we'll build the application with these features:
- Image Loader: Open and display an image.
- Image Preview: Display selected image in a preview pane.
- Print Functionality: Allow users to send the printable photos to a printer.
- Basic Layout: Clean, user-friendly UI using XAML.
Create a WPF Project
The steps below describes how to create a new project in WPF.
- Open Visual Studio.
- Select Create a new project.strong
- Choose WPF App (.NET Core or .NET 6/7).
- Name it
PhotoPrinterApp.
You now have a blank WPF app ready to build your Photo Printing Application but it is not yet ready to print pictures. We have to add some code in XAML and C# to maek the application to print the printable photos.
Design the UI Using XAML Code
Open MainWindow.xaml and replace the content with the following:
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Path :"/>
<TextBox Width="190" Name="txtPath" Margin="2"/>
<Button Content="Load Image" Click="LoadImage_Click" VerticalAlignment="Center"/>
</StackPanel>
<ListBox Grid.Row="1" Margin="0,10" Name="lbxImages" MouseDoubleClick="lbxImages_MouseDoubleClick">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Height="35" Width="35" Source="{Binding Path=FullName}" />
<TextBlock Grid.Column="1" Margin="5,10" Text="{Binding Path=Name}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="2" Content="Print Image" Click="PrintImage_Click" Margin="10,0"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="23"/>
</Grid.RowDefinitions>
<Border BorderBrush="Gray" BorderThickness="1" Margin="10">
<Image Name="PreviewImage" Stretch="Fill"/>
</Border>
<TextBlock Grid.Row="1" Name="txtPreHeaer" FontWeight="Black" Margin="10,0"/>
</Grid>
</Grid>
In the above XAML code, two buttons are placed on the left side to load and print pictures, along with a ListBox to display the list of printable photos. On the right side of the window, an Image control and a TextBox are used to show a preview of the selected image and its name.
Add Code-Behind Logic
Open MainWindow.xaml.cs and implement the functionality:
using System;
using System.IO;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
namespace PhotoPrinting1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
private BitmapImage selectedImage;
public MainWindow()
{
InitializeComponent();
}
private void LoadImage_Click(object sender, RoutedEventArgs e)
{
System.Windows.Forms.FolderBrowserDialog openFileDlg = new System.Windows.Forms.FolderBrowserDialog();
var result = openFileDlg.ShowDialog();
if (result ==System.Windows.Forms.DialogResult.OK)
{
txtPath.Text = openFileDlg.SelectedPath;
DirectoryInfo di = new DirectoryInfo(openFileDlg.SelectedPath);
var imgs= (from f in di.GetFiles() where f.Extension.Equals(".jpg", StringComparison.OrdinalIgnoreCase) || f.Extension.Equals(".png", StringComparison.OrdinalIgnoreCase)
orderby f.LastWriteTime descending
select f).ToArray();
if (imgs.Any())
lbxImages.ItemsSource = imgs;
else
MessageBox.Show("No Pictures Found");
}
}
private void PrintImage_Click(object sender, RoutedEventArgs e)
{
if (selectedImage == null)
{
MessageBox.Show("Please load an image first.");
return;
}
PrintDialog printDialog = new PrintDialog();
if (printDialog.ShowDialog() == true)
{
Image imageToPrint = new Image
{
Source = selectedImage,
Width = printDialog.PrintableAreaWidth,
Height = printDialog.PrintableAreaHeight,
Stretch = System.Windows.Media.Stretch.Uniform
};
printDialog.PrintVisual(imageToPrint, "Printed Photo");
}
}
private void lbxImages_MouseDoubleClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
if(this.lbxImages.SelectedItem!=null)
{
FileInfo fileInfo = (FileInfo)this.lbxImages.SelectedItem;
selectedImage = new BitmapImage(new Uri(fileInfo.FullName));
PreviewImage.Source = selectedImage;
this.txtPreHeaer.Text = fileInfo.Name;
}
}
}
}
Run and Test
- Build and run the application
- Click Load Image and select a folder from which you want to list the printable photos.
- Double-click on the image you wish to print. The preview will appear on the right side.
- Click Print Image to print it using your system's default printer dialog.
Summary
Building a photo printing app in WPF is a great way to learn about image handling, file dialogs, and printing in C#. With just a few components and clear layout using XAML, this application demonstrates how WPF can provide rich desktop experiences. You can expand this app further with advanced editing tools and templates.
Thanks