Modifying look and feel of your App Studio generated Windows Phone app using Blend and Visual Studio

By now you all probably heard about App Studio, the great new on line tool the Windows Phone team have created to create custom Windows Phone apps based upon a number of templates without any programming. The fact I actually like best is that apart from generating the app and installing it on your phone directly – enabling non-techies to create their own apps in a very easy way – there’s something in it for us techies as well. You can also download the source code of said generated app, and modify it to your heart’s content. So you can go beyond what the tool offers, both in layout and functionality, but without having to start from the ground. The tool even generates code on MVVM.

To show you how easy that is, I actually created a small blog post reader for my own blog using the “hobby” template. I deleted everything but the aboutDataSource and the news1DataSource. Fiddled around with the look and feel till it kind of looked like my blog. But the background of my blog is a star field, overlaid by  articles on a white panel. If could have made the text white, but that would not look like my blog (branding is important) and it would get blurry because of the star field.

So I decided to make it black text on the star field and adapt the templates in Blend and Visual Studio. My app in App Studio looked like displayed to the right. Black on black doesn’t read that well as I suspected. So I generated the app, downloaded the source code, opened the solution in Visual Studio and first compiled it. That worked. Then I opened it in Blend. It automatically opened about_info.xaml for me. I navigated to News1_NewsListControl.

The following procedure needs to be followed to edit it to make it look like my blog:

Right-click on News1_NewsListControl , select Edit Additional Templates/Edit Itemtemplate/Edit Current.Then right-click on the Grid, select Edit Style/Create Empty, and enter the following values:

 

 

 

Note this is an APPLICATION Style. Then we modify the background color to white and the opacity to 85%. This will make the blog posts look on a white, just a little transparent background

Hit save all, click News1_NewsListControl on the top of the breadcrump – looking good!

Now we want the header white as well. That’s a problem – both the header and the text inside the panels both have the style “CustomApplicationTextBrush”. If we were to set that white, we would get white headers and white text on white panels. We continue in Visual Studio. Open up up App.Xaml (it’s in 1 – UI\Wp8App) and find in the XAML code the following line:

<SolidColorBrush x:Key="CustomApplicationBackgroundBrush" Color="#000000" /> 

Copy it and edit it:

<SolidColorBrush x:Key="CustomApplicationHeaderBrush" Color="#ffffff" /> 

Open about_info.xaml, (it’s in 1 – UI\Wp8App\Views) find the line with the “about” text:

<TextBlock Text="about" Foreground="{StaticResource CustomApplicationTextBrush}"/> 

And change CustomApplicationTextBrush in CustomApplicationHeaderBrush.

Bang! The “about” text changes into white. Find the “news” TextBlock as well and repeat the procedure.

If you run the application, you will the news panel quite OK, but the about panel not looking like it should, and so is the page that appears when you tap on an article

This can only be done from XAML code view, and is actually pretty simple. Find the ScrollViewer in “Panoramaabout_Info0”, and surround it with a style Grid:

<Grid Style="{StaticResource PanelStyle}"> 
  <ScrollViewer Margin="15,0"> 
    <mytoolkit:FixedHtmlTextBlock FontSize="24" 
               Foreground="{StaticResource CustomApplicationTextBrush}" 
               Html="{Binding Currentabout_InfoHtmlControl}"/> 
</ScrollViewer> 
</Grid> 

Result:

This can only be done from xaml code as the designer is playing up over the FixedHtmlBlock. That’s one. Now open up the news1_Detail.xaml. That’s the page showing the whole article. There’s no literal text here, data is being bound here to the GUI so the same template can be used for every article. There’s also a text block that holds the title:

<TextBlock Text="{Binding CurrentRssSearchResult.Title, Converter={StaticResource SanitizeString}}" Foreground="{StaticResource CustomApplicationTextBrush}"/> 

Here again we have a CustomApplicationTextBrush that needs to be changed into to make the article header white. A little bit lower is the ScrollViewer holding the article, which is conveniently already surround by a grid:

<Grid Margin="10,5,5,5"> 
  <ScrollViewer> 

Just add the style:

<Grid Margin="10,5,5,5" Style="{StaticResource PanelStyle}"> 

And done

Now we want to make extra functionality. We want to be able to mail the author, i.e. yours truly:

We need an extra button in the “about” screen. That is actually pretty simple too. First, we have to define the function. It’s in the “About” screen, so we need the about_InfoViewModel .cs (it’s in 1 – UI\Wp8App\ViewModel). All the way to the end, insert the following the following:

public ICommand SupportQuestionCommand 
{ 
  get 
  { 
    return new RelayCommand(() => 
    { 
      var emailComposeTask = new EmailComposeTask 
      { 
        To = "joostvanschaik@outlook.com", 
        Subject = "Question about DotnetByExample" 
      }; 
      emailComposeTask.Show(); 
    }); 
  } 
}

Now go all the way to the top and add to the using statements:

using Microsoft.Phone.Tasks; 
using MyToolkit.MVVM; 

This is the actual definition. But rather than hard connecting view models to each other, the framework has generated interfaces around it, so the interface belonging to this viewmodel needs to be updated as as well. Open the Iabout_InfoViewModel.cs (it’s in 1 – UI\Wp8App\Interfaces) and add:

ICommand SupportQuestionCommand { get; } 

The functionality is now done. Now for the user interface. First, we need an image. For e-mail, let’s use an envelope. Take a 128x128 pixel image – white with a transparent background, that (inverted) – looks like to the right 

Open the directory 1 – UI\WP8App\Images\Icons\Dark directory, and simply drag de image on top of it. It will be automatically added to the solution. Let’s suppose the image is call “mail.png”.

Creating the app bar button and wiring up the command is simple enough: in about_Info.xaml there’s this rather intimidating piece of XAML

<mytoolkitpaging:BindableApplicationBar x:Key="Panoramaabout_Info0AppBar" IsVisible="True" IsMenuEnabled="True" Mode="Minimized" BackgroundColor="{StaticResource CustomApplicationAppBarBackgroundBrush}" Opacity="0.99" ForegroundColor="White"> 
<mytoolkitpaging:BindableApplicationBarIconButton x:Name="Panoramaabout_Info0SetLockScreenBtn" IconUri="/Images/Icons/Dark/SetLockScreen.png" Text="{Binding Path=LocalizedResources.SetLockScreen, Source={StaticResource LocalizedStrings}}" Command="{Binding SetLockScreenCommand}"/> 
</mytoolkitpaging:BindableApplicationBar> 

But it ain’t that difficult. Just before the last line

</mytoolkitpaging:BindableApplicationBar> 

Add

<mytoolkitpaging:BindableApplicationBarIconButton 
    x:Name="Panoramaabout_mail" 
    IconUri="/Images/Icons/Dark/Mail.png" 
    Text="Mail author" 
    Command="{Binding SupportQuestionCommand}"/> 

See what’s going on here? You add a button to the application bar, you give it an icon, a text next to the icon, and a command that needs to be fired when the button is clicked. And sure enough, when you click the “Mail author” button, the mail app opens as displayed here

And that’s all that there’s too it. You make Windows Phone 8 from code, you can make them with App Studio, you can do a bit of both. For those who want to learn themselves how this is done: both the generated (before) and the modified code (after) are downloadable, and far all I care you adapt it to your own blog. I would recommend though changing the e-mail address to your own, or else I will get some peculiar mails I fear ;)

Happy clicking!