LinkedIn principal author Doug Winnie describes how the use the Properties panel in Microsoft Visual Studio 2015 Community Edition to modify design parameters of objects in XAML. In addition to understanding gradients, color, and text formatting options, Doug also introduces XAML tag and attribute options for converting attributes into child tags, and how to add more sophisticated component customization through child elements.
- [Voiceover] Visual Studio has tools to help you add design elements to your app. There is also a companion application called blend that has even more tools. But the changes that we're gonna make can entirely be done in Visual Studio. Working with color and fonts can be a lot easier when you work with a properties panel in Visual Studio. For instance, let's add a gradient to the background of our app. The grid container is the most outer container in our app. So we can add a gradient background to it. Navigate in the code and select the grid item.
It'll now appear in the properties panel. Colors are referred to as brushes. You can have multiple different types of brushes, including solid colors, gradients, or images. You're going to add a gradient brush to the grid container. Expand the brush section of the properties panel and select the middle control for gradient. You'll see a color-picker display. And below will display the gradient with two stops on it. These are the points in the gradient where there is a color. You can select a stop and pick a color using the color-picker.
You can also enter in a specific number value. Or you can use a hexadecimal value. If you've done web development work, you might be familiar with hexadecimal color. We can set the first stop to be a medium green color. The second, we can set to be a little bit brighter. So now the gradient has a nice gradual effect. If we look at the code, you'll see that the grid has a new section of code in it. XAML tags can have attributes in the opening tag. You can also define attributes as tags within.
In this case, we're using the grid dot background attribute and are defining it using tags. Inside there are additional tags and attributes that define our gradient in XAML code. Our title is now too dark to read. So we could update that. But this time, let's do that using code. In the text block tag add a foreground attribute. This'll define the color for the text. Instead of using a decimal or hexadecimal number you can use common names for dozens of colors.
So in this case we can make it white by entering in the word white. Another common attribute is font weight. This can have multiple different settings, but let's define this one as light. With that, let's bump the font size to 72. The next thing we can improve is the button that is pressed to roll the dice. So far, we've only been using text in the content property. But a button component can contain more than just text inside of it.
What you need to do is to convert the button from a self closing tag to one that has an opening and a closing tag. Then inside, you can put the items you want inside of the button. Let's add an image to our project to put it in the button. Right click the assets folder in the solution explorer and select add, existing item. Then navigate to the images to add folder. For this section of the project, select die roll and then click add.
Now we want to have the image and the text be laid out horizontally. So we can use a stack panel inside of the button. First, let's remove the existing content attribute. Then, add a stack panel with a horizontal orientation. Now, add an image component. Then add a source attribute. And then, enter in assets forward slash die underscore roll dot png. Let's give it a height of 50 and a width of 50 and close the tag.
Next, add a text block. We'll add in a text attribute and then enter in the word roll. We can give it some padding to give it some space between it and the image. And we'll change the font size so that it's 24, then close the tag. There, now you see the image and the text inside of the button. Finally, let's add some color to the other two text blocks. We could make the score text yellow. And we'll make the win text white. Let's bump the font size up a bit more to 24.
Something that may happen based on the size of the window is that the text that we display in the win text field could get cut off. We can configure that text field to wrap text in case it would get cut off. Add a text wrapping property and set it to wrap. There, this is starting to look pretty good. Let's go ahead and run this by pressing the play local machine button. There, this is starting to look pretty good. We can stop for now, but the design of your app is something that you can use your creativity to personalize 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