Windows Presentation Foundation (WPF) is a graphical subsystem by Microsoft for rendering user interfaces in Windows-based applications. WPF, initially released as part of .NET Framework 3.0, is now a part of .NET Core and .NET 5/6+. It uses XAML (Extensible Application Markup Language) to define and link various UI elements.

• What is WPF?
  • A UI framework for building Windows desktop applications.
  • Uses XAML for UI design and C# for backend logic.
  • Supports data binding, templates, animations, and more.

• Tools Required:
  • Visual Studio (Community, Professional, or Enterprise)
  • .NET Core SDK (if using .NET Core/5/6+)

• Steps:
  1. Open Visual Studio.
  2. Create a new project.
  3. Select "WPF App (.NET Core)" or "WPF App (.NET Framework)".
  4. Name your project and click "Create".

• XAML Basics:
  • XML-based language to define UI elements.
  • Example:

    <Window x:Class="WpfApp.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <Button Content="Click Me" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
        </Grid>
    </Window>
    

• Common Layout Controls:
  • Grid: Defines a flexible grid area.
  • StackPanel: Stacks child elements vertically or horizontally.
  • DockPanel: Aligns child elements to the edges of the panel.
  • Canvas: Positions child elements using coordinates.

• Binding Data to UI Elements:
  • Allows UI elements to display data from data sources.
  • Example:

    <TextBox Text="{Binding Path=Name}" />
    

• Styles:
  • Define a set of properties and apply them to multiple elements.
  • Example:

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>
    

• Templates:
  • Define the visual structure of a control.
  • Example:

    <ControlTemplate TargetType="Button">
        <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="2">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </ControlTemplate>
    

• Handling Events in WPF:
  • Events can be handled in XAML or code-behind.
  • Example in XAML:

    <Button Content="Click Me" Click="Button_Click"/>
    

  • Example in code-behind:

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Button clicked!");
    }
    

1. Create a New WPF Project:

   • Open Visual Studio and create a new WPF App (.NET Core).

2. Design the UI in XAML:

   <Window x:Class="WpfApp.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525">
       <Grid>
           <TextBox Name="inputTextBox" Width="200" Height="30" VerticalAlignment="Top" Margin="10"/>
           <Button Content="Show Message" Width="100" Height="30" VerticalAlignment="Top" Margin="10,50,0,0" Click="ShowMessage_Click"/>
       </Grid>
   </Window>
   

3. Add Event Handling in Code-Behind:

   using System.Windows;
   
   namespace WpfApp
   {
       public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
           }
   
           private void ShowMessage_Click(object sender, RoutedEventArgs e)
           {
               string message = inputTextBox.Text;
               MessageBox.Show(message, "Message");
           }
       }
   }
   

Task: Create a WPF application with the following features:

• A TextBox for user input.
• A Button that, when clicked, displays the text from the TextBox in a Label.

Solution:

1. Design the UI in XAML:

   <Window x:Class="WpfApp.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525">
       <Grid>
           <TextBox Name="inputTextBox" Width="200" Height="30" VerticalAlignment="Top" Margin="10"/>
           <Button Content="Show Message" Width="100" Height="30" VerticalAlignment="Top" Margin="10,50,0,0" Click="ShowMessage_Click"/>
           <Label Name="outputLabel" Width="200" Height="30" VerticalAlignment="Top" Margin="10,100,0,0"/>
       </Grid>
   </Window>
   

2. Add Event Handling in Code-Behind:

   using System.Windows;
   
   namespace WpfApp
   {
       public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
           }
   
           private void ShowMessage_Click(object sender, RoutedEventArgs e)
           {
               string message = inputTextBox.Text;
               outputLabel.Content = message;
           }
       }
   }
   

In this section, we covered the basics of WPF, including setting up the development environment, understanding XAML, and creating a simple WPF application. We also explored key concepts such as layouts, data binding, styles, templates, and event handling. By completing the practical example and exercise, you should now have a foundational understanding of how to build and manage WPF applications. In the next module, we will delve deeper into advanced C# concepts to further enhance your programming skills.