The WPF Notepad Project: About Box and Edit Menu (Premium)

In this installment, we’ll create an About box for the WPF version of .NETpad and start building out the Edit menu.
About box
As we did with the Font dialog, we’ll be creating our own customized dialog for the application’s About box. But this will be a much simpler window. Simpler, even, than the main application window.

To get started, open MainWindow.xaml and locate the Help menu item, which is currently empty. Add some space between <MenuItem Header="_Help"> and </MenuItem> and add the following line of XAML:
<MenuItem Name="AboutMenu" Header="_About" />
Then, create a Click event handler for this menu item. (I assume you know how do this by now, as we’ve done similarly several times already.) It will appear in MainWindow.xaml.cs:
private void AboutMenu_Click(object sender, RoutedEventArgs e)
{

}
Now, we can create the About box. Right-click on the project name in the Solution Explorer pane and choose Add > Window (WPF). In the Add New Item that appears, rename the new window to AboutBox.xaml and click Add. The new window will appear in the split view in Visual Studio.

Double-click the XAML button in the splitter to display only the XAML file. Then, locate the code that currently reads as Title="AboutBox" Height="450" Width="800" and replace it with:
WindowStyle="SingleBorderWindow"
WindowStartupLocation="CenterOwner"
Title="AboutBox" Height="300" Width="350" ResizeMode="NoResize"
Now, return to MainWindow.xaml.cs and add the following code to the AboutMenu_Click event handler:
AboutBox aboutBox = new AboutBox
{
    Owner = this
};
aboutBox.ShowDialog();
Now, you can run the application and test Help > About to get an idea of how this thing will look.

OK, let’s design the dialog using XAML. This won’t be difficult: In keeping with my goals of making our custom dialogs as modern as possible, we’ll lose the convoluted design from the WinForms version of this About box and just display a few lines of text for the application name, version number, and copyright, plus a linked thank-you to the app’s icon designer (which he requires) and a dedication. And then a single OK button.

If you add that up, that’s six rows---five for each line of text plus one for the button. So add the following row definitions inside of the Grid tags in AboutBox.xaml:
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
Now, we can add the five lines of text, which will be implemented mostly with labels. (We’re using a textblock for the thank you because it requires a hyperlink.) Add the following XAML below those row definitions:
<Label Name="AppNameLabel" Grid.Row="0" Content="App name" FontWeight="Bol...

Gain unlimited access to Premium articles.

With technology shaping our everyday lives, how could we not dig deeper?

Thurrott Premium delivers an honest and thorough perspective about the technologies we use and rely on everyday. Discover deeper content as a Premium member.

Tagged with

Share post

Please check our Community Guidelines before commenting

Windows Intelligence In Your Inbox

Sign up for our new free newsletter to get three time-saving tips each Friday

"*" indicates required fields

This field is for validation purposes and should be left unchanged.

Thurrott © 2024 Thurrott LLC