LinkedIn principal author Doug Winnie describes how, in addition to built-in controls and components in the .NET framework for the Universal Windows Platform, developers can create their own custom components in Microsoft Visual Studio 2015 Community Edition. In addition, Doug introduces how to import existing design assets into a project and how to add them to a layout using the Image control.
- [Voiceover] It would be nice to actually see dice in the game instead of just numbers. We can do that by adding images to our game. Now this is going to be a three-step process. The first is to add the images and build our own custom components to display it. The second step is to add code to display the right side when it is rolled. The third step is to add the component to the app. When we work with a button or a text block, it is a component, an interface element that can be displayed and adjusted in the layout of our app.
We aren't limited to just the components that come with the Windows SPK. We can create our own, called custom components, and work with them the exact same way. To do that, we need to add a new item to our project. In our Solution Explorer, right-click on the name of our project, DiceOut. You'll see it under DiceOut Universal Windows. Right-click and select Add, New Item. We can add a number of new items to our app from here. What we want is to create a new user control.
Select that and give it the name DieImage at the bottom, and then click Add. We now have a new XAML file to go with our new component, DieImage. The component doesn't have anything in it yet, but that will change in a bit. If we look at the Solution Explorer, if you expand the DieImage.xaml file, you'll see that we have a C# CodeBehind file for our component. If you open it, inside you'll find that there isn't really much here yet, but we'll add some code to that later.
Head back to the XAML file. The nice part of a component is that it can be used multiple times. Since we have three dice, it can create a component for a single die and then place that component three times in our app to give each one a unique name. For the individual die, we can add six images that represent the faces of the die, and we can change the visibility of them to be on or off based on the value that is randomly generated for that die. So first, let's add in the images. There's a folder in the Exercise Files for this video called Images to Add.
We will use the images in that folder for this step. In the Solution Explorer, right-click the folder called Assets. Select Add and then Existing Item, since we are adding existing files to the project. Navigate to the location of your Exercise Files and select all of them, and click Add. You'll see them added to the Solution Explorer. Now we can add these to our component. In the XAML code we have an empty grid. Inside this we can add a canvas container. A canvas is a layout container that places everything on top of each other unless you specifically put it someplace, which is perfect for our needs here.
So we will add a canvas opening and closing tag. Within this we will add an image component. The image needs to have a unique name with the XName field. It needs to have a width, that we'll set to 100, a height, that we'll set to 100, and then we need to point to the location of the image. This is done with the Source field. It's located in the Assets folder, so we'll use the word Assets and then a forward slash and then the file name of the image.
We also want access to Visibility attribute, and we're going to set this to Visible. You'll see that the image is now on our display here. With one done, we can now copy and paste this code multiple times for the other five. We can update with unique names, changing the one to two, three, four, five, and six. The we can change the Source file and we can set the visibility for the last five to collapse, meaning we don't want to display them on the screen.
So now we have six images representing each side of the die. We have a unique name that we can use to access them and the Visibility property to turn them on or off from displaying in the app.
Finally, you'll experiment with your app to learn more about how Windows apps work, and then find out where to go next.
- Installing Visual Studio Community edition
- Working with C#, XAML, and the Windows SDK
- Getting a head start with starter templates
- Testing apps with device emulators
- Creating your first app
- Building interactions, game logic, and scoring
- Adding custom components
- Modifying design parameters in XAML
- Experimenting and updating the final app