Windows Phone Dev – Setting Style Properties for ListView


I wanted to style the background color for my ListView – so first I defined my style (ListViewBorder), in App.xaml:

<Style x:Key="ListViewBorder"
       <Setter Property="Template">
               <ControlTemplate TargetType="ListViewItem">
                   <Border Name="Border"
                       <ContentPresenter />

Then I bound my ListViewBorder to the ItemContainerStyle:

<Grid Grid.Row="1"
       <ListView x:Name="groupListView"
                 ItemsSource="{Binding AllGroups}"
                 ItemContainerStyle="{StaticResource ListViewBorder}"
                 ItemTemplate="{StaticResource RecipeGroupDataTemplate}"
                 Margin="0,10,0,0" />

Here’s the before and after results:


Custom ListView color



Windows Phone Dev – Making the Status Bar blend with your App


I’m working on a WinRT app for Windows Phone 8.1 and I wanted the app to blend in with the Status Bar more.

For this example I have added the highlighted code to my MainPage.xaml.cs:

        public MainPage()

            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;

            // Make Status Bar part of the screen



In my MainPage.xaml I have simply specified a border background around my first stackpanel:

&lt;!-- TitlePanel --&gt;
        &lt;Border Background=&quot;#0050EF&quot;&gt;
            &lt;StackPanel Grid.Row=&quot;0&quot;
                &lt;TextBlock x:Uid=&quot;RegionsPageHeader&quot;
                           Style=&quot;{StaticResource TitleTextBlockStyle}&quot;
                           SelectionChanged=&quot;TextBlock_SelectionChanged&quot; /&gt;

As you can see from the screenshot the Status bar and my textblock now share the same color.



Windows Phone Dev – XAML Background Alignment Grid


Some projects in Visual Studio have an alignment grid commented out in the MainPage.xaml.

Unfortunately the sample that I am working on did not have this code so I had to go looking for it:

<Image Source="/Assets/AlignmentGrid.png"
       IsHitTestVisible="False" />

This snippet needs to be inside the final </grid> tag on the page to work.

You will also need to put the AlignmentGrid.png in your assets folder.


Don’t forget to delete the .png and comment out (or delete) the code before uploading to the store!

Windows Phone Dev – XAML: Text Wrap and Text Trimming at the same time


Windows Phone typically uses a large font for headings, and this is great – until you have a lot of text.

By default headings will just run off the side of the screen, which for my app is not optimal. Turning on Text Wrapping is the next step – but that is not a great solution if you suddenly have three lines of very large text.

The solution would appear to be to simply use Text Wrapping and Text Trimming at the same time, but that doesn’t work until you specify the height of the textblock:

<TextBlock x:Name="AppCommand"
                       Text="{Binding Title}"
                       Style="{ThemeResource HeaderTextBlockStyle}" />

The MaxHeight property is something you will have to play around with depending on your needs, but as you can see I have limited my heading to two lines which is what I wanted to achieve:


Windows 8.x Phone Dev – Windows Phone Toolkit Toggleswitch Control


I’m just starting work on a little Silverlight app for Windows Phone 8.x and want to use the ToggleSwitch control on the settings page.

The ToggleSwitch is one of many useful controls that are part of the Windows Phone Toolkit – so the first step is to install the toolkit.

In Visual Studio click the Tools menu, Nuget Package Manager and then Package Manager Console. At the Package Manager prompt type the following:

install-package wptoolkit

Next add the toolkit namespace prefix to the page you are working on:


Adding toolkit controls in XAML is straightforward:


IntelliSense will give a full list of the toolkit controls for you.

<toolkit:ToggleSwitch x:Name="toastToggle"
                      Header="Enable Toast Notifications"

Above is the basic code that I used for my ToggleSwitch:


I haven’t finalized the behavior in the code behind for the ToggleSwitch but there are two events to show “On” and “Off” when the control is checked or unchecked:

private void toastToggle_Checked(object sender, RoutedEventArgs e)
            toastToggle.Content = "On";

private void toastToggle_Unchecked(object sender, RoutedEventArgs e)
            toastToggle.Content = "Off";

There are plenty of other controls worth looking at – I already have my eyes on the DatePicker and the TimePicker for this app!

Happy coding!

Windows Phone 8 Dev – Creating A Basic Color Swatch


In this post I am going to go over how to quickly create a color swatch in Windows Phone 8. This particular app shows the colors for the Windows Phone 8 themes and their hexadecimal and RGB values.

This is our to-do list:

  • create a basic grid with rows and columns
  • define a style for the rectangles inside the grid
  • define a style for the text
  • force the app to use the light theme (optional)

The Windows Phone 8 themes consist of 20 colors:

WP8 Themes Accents

So I decided on a grid of 3 columns and 7 rows:

            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

As you can see, in MainPage.xaml, we have a Grid and three ColumnDefinitions with a “*” for the width. This means that each column gets one third of the width of the screen. I also have 7 RowDefinitions whose height is set to “Auto“. This means that they adjust their size according to their content.

We want our content to scroll up and down so we need to add a ScrollViewer:

<ScrollViewer VerticalScrollBarVisibility="Auto">

So now we have a grid that can scroll up and down and we need to start putting content into each cell of the grid. Before we do that it pays to think about the properties of our content – we don’t want to manually specify each property in every grid right?

In App.xaml we can set properties under <Application.Resources> as follows. Let’s start with the text properties first:

        <local:LocalizedStrings xmlns:local="clr-namespace:HexColor" x:Key="LocalizedStrings"/>

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />

Here I have named my text style GridCellStyle and the TargetType is set to TextBlock. I have Setters for Horizontal and Vertical Alignment, Text Alignment, Foreground (color) and Font Weight.

To call on these properties use <StackPanel.Resources> in your MainPage.xaml like this:

                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid> ...

As you can see we have our style based on GridCellStyle with TartgetType set as TextBlock– so all of the text we set will have the properties that we defined in App.xaml.

Similarly you can see that I also have a RectangleStyle with a TargetType set as Rectangle. This style has properties for the Width, Height and Margin of the rectangles that I am going to draw in the grid. Here are the rectangle style settings from App.xaml:

        <Style x:Key="RectangleStyle"
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />

Now that we have our grid defined and our properties set up we can populate the grid cells. Starting with the rectangles we just need to define the colors and their position in the grid:

                    <Rectangle Grid.Row="0"
                               Fill="#FFA4C400" />

                    <Rectangle Grid.Row="0"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Fill="#FF008A00" />

These are the first three rectangles that I defined – as you can see all I need to set in their position in the grid using Grid.Row and Grid.Column and the Fill color (in hexadecimal). You can just type the color name instead of the hexadecimal value if that meets your needs.

Again with the text for each grid cell I am just defining the grid position and the actual text to display:

<TextBlock Text="Lime
            Grid.Column="0" />
<TextBlock Text="Green
            Grid.Column="1" />
<TextBlock Text="Dark Green
            Grid.Column="2" />

The last item on my list is to force the use of the light theme. I did this because I think a color swatch looks best that way – but there are some caveats. For phones with AMOLED or similar screens this will impact battery life (if the app is used a lot).

To force the light theme I am using Jeff Wilcox Phone Theme Manager. To install it click Tools > NuGet Package Manager > Package Manager Console. Run the command below:

Install-Package PhoneThemeManager

Now simply add the following to App.xaml.cs:

//Set theme to Light

That’s everything on our list done and even though it’s very simple I think that it looks good.

App Screenshot

If this swatch is of use to you it is available in the Windows Phone Store here.