Making Changes

We don’t want to mess around with this tag too much because it comes standard with lots of them however we do want to point your attention to the line that says Title = “MainWindow” and so on. This line here will control the Title of the Form, Height and Width of the form. We can add something here that will help us to see the changes in action.

<Windowx:Class="hello_WPF.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:hello_WPF"
mc:Ignorable="d"
Title="MainWindow" Background="Black" Height="350" Width="525">
<Grid>

</Grid>

</Window>

Add the line Background = “Black“ to the code. Once you finish typing it in you will see the change made to 1^st window immediately.

The 1^st window understood the code from the XML and now we have the form coloured black. If you have done a few tutorials with us before then you know we love the properties window in visual studio. It allowed us to make all sorts of changes to different parts of the form. We still can make those changes to our applications except this time we can directly type it in the XML rather than finding those options in the properties window.

Its time to add some content to the application. So far, we only changed the background colour of the program. If we want to add components to this app for example, text, labels, buttons, picture boxes etc then we need to type them in the XML window. We cannot drag and drop them into the scene any more.

All the windows component needs to be inputted INSIDE the GRID tag. If you look below the line where we changed the background colour then you will see the <Grid> ..</Grid> tags. This tag is stating that the application is a GRID view application and it starts from here.

WPF supports many different types of view we will go in more detail for a future tutorial on that for now lets add some content inside this GRID tag.

<Windowx:Class="hello_WPF.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:hello_WPF"

mc:Ignorable="d"

Title="MainWindow" Background="Black" Height="350" Width="525">

<Grid>

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72" Foreground="Yellow">

Hello, MOO!

</TextBlock>

</Grid>

</Window>

Add a Text block to the code by inputting the new line of code from above. This line is inputting a new Text Block with a horizontal and vertical centre alignment also it has 72 pixels font size and a yellow fore ground colour. The content for the text block is placed in between the TextBlock tags.”Helloo, Moo”.

The text is now visible on the preview window. Now that we have added a text lets add another component to this window.

<Windowx:Class="hello_WPF.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:hello_WPF"

mc:Ignorable="d"

Title="MainWindow" Background="Black" Height="350" Width="525">

<Grid>

<Button VerticalAlignment="Bottom" Height="20" Width="200" Content="Click ME" FontWeight="Bold">

</Button>

<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72" Foreground="Yellow">

Hello, MOO!

</TextBlock>

</Grid>

</Window>

The new line of code from above is adding a button to the program. This button will be placed bottom of the screen, it has a 20 height, 200 width and content says Click Me and its font style is bold.

As you can see you can style out the components with lots of new options now, since we are using XML it makes it easier for us to add components and theme them as part of the main program.