WPF

The previous post did not create a WPF program. Now we WILL create a WPF program. Now we will use a WPF template in Visual Studio 2017 to do this. We will add a Browse button to this project and a couple of labels. The end result of our project is shown at the bottom of this article in a screenshot.

This is a screenshot of Visual Studio 2017 using the latest version (at the time of September 2018) of the .NET Framework. We have chosen WPF APP (.NET Framework) under Visual C# (at the left) Windows Desktop.

After the program is set up you might try dragging s button from the toolbox on the left. Double-click the button to get access to the code behind window. Here is where you will write you C# code. Our example below follows a different path.

We’ve created the project called WpfApp2 with a solution name of WpfApp2. We have changed the height and width of the main window. We have added a label. We have made some changes to the text and appearance of the label. You can change the XAML or you can use the Properties window (F4) to make the changes. The red arrows and text were added to the screenshot with Adobe Photoshop to help explain what we did.

User Control

Now we are going to add a user control that has a text box and a Browse button so that the user can select a file and have the name of the file and its path displayed in the text box. To show that we have access to what they chose, we will, for debugging purposes, show the filename and the path in a message box. To take the application to another level, we could add another button that processes the file. Perhaps it is a text file and we need to count and the letters in the file and tell the user those numbers.

Right-click the Project in Solution Explorer and choose Add, User Control. Name it XamlFileBrowser. You will change the XAML code so that you have something like the following. A button and a text box control were added. Pay attention to the Name properties. FBCTextBox and FBCButton. Also, pay attention to the x:Class and the x:Name in the properties of the useer control. The x:Class should be changed to the name of the project (WpfApp2) dot XamlFileBrowser. Give the x:Name something like XAMLFileBrowserControl.

The code for this was adopted from an article at C Sharp Corner by Mahesh Chand.

<UserControl
      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="WpfApp2.XamlFileBrowser"
      x:Name="XAMLFileBrowserControl"
      d:DesignWidth="397" d:DesignHeight="39">

    <Grid x:Name="LayoutRoot" Height="42" Width="614">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.352*"/>
            <ColumnDefinition Width="0.648*"/>
        </Grid.ColumnDefinitions>
        <TextBox x:Name="FBCTextBox" Margin="4,10.313,137,4.001" Text="" 
                 TextWrapping="Wrap" Grid.ColumnSpan="2" 
                 TextChanged="FBCTextBox_TextChanged" />
        <Button x:Name="FBCButton" HorizontalAlignment="Right" Margin="0,8,13,4" 
                Width="111" Content="Browse..."
                Grid.Column="1" Click="FBCButton_Click" />
    </Grid>
</UserControl>

Now we need to write the logic code in the XamlFileBrowser.xaml.cs file. Here is the code we need.

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp2
{
    /// <summary>
    /// Interaction logic for XamlFileBrowser.xaml
    /// </summary>
    public partial class XamlFileBrowser : UserControl
    {
        public XamlFileBrowser()
        {
            InitializeComponent();
        }
        public string FileName
        {
            get { return FBCTextBox.Text; }
            set { FBCTextBox.Text = value; }
        }
        private void FBCButton_Click(object sender, RoutedEventArgs e)
        {
            Microsoft.Win32.OpenFileDialog openFileDlg = new Microsoft.Win32.OpenFileDialog();
            if (openFileDlg.ShowDialog() == true)
                this.FileName = openFileDlg.FileName;
        }
        public event EventHandler<EventArgs> FileNameChanged;

        private void FBCTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            e.Handled = true;
            if (FileNameChanged != null)
                FileNameChanged(this, EventArgs.Empty);
            MessageBox.Show("You picked " + this.FileName);
        }
    }
}

For the host application (the application hosting our User Control) the XAML code is shown below. In our case, in Solution Explorer, that is the MainWindow.xaml. Notice inside the grid we have the element < local:XamlFileBrowser Loaded=”XamlFileBrowser_Loaded” />

<Window x:Class="WpfApp2.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="WPF App Number 2" Height="250" Width="800" FontWeight="Bold">
    <Grid>
        <Label Content="This is Solution WpfApp2. It has a User Control called XamlFileBrowser" 
               HorizontalAlignment="Left" VerticalAlignment="Top" Height="34" 
               Width="784" FontWeight="Bold" FontSize="14" Background="#FFF7E5E5" Foreground="#FF2F1CD9" />
        <local:XamlFileBrowser Loaded="XamlFileBrowser_Loaded"  />
        <Label Content="Just another label to explain to the user how they use this app." 
               HorizontalAlignment="Left" Height="38" Margin="91,163,0,0" VerticalAlignment="Top" Width="415"/>
    </Grid>
</Window>

When you run the app you will see something like the following.