Windows Phone Dev – XAML Background Alignment Grid

Windows8-Phone-Logo

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"
       VerticalAlignment="Top"
       Height="800"
       Width="480"
       Margin="-4,-32,0,0"
       Grid.Row="0"
       Grid.RowSpan="2"
       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.

AlignmentGrid

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

Windows Phone 8 Dev – Creating A Basic Color Swatch

Windows8-Phone-Logo

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:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

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:

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

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
               TargetType="TextBlock">
            <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" />
        </Style>

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:

<StackPanel>
<StackPanel.Resources>
                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            </StackPanel.Resources>
            <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"
               TargetType="Rectangle">
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />
        </Style>

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:

                    <!--Lime-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="0"
                               Fill="#FFA4C400" />

                    <!--Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="1"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="2"
                               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
#A4C400
RGB
(164,196,0)"
            Grid.Row="0"
            Grid.Column="0" />
<TextBlock Text="Green
#60A917
RGB
(96,169,23)"
            Grid.Row="0"
            Grid.Column="1" />
<TextBlock Text="Dark Green
#008A00
RGB
(0,138,0)"
            Grid.Row="0"
            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
ThemeManager.ToLightTheme();

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.

Sources:

http://www.jeff.wilcox.name/2012/01/phonethememanager/

http://www.creepyed.com/2012/11/windows-phone-8-theme-colors-hex-rgb/

My First Windows Phone App (for Absolute Beginners)

Windows8-Phone-Logo

I’ve been interested in beginning Windows Phone / Windows 8 development in my spare time. I have been looking at some excellent video tutorials presented by Bob Tabor on Channel 9:

As I am an absolute beginner I wanted to create a simple app that would be of use to me. I ended up just laying out information from a .pdf using the panorama template for Windows Phone 8.1. Essentially it is just a fancy “Hello World” kind of app with graphics created / edited using Inkscape …

I found that this was a good exercise for starting to learn the basics of working with grids and layouts – textblocks, stackpanels and simple text formatting. This is the the app as it stands right now:

Changing the application name is very simple – just change the Panorama Title in MainPage.xaml:

         <!--Panorama control-->

        <phone:Panorama Title="TheraTog Care">

 

Next I commented out the code for the longlistselector so that I could hard-code my own data:

<!--Panorama item one-->
            <phone:PanoramaItem Header="Caution">
                <!--Single line list with text wrapping-->
                <!--<phone:longlistselector margin="0,0,-22,0" itemssource="{binding items}">
                    <phone:longlistselector.itemtemplate>-->
                        <!--<DataTemplate>-->

 

Then I setup columns and rows inside my grid:

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

Note: There are actually multiple instances of line 61 – one for each line of data displayed.

 Images were positioned into Grid rows:

                    <Image Source="Assets/No.png"
                           Grid.Row="1"
                           Height="30"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Right">
                    </Image>

 

Basic TextBlock formatting was straight-forward with margins, text-wrap and grid positions defined:

                    <TextBlock
                        Margin="18,5,0,0"
                        TextWrapping="Wrap"
                        Grid.Row="5"
                        Grid.Column="1"
                        Text="Wash seperate from other items of clothing">
                    </TextBlock>

 

The white background with black text was achieved with a white Border around a TextBlock:

                   <Border Background ="White"         
                            Grid.Row="7"
                            Grid.Column="1"
                            Margin="18,25,0,0">
                        <TextBlock
                        Margin="0,5,0,5"
                        TextWrapping="Wrap"
                        Grid.Row="8"
                        Grid.Column="1"
                        Foreground="Black"
                        TextAlignment="Center"                       
                        Text="Remove tabs before washing">
                        </TextBlock>
                    </Border>

 

For the About page I installed a NuGet package called YLAD (Your Last About Dialogue). I followed the documentation to add the text that I wanted to the About page. Then I just needed to add an Application Bar and link it to the About page:

        </phone:Panorama>

    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="about"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

 

As you can see the code for the Application Bar comes after the closing phone:Panorama and Grid tags. On line 715 I set the Mode to Minimized so that the Application Bar takes up as little space as possible. Line 717 is my first click event handler – below is the code behind in MainPage.xaml.cs:

        private void MenuItem1_Click(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/YourLastAboutDialog;component/AboutPage.xaml", UriKind.Relative));
        }

 

Line 35 navigates to the YLAD About page.

While there is nothing complicated in this app I did already learn that I should be doing things differently. I should have defined a style to manage my textblocks. This would have really helped when i came to making changes to the formatting of my text and would have greatly reduced the amount of redundant code and copying and pasting that I did.

I used Inkscape to produce the graphics and a Windows Store app called Vector to produce the different size tiles that I needed for the start screen.

Other things to fix would be the size of the Panorama Title and a new Panorama background.

I have to say that I am surprised how much I have learned even from trying to produce something as simple as this. I’d like to have a go at a To-Do list for my next app …