Today, we will learn how to develop a converter using WPF (Windows Presentation Foundation).
WPF is a framework provided by Microsoft for developing GUI applications and offers powerful features for implementing digital user interfaces.
In this tutorial, we will start from the basic concepts of WPF and explain in detail the process of implementing the functionality of the converter.
1. What is WPF?
WPF is part of the .NET framework and is used to implement advanced user interfaces.
One of the main features of WPF is the ability to define the UI using XAML (Extensible Application Markup Language).
Using XAML allows you to describe UI components intuitively and can be used in conjunction with .NET languages like C# to implement logic.
This makes it advantageous for developing complex UIs with WPF.
2. Overview of the Converter Application
The converter we will develop in this tutorial is a small application that performs conversions between two formats.
For example, it will provide temperature conversion (Celsius to Fahrenheit and Fahrenheit to Celsius) and length conversion (meters to feet and feet to meters).
Users can enter values in the input field and click the convert button to see the results.
3. Setting Up the Development Environment
To develop a WPF application, Visual Studio is required.
The Visual Studio Community version is free to use and can be easily installed to start working on WPF applications.
After installation, create a new project and select WPF App (.NET Core or .NET Framework).
4. Project Structure
The basic structure of a WPF project is as follows:
- MainWindow.xaml: A XAML file that defines the UI elements.
- MainWindow.xaml.cs: A C# code file that implements the UI logic.
- App.xaml: Defines the application’s entry point and resources.
5. Designing the UI with XAML
<Window x:Class="ConverterApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Converter" Height="350" Width="525">
<Grid>
<Label Content="Temperature Converter" FontSize="24" HorizontalAlignment="Center" Margin="10"/>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox x:Name="InputValue" Width="200" Margin="5" />
<ComboBox x:Name="InputUnit" Width="200" Margin="5">
<ComboBoxItem Content="Celsius" />
<ComboBoxItem Content="Fahrenheit" />
</ComboBox>
<Button Content="Convert" Width="200" Margin="5" Click="ConvertButton_Click"/>
<TextBlock x:Name="ResultText" FontSize="16" Margin="5"/>
</StackPanel>
</Grid>
</Window>
The above XAML code creates a basic UI. It takes temperature input from the user and provides a combo box to select either Celsius or Fahrenheit.
When the convert button is clicked, the conversion results are displayed based on the input value.
6. Implementing C# Code
Below is the C# code that implements the conversion logic. Write this in the MainWindow.xaml.cs file.
using System;
using System.Windows;
namespace ConverterApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ConvertButton_Click(object sender, RoutedEventArgs e)
{
double inputValue;
bool isValid = double.TryParse(InputValue.Text, out inputValue);
if (!isValid)
{
ResultText.Text = "Please enter a valid number.";
return;
}
if (InputUnit.SelectedIndex == 0) // Celsius
{
double result = (inputValue * 9 / 5) + 32;
ResultText.Text = $"{inputValue} °C is {result} °F.";
}
else // Fahrenheit
{
double result = (inputValue - 32) * 5 / 9;
ResultText.Text = $"{inputValue} °F is {result} °C.";
}
}
}
}
In the above C# code, we define the ConvertButton_Click method, which is called when the convert button is clicked.
It reads the value entered by the user and performs the appropriate conversion based on the selected unit.
If the input value is not valid, a warning message is displayed to inform the user.
7. Adding Length Converter
Next, let’s add the length conversion feature. Modify the UI to add a length conversion button and implement the conversion logic.
<Label Content="Length Converter" FontSize="24" HorizontalAlignment="Center" Margin="10"/>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox x:Name="LengthInputValue" Width="200" Margin="5" />
<ComboBox x:Name="LengthInputUnit" Width="200" Margin="5">
<ComboBoxItem Content="Meters" />
<ComboBoxItem Content="Feet" />
</ComboBox>
<Button Content="Convert" Width="200" Margin="5" Click="LengthConvertButton_Click"/>
<TextBlock x:Name="LengthResultText" FontSize="16" Margin="5"/>
</StackPanel>
After adding the length conversion UI in a similar fashion, add the length conversion logic to the MainWindow.xaml.cs.
private void LengthConvertButton_Click(object sender, RoutedEventArgs e)
{
double inputLengthValue;
bool isLengthValid = double.TryParse(LengthInputValue.Text, out inputLengthValue);
if (!isLengthValid)
{
LengthResultText.Text = "Please enter a valid number.";
return;
}
if (LengthInputUnit.SelectedIndex == 0) // Meters
{
double lengthResult = inputLengthValue * 3.28084;
LengthResultText.Text = $"{inputLengthValue} meters is {lengthResult} feet.";
}
else // Feet
{
double lengthResult = inputLengthValue / 3.28084;
LengthResultText.Text = $"{inputLengthValue} feet is {lengthResult} meters.";
}
}
8. Running and Testing the Application
Once all features are implemented, run the application to test if the converter works correctly.
Enter various values and units to verify that the conversions are done properly.
You can improve the UI or add additional features as needed.
9. Conclusion
In this tutorial, we have looked at the process of developing a basic converter application using WPF.
We were able to create an application that interacts with users utilizing the advantages of XAML for UI composition and C# for logic implementation.
I hope to deepen this technology through various WPF projects in the future.
10. References
– Getting Started with WPF
– Step-by-Step Guide to Developing WPF Applications