Windows Phone App Studio – Part 3 – XAML Styling

Styling XAML with Windows Phone App Studio

If you are following along then you are well on your way to being able to publish an app using Windows Phone App Studio. If you are just joining in, great! This part of the tutorial will touch on some stying that we can do to make our app not only look a bit different but function a little better based on some of our needs.

If you recall in Part 1, I touched on the predefined templates App Studio provides. There are a number of them however, in certain situations the template does not match the data that should be bound to the view.

Before we dive in, the rest of this article assumes a project was created in App Studio and the source code was generated and downloaded. Please refer to Part 1 for details.


MVVM

The way the UI project is developed is with the MVVM pattern. This is the Model-View-ViewModel design pattern. I am not going to go into any detail at all regarding this pattern, except for the fact that if you are a novice to programming, no worries, you can just focus on the view portion. If you are a seasoned developer, this pattern makes use of ViewModels which help with the data binding to views. It makes it very easy for Visual Designers to work with Developers and swap out views without disrupting the code.

The views we will be concerned with are all located in the UI project under the folder called Views. There are the “main” views in the View folder, along with templated views located in the DataTemplate folder.

Let’s define the views we see.

  • MainPage.xaml – this is the main page of the app. It uses a Panorama control to bring in all of the other views. A few other items are defined on here such as the Application Bar and loaders.
  • ImageViewer.xaml – is just a view to handle viewing images in full size.
  • AboutThisApp.xaml – this is the view that if you choose include about page in the Publish section. It appears when the user interacts with the Application Bar.

Now, depending upon your app you may or may not have other views and they will most certainitly be named different from mine. The naming convention for the other views use the “Headline” you placed in App Studio for each of the section.

For the app we built in Part 1 (Demo Bistro) I used the section names of Specials, Entertainment, Menu and Videos. The views that are generated are

  • SpecialsView.xaml
  • EntertainmentView.xaml
  • etc..

Detail views are generated with these as well. Click around the folders, you will be able to easily identify which view you intend on modifying.

For the purposes of this tutorial I am going to fix a few issues with the Bistro app and customize the look and styling.

Editing Views

The first view (section) of my app is what I called Specials. I am opening up the SpecialsView.xaml in Views\DataTemplates and I am going to being editing there.

In my view the “text” is being cut off and does not look that good. There are a few things we can do.

  1. Swap out the binding property to something different (date)
  2. Change the converter parameter so that it does not stop at 280.
  3. Adjust margins or font sizes
  4. Remove entirely.

All I did here was change the parameter from 280 to 50. It looks better. You can mess with margins, fonts etc to get the results you are looking for.

Move down a bit in the file and you will see a section for details. This is where the “content” that is bound.

This is the “detail” page that is presented when you click on a special. You can add new text blocks and use the Binding attribute to pick a properties in the view.

Properties

A few things to note with these controls and its properties. Content or Text – this is the text that is displayed. With the TextBlock control in the some are “hardcoded” while others are  bound from the Model using the {Binding Title} action. If you want to add Author or another property you can view the Model that is associated with your view to find what other properties are available. To do this you need to know what ViewModel your View is using. You can just guess by naming convention or you can go back to the MainPage.xaml and look for the Hub control and find the section you are editing and find the DataContext attribute.

My view is being bound to the MainViewModel.SpecialsModel. From there I can go to the Shared project under ViewModels to find SpecialsModel and then I can find the Data Schema.

In my example it is RssSchema. That is located in the Data project under DataSchemas (also known as Models) or I can “right-click” and choose “Go to definition”.

Here you will find all of the properies that you can bind to your view. (Caution, some properties may or may not contain data).

I am going to add the PublishDate to the view.

In the image we now display the PublishDate within the view and the Summary is also removed.

If you noticed, the PublishDate show the full Date and Time. That might work fine for you but I want just the Month, Day and Year. In order to do that I will create a converter that will adjust that string on the View side without touching the model. A converter is a method that uses the binding data and performs an operation on to transform its value.

