diff --git a/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md b/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md index 215bc15ea5..95451287ad 100644 --- a/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md +++ b/dotnet-desktop-guide/net/wpf/get-started/create-app-visual-studio.md @@ -18,12 +18,12 @@ In this tutorial, you: > [!div class="checklist"] > -> - Create a new WPF app -> - Add controls to a form -> - Handle control events to provide app functionality -> - Run the app +> - Create a new WPF app. +> - Add controls to a window. +> - Handle control events to provide app functionality. +> - Run the app. -Here's a preview of the app you'll build while following this tutorial: +Here's a preview of the app created while following this tutorial: :::image type="content" source="media/create-app-visual-studio/app-finished.png" alt-text="Finished sample app for WPF tutorial"::: @@ -207,17 +207,17 @@ Once the app is generated, Visual Studio should open the XAML designer window fo ### Important parts of Visual Studio -Support for WPF in Visual Studio has five important components that you'll interact with as you create an app: +Support for WPF in Visual Studio has five important components that you interact with as you create an app: :::image type="content" source="media/create-app-visual-studio/vs-main-window.png" alt-text="The important components of Visual Studio you should know when creating a WPF project for .NET"::: 01. Solution Explorer - All of your project files, code, windows, resources, will appear in this window. + All of your project files, code, windows, resources, appear in this window. 02. Properties - This window shows property settings you can configure based on the item selected. For example, if you select an item from **Solution Explorer**, you'll see property settings related to the file. If you select an object in the **Designer**, you'll see settings for the element. In the case of the previous image, the window's title bar was selected in the designer. + This window shows property settings you can configure based on the item selected. For example, if you select an item from **Solution Explorer**, you'll see property settings related to the file. If you select an object in the **Designer**, you'll see settings for the element. Regarding the previous image, the window's title bar was selected in the designer. 03. Toolbox @@ -233,7 +233,7 @@ Support for WPF in Visual Studio has five important components that you'll inter 05. XAML code editor - This is the XAML code editor for a XAML document. The XAML code editor is a way to craft your UI by hand without a designer. The designer may infer the values of properties on a control when the control is added in the designer. The XAML code editor gives you a lot more control. + This is the XAML code editor for a XAML document. The XAML code editor is a way to craft your UI by hand without a designer. The designer might automatically set properties on a control when the control is added in the designer. The XAML code editor gives you a lot more control. When both the designer and editor are visible, changes to one is reflected in the other. As you navigate the text caret in the code editor, the **Properties** window displays the properties and attributes about that object. @@ -259,9 +259,9 @@ After your project is created, the XAML code editor is visible with a minimal am > [!IMPORTANT] > If you're coding in Visual Basic, the XAML is slightly different, specifically the `x:Class=".."` attribute. XAML in Visual Basic uses the object's class name and omits the namespace to the class. -Let's break down this XAML code to understand it better. XAML is simply XML that can be processed by the compilers that WPF uses. It describes the WPF UI and interacts with .NET code. To understand XAML, you should, at a minimum, be familiar with the basics of XML. +To better understand the XAML, let's break it down. XAML is simply XML that that's processed by WPF to create a UI. To understand XAML, you should, at a minimum, be familiar with the basics of XML. -The document root `` represents the type of object being described by the XAML file. There are eight attributes declared, and they generally belong to three categories: +The document root `` represents the type of object described by the XAML file. There are eight attributes declared, and they generally belong to three categories: - XML namespaces @@ -279,53 +279,70 @@ The document root `` represents the type of object being described by th ## Change the window -First, run the project and see the default output. You'll see a window that pops up, without any controls, and a title of **MainWindow**: +For our example app, this window is too large, and the title bar isn't descriptive. Let's fix that. -:::image type="content" source="media/create-app-visual-studio/app-default.png" alt-text="A blank WPF app" ::: +01. First, Run the app by pressing the F5 key or by selecting **Debug** > **Start Debugging** from the menu. -For our example app, this window is too large, and the title bar isn't descriptive. Change the title and size of the window by changing the appropriate attributes in the XAML to the following values: + You'll see the default window generated by the template displayed, without any controls, and a title of **MainWindow**: -:::code language="xaml" source="snippets/create-app-visual-studio/csharp/Start.xaml" highlight="8"::: + :::image type="content" source="media/create-app-visual-studio/app-default.png" alt-text="A blank WPF app" ::: + +01. Change the title of the window by setting the `Title` to `Names`. +01. Change the size of the window by setting the `Width` to `180` and `Height` to `260`. + + :::code language="xaml" source="snippets/create-app-visual-studio/csharp/Start.xaml" highlight="8"::: ## Prepare the layout WPF provides a powerful layout system with many different layout controls. Layout controls help place and size child controls, and can even do so automatically. The default layout control provided to you in this XAML is the `` control. -The `Grid` control lets you define rows and columns, much like a table, and place controls within the bounds of a specific row and column combination. You can have any number of child controls or other layout controls added to the `Grid`. For example, you can place another `Grid` control in a specific row and column combination, and that new `Grid` can then define more rows and columns and have its own children. +The grid control lets you define rows and columns, much like a table, and place controls within the bounds of a specific row and column combination. You can have any number of child controls or other layout controls added to the grid. For example, you can place another `` control in a specific row and column combination, and that new grid can then define more rows and columns and have its own children. + +The grid control places its child controls in rows and columns. A grid always has a single row and column declared, meaning, the grid by default is a single cell. That doesn't really give you much flexibility in placing controls. -The `` control defines rows and columns in which your controls will be. A grid always has a single row and column declared, meaning, the grid by default is a single cell. That doesn't really give you much flexibility in placing controls. +Adjust the grid's layout for the controls required for this app. -Before we add the new rows and columns, add a new attribute to the `` element: `Margin="10"`. This insets the grid from the window and makes it look a little nicer. +01. Add a new attribute to the `` element: `Margin="10"`. -Next, define two rows and two columns, dividing the grid into four cells: + This setting brings the grid in from the window edges and makes it look a little nicer. -:::code language="xaml" source="snippets/create-app-visual-studio/csharp/LayoutStep2.xaml" range="9-21"::: +01. Define two rows and two columns, dividing the grid into four cells: -Select the grid in either the XAML code editor or XAML designer, you'll see that the XAML designer shows each row and column: + :::code language="xaml" source="snippets/create-app-visual-studio/csharp/LayoutStep2.xaml" range="9-21"::: -:::image type="content" source="media/create-app-visual-studio/vs-designer-grid-rows-columns.png" alt-text="A WPF app with the margin set on a grid"::: +01. Select the grid in either the XAML code editor or XAML designer, you'll see that the XAML designer shows each row and column: + + :::image type="content" source="media/create-app-visual-studio/vs-designer-grid-rows-columns.png" alt-text="A WPF app with the margin set on a grid"::: ## Add the first control -Now that the grid has been created, we can start adding controls to it. First, start with the label control. Create a new `