In this lesson, we’ll start to create the game. We’ll create the “solution”, to hold the files that will make the game, and we’ll create the beginnings of the game screen.
Summary
- A “solution” is the files that make up a program.
- A “solution” has at least one “project” – although, it can have more.
- A “project” has related files that are grouped together, to make them easier to find/work with.
- A “WPF project” holds a program’s screens, using XAML files.
- “XAML” is used to define the format of “controls” (grids, buttons, text, etc.) on the screens of a program.
- XAML controls are declared with “tags”.
- XAML controls need opening tag and closing tags.
- For example: “<RowDefinition Height=”Auto”>” and “</RowDefinition>”
- Some tags have “attributes” that you can set in the opening tag (such as the “Title” of a Window).
- Sometimes, XAML controls are “child” controls. They are more detailed information for the “parent” control, and must be placed between the “parent” controls opening and closing tags.
- If there are no items between an opening and closing XAML tag, you can make it self-closing by placing the “/” before the “>” in the tag. These is called “self-closing”.
- For example: “<RowDefinition Height=”Auto”/>”.
- A common way to place objects on a XAML screen is to use a “grid”.
- A grid has rows and columns. You can define their height and width as “Auto” (to make it the size of the controls inside of it), a number (to use a specific number of pixels), or “*” (to use all the remaining available space).
- The top row is number “0”. The leftmost column is number “0”. As you move down (for rows), or to the right (for columns), the index increases by 1.
- You place other controls on the screen by setting their row and column positions in the grid.
Source Code
MainWindow.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <Window x:Class="WPFUI.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:WPFUI" mc:Ignorable="d" Title="Scott's Awesome Game" Height="768" Width="1024"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="225"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="250"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="Menu" Background="AliceBlue"/> <Label Grid.Row="1" Grid.Column="0" Content="Player Data" Background="Aquamarine"/> <Label Grid.Row="1" Grid.Column="1" Content="Game Data" Background="Beige"/> <Label Grid.Row="2" Grid.Column="0" Content="Inventory/Quests" Background="BurlyWood"/> <Label Grid.Row="2" Grid.Column="1" Content="Combat/Movement Controls" Background="Lavender"/> </Grid> </Window> |
Xaml designer is not showing up for me. Do you know any reason for that?
What version of Windows, and of Visual Studio, are you using? I’ve heard of problems if you are running Windows 10, and have not run update 1511. Try running Windows Update, to make sure everything is current, and there were not any installation failures.
Let me know if that does not solve the problem. We can look for other possible solutions.
I am running Windows 10 and VS 2015. So far I have seen no new updates available. I will try to see what updates come up in the next few days as I really want to learn this system and go through the tutorial with you.
Update 1511 came out a while back (the end of 2015, I believe). Can you type “winver” in the Cortana search box and tell me what version number you see? Also, can you take a screenshot of your Visual Studio, when you try to edit a XAML file? That might help me find the source of the problem.
Version number is 1607.
Got it working with VS2017
Great! I haven’t installed 2107 yet. But, I expect it should work almost the same as 2015. Please tell me if encounter any differences that cause a problem.
Thanks for the lesson; I never thought to work directly in xaml window. Your explanation was interesting and made xaml clearer 🙂
Thanks again for your effort to teach for free.
[(And please excuse my bad English 🙂 ]
You’re welcome. I like adding controls directly to the XAML. It is easier to control – at least, I believe it is.
Thanks for the tutorial. Looking forward going through all the chapters!
Never worked with XAML before but it almost feels like working with HTML. Thanks to some previous knowleadge about HTML I find it alot easier to work with XAML as a beginner with alittle twist ofcourse.
You’re welcome! XAML is very similar to HTML – including using a grid for positioning, like HTML used tables.
I am using visual studio community 2017 for Mac on a Mac book pro. I think there is no way for me using wpf application. How can I follow your course? What is the closest thing to wpf type project on mac (visual studio for mac)?
Hello Burak,
The easiest solution is use a program like Boot Camp or Parallels, to let you run Windows on your Mac. Microsoft does have a Visual Studio for Mac, which uses some XAML (like WPF). But I have not used it, and do not know if it will work.
Gonna try following along with UWP. Already had some issues but I managed to solve them.
For example, I had to do this to get the same result:
Hopefully I will be able to get through this tutorial and show the app made in UWP at the end! 🙂
Cool! I haven’t built a UWP project yet. So, it would be nice to see how it works.
Hmm, It seems like the code I posted in my previous comment didn’t get through.
That is what it looks like.
XML/XAML/HTML code tends to get filtered out in the comments. There are potential security problems with embedded scripts. To share future code, it’s probably easiest to use something like https://gist.github.com/