Customised Tiles Button Control in Windows Phone 8.1

Introduction

In this article we will customize the default Button Control and provide it to a cool tiles look. It is very easy, all the coding is done with XAML.

Step 1

To build a Windows Phone 8.1 application, ensure you have Visual Studio 2013 and the Windows Phone 8.1 SDK installed in your system.

Go to "New Project". Under "Installed" > "Templates" > "Visual C#" > "Store Apps" select "Windows Phone Apps" then select "Blank App (Windows Phone)" and provide it a name as you choose (here I am using "TilesButtonWP8.1").

Step 2

Navigate to the "MainPage.xaml" section of the project and add a Button Control and a TextBlock control to show that the Button has been pressed in the project .(XAML) as in the following:

<Grid>
    <Button x:Name="TilesBtn" Click="TilesBtn_Click" Background="AntiqueWhite" Foreground="Black" BorderBrush="CornflowerBlue" Margin="32,298,0,179" Height="163" Width="338" >
    </Button>
    <TextBlock x:Name="resultTextBlock" HorizontalAlignment="Left" Margin="32,70,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="36" />
</Grid>

Step 3

Now add a Grid inside the Button Control that further helps to add images and a TextBlock in the Button that gives the Button a tiles look.

<Button x:Name="TilesBtn" Click="TilesBtn_Click" Background="AntiqueWhite" Foreground="Black" BorderBrush="CornflowerBlue" Margin="32,298,0,179" Height="163" Width="338" >
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
     </Grid>
 </Button>

In the code above we have added a Grid that is further separated into two Columns inside the button. The first column is used for the image and in the second column we will add the two TextBlocks.

Step 4

Now inside the Grid add an Image in the first Column and in the second column of the Grid add a StackPanel, inside the Stackpanel add two TextBlocks. (Here in this project I have used a Windows logo).

<Button x:Name="TilesBtn" Click="TilesBtn_Click" Background="AntiqueWhite" Foreground="Black" BorderBrush="CornflowerBlue" Margin="32,298,0,179" Height="163" Width="338" >
     <Grid>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <Image Source="Images/Windows8.png" Height="120" Grid.Column="0" Margin="-6,0,-100,0" Stretch="Fill"/>
         <StackPanel Width="215" Grid.Column="1" Margin="95,0,119.167,0">
             <TextBlock Text="C# Tiles" Foreground="#FFB78BD7" FontSize="36" FontFamily="Segoe UI" FontWeight="Light"/>
             <TextBlock Text="This is my First Tiles Button in Windows Phone 8.1" FontSize="12" Foreground="Gray" TextWrapping="Wrap" Height="41" Margin="0,0,10,0"/>
         </StackPanel>
     </Grid>
 </Button>

This is the full code for Tiles like a Button.

Step 5

Now add some C# code inside the Button Event so that when we press the button a message will be shown in the TextBlock that we have added, so that it let us to confirm that all the Button properties are working well.

So go to the Button Event Method stub and add the following C# code:

private void TilesBtn_Click(object sender, RoutedEventArgs e)
 {
     //Codes for Click Event
     resultTextBlock.Text = "Tiles Button Pressed";
 }

Step 6

That's all, just compile and run the project. You will see your Tiles Button. Just press the button and the message that we have added in the TextBlock inside the Button Event Method stub will be shown.

I am including the source code also. If you have any query then please feel free to ask.

Thank you.