Here is the DateTimeConverter code.

This code will take a ConverterParameter of a string of DateTimeFormat (M/d/yyy or dd-MM-yy as examples) and convert it to the proper string.

We need to add this to our App.xaml file so it can be included to be used in our views.

This is located with the other converters.

Now we can use it in our view. So I will add it to the TextBlock control.

 

HTML EntitiesWe now can fix one more converter. The TextPlainConverter misses some HTML entities. We can code that in there to take care of it. If we navigate to the Converter folder we will see all of them with this project. The TextPlainConverter is cleaning the HTML tags that might be present in a string. However, there could be cases where there are encoded characters in the string that do not get cleaned. In my case the HTML entity   (non breaking space) is not being stripped out. I will add a line to the code to fix that.

 

 

You probably also noticed a couple properties called Foreground or Background. Both of which can take either a Color String or a predefine color string. Ex: Foreground=”#363636″ or Foreground=”BlueViolet” or a reference to a property defined in the AppStyles.xaml file.

Detail View

The detail view (SectionView.xaml) is another area where customization needs to take place. From Part 2, Fixing the RSS Reader, we are now getting the full article. Which means images and everything. The current view contains an Image control already so we do not need that.

You could always swap out the Binding ImageUrl with a local path to an icon if you wish.

About View

The about view that is pregenerated within the App Studio works well, however, the UI and style is left to be desired.

I used standard XAML and controls to style the about page. Right now, all of the “text” is within the XAML. At somepoint I may move that to a resource file but I do not plan to change that text often.

Old XAML using properties from the About Model (which you should change but that will come when we talk about publishing).

New XAML

I added a bunch of Social icons and buttons. Each of which utilizes a CommandParameter to pass in the “type” of social button is being clicked. Here is the code from the class file.

I first created a handler for the Button_Click which will take in a parameter defined in the View. It then calls a function to determine what to do. It will either launch a windows by passing in the URL or send an email. I had to adjust the About Model to include my new properties.

 Colors and Backgrounds

To adjust colors for any item in the views, you can add it directly to the view within the BackgroundColor or ForearoundColor property of the control. (Mentioned above) The other location is in AppStyles.xaml, ButtonStyles.xaml and Generic.xaml. Poke around here and you will see comments for each of the major sections. Header, Title, etc… However there are Images defined as well. You can swap out each one with a path to a local image or you can swap out the images that come with the application. Easy way is to just look in the folder called Assets and find the image to swap out and create a new one with the same name and size. The other way is just to create new images and then update the reference to them.

As an example, anywhere it is defined AppLogoImage will use the the Bitmap that is defined in the AppStyles.xaml

I could just change the Logo.png to NewLogo.png or I can create a new Key called NewAppLogo and give it the proper path.

Same thing holds true with the background image. Change as you see fit.

Lance McCarthy has a great tutorial on how to change up the design time data. Take a look if you want more customizations of your App.

What’s Next?

That was not painful at all, huh? We did not have to touch any code (barely) and we were able to modify a few different views. The MVVM pattern is nice since it separates the code from the view pretty well. For novice developers this is perfect since you can play around with the view and not impact the logic within the code at all.

There are still a few little things we need to accomplish with the styles and layout but we will get to that in the next tutorial when we modify our models to accept other types of data.

Be sure to stay tuned for the next part of the series.

 

 

Leave a Comment

(2 Comments)

  • Venkat

    Good Article.
    i have doubt on how to styling the FixedHtmlTextBlock control. i would like to change the default gap between the lines in the content.
    how can i achieve this?

    • Joshua Drew

      The FixedHtmlTextBox control is part of a toolkit. It is not a standard XAML control. You can find the source and discussions on it here https://mytoolkit.codeplex.com/

  • Your email address will not be published. Required fields are marked *