Use the XAML productivity tools to make the MyProjectsView page more presentable.
- [Instructor] With the core functionality of our app complete, we can now put some effort info the UI to make it look better. In this video, we'll go through the first view we just implemented, my projects view and add some styling to make it more presentable. When we're done, the view will look more like this, with additional information to display the project owner, the number of tasks and the number of collaborators working on the project. Start with my project view in Visual Studio. The first thing we're going to do is add a header to the page that says my projects. At the root of the stack panel layout control, we're going to add a text block.
The text will say My Projects. On line 13, we'll add a property to make the font size more visible at 30. On line 14, we'll add a margin so that it's not touching the navigation controls. Finally, we'll set the foreground to black so that we can see the text. The next thing we're going to do is we're going to modify the location of the text box and the button that allows a user to add a new project. We don't want them hugging each other and we don't want them right under My Projects text block.
Immediately under the My Projects text block, let's add margins and a minwidth to the text box so that it's not so small. For the project name box we'll add another 10 effective pixel margin and we'll add a MinWidth of 200 pixels. The next thing we'll add is we'll add placeholder text. This will be essentially gray text that will disappear when the text box gets focused. The placeholder text will say Project Name. Next, let's modify the button and do some similar operations.
We're going to give it a margin of 10 as well so that it lines up properly with the text block. One other thing we're going to do is we're going to change the button. Rather than saying Add Button, we'll just make it a plus sign since our text box has placeholder text to designate that they're adding a project name, we don't need that information on the button anymore. So, remove the content and delete line 22. Also, don't close the button in the same open tag. On line 24, add the close tag. Now on line 24, we're going to specify the content of the button explicitly rather that just sending it to text.
On line 25, we'll set it equal to a SymbolIcon. And that symbol will be equal to add, which will be a plus sign. Now, the only remaining operations we want to do on the button is make the background transparent so that it's just a plus symbol floating on the UI. And then on line 25, we'll make the foreground black so that you can see the symbol. Let's see what that looks like in the designer. I can zoom in and see that I have My Projects with the project name and the plus symbol.
Because we didn't change the event handler or any of the code behind, the functionality will remain identical. We're just making it look better. The next changes we want to make are to the displayed projects information. And we're displaying the projects in the list view. In order to change how it looks on the UI, we can simply change the data template. The modifications we're going to make are to display the project owner, the number of tasks and the number of collaborators below the name. What we'll do is we'll add a stack panel around our text block so far, and we'll put this text block directly in the stack panel on line 38.
The stack panel orientation defaults to vertical, so as we add new layout controls, it will be immediately below this text block. The next thing we'll add is another stack panel with a horizontal orientation. This will allow us to display the information side by side immediately below the name of the text block. We'll also change the font size and the margin of the project name so that it looks a little bit better. On line 39, we'll set font size to 26 and margin equal to five effective pixels.
Now, we want to use some symbol icons to represent the information about the project, rather than text itself. In the stack panel, beginning on line 42, let's add the first symbol icon which will represent the owner of the project. We'll set this symbol equal to Contact, which will show a human figure. The text to the right of this symbol will be the name of the project owner. On line 43, we'll also give the symbol a height of 20 effective pixels, because that's the font size we're going to set for our text block immediately to the right of it.
On line 44, we'll add the first text block. And we'll set the font size equal to 20. We're not going to close the text block, rather we're going to set the content inside of the text block control. What we're going to use is what's called a run control, which is just a portion of text. On line 45, we'll set the first run text to just be a space. This will make it so that there's a little bit of space in between the symbol icon and the beginning of the text. The next text that we're going to want to set in our run is the owner's name.
But in order for us to do that, we're going to need to change the data type for this data template. In order for us to do that if you recall from the last video, we'll need to add the name space for our data. On line eight, I'll add xmlns data equals using:Models, model, todotogether, models. If I return to where I was before, on line 37, I condensed that x:DataType equals data:Project.
Now on line 47, I can set my run Text equal to x:Bind Owner.UserName. The next run is just going to be a separator between this piece of information and the next piece of information. So we'll set run Text equals space, a vertical bar and space. That's it for the first text block. Now we're going to do something similar for the number of collaborators and the number of tasks. So outside of the text block, lets add another symbol icon.
This symbol will be set to bullets. And bullets will look like a list of tasks. So this will represent our tasks. Again, we'll set the height to 20. Now, we're going to add another text block with the information for the tasks. On line 52, we'll open our text block control with the font size of 20. We'll add the same three runs. So, we'll copy lines 46 through 48 into that text block. Inside this text block, we're going to add the same three runs.
On line 53 Run Text is just a space. On line 54 Run Text is going to be equal to x:Bind Tasks.Count, which will list the number of tasks for this project. The final run will just be the vertical separator bar again. Now let's do the same thing for the number of collaborators. This symbol will be set to People showing multiple people working on the project.
Again, we'll set the height to 20 on line 58 and then we'll add our text block with the font size of 20 on line 59 with our runs. The first run is a space and the second run is going to be equal to x:Bind Collaborators.Count. Now, we don't need the vertical bar at the end because we don't have anymore information to display. This is just to separate pieces of information.
Let's take a look at our designer and see if it shows anything. We don't have any design time data so we'll only be able to view this at run time with a project. Go ahead and F5 the app and let's test it. Isn't that looking much better already? Let's go ahead and add a task and a collaborator to make sure those update properly. Test test. Test@test.com. Now, if I return home, I should see one and one. That's looking a lot better and I'm happy with that.
Now, in the next video, I'm going to challenge you to make project details view to look more presentable. I'll give you the end state and using the skills in this video, see how you do.
- Working with .NET for UWP app development
- Establishing application architecture
- Configuring Azure services
- Configuring the mobile app service backend
- Testing and publishing the service backend
- Using Facebook authentication
- Using XAML
- Client server abstraction API
- Using the UWP community toolkit
- Styling app views
- Creating adaptive views
- Testing an app for multiple user accounts
- Publishing to the Windows Store
- Sideloading app packages