Over a million developers have joined DZone.

How to Build a Button Based Windows Phone Pivot Header with Telerik RadImageButtons

· Mobile Zone

Learn how to Deliver Better Mobile Apps Faster with Continuous Quality by managing the complexities of testing multiple devices and scenarios with this whitepaper from Perfecto Mobile.

In my recent project Voices Admin for Windows Phone, I used again a Pivot to display various data on different pages. I truly love this control (also with its glitches that happen sometimes), but I wanted a different design for the headers.

This is how it looks like (on my about page):

wp_ss_20140218_0001

As you can see, there selected item is highlighted with a colored circle, while all other items are without. There is no text, but the icon pretty much speak for themselves.

The base control for this is a RadImageButton. The RadImageButton allows us to easily use icons or images as Buttons and is highly customizable. Here is the basic code to make the button look like above:

<telerikPrimitives:RadImageButton 
    x:Name="infoButton" 
    RestStateImageSource="/Assets/About.png" 
    HorizontalAlignment="Center" 
    ButtonType="Custom" 
    ButtonBehavior="ToggleButton" 
    ButtonShape="Ellipse"
    Height="80" 
    Width="80"   
    Margin="-12,0,0,0" 
    Tap="infoButton_Tap" 
</telerikPrimitives:RadImageButton>

I changed the ButtonBehavior to ToggleButton. This is how I make it “selected”, and as the rectangle doesn’t look good, I changed the ButtonShape to Ellipse. The Height and Width of the Buttons needs to be 80 pixels, otherwise you won’t be able to add 5 items in a row.  The Margin needs to be set to a negative value due to its positioning inside the Header.

Let’s have a look at the TitlePanel that contains all RadImageButtons:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,-32,0,0" Height="182">
    <StackPanel.Background>
        <SolidColorBrush Color="{StaticResource PhoneAccentColor}" Opacity="0.4"/>
    </StackPanel.Background>
    <Grid x:Name="PivotHeaderGrid" Margin="12,0,0,0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Grid.ColumnSpan="5" Height="32"></Border>

<!-- RadImageButtons in here   -->

    </Grid>        
</StackPanel>

As you can see, I am using the standard StackPanel.

#ProTip: As I want to have the background also covering the SystemTray, I need to set it to a negative Margin of 32 . Only this way we are able to set the TitlePanel and the SystemTray to the same color without having a line between those two.

The rest of the code above is pretty self explaining. Add a Grid with 5 Columns and 3 Rows. The first Row is our SystemTray. To make our app holding always this space free for the SystemTray, we added a Border with a fixed Height of 32.

In Row 1, add a TextBlock with your application name (if you want to). In Row 2, add all RadImageButtons that you need for your application.

But of course, that’s not all. We still need to make the buttons aware of which PivotItem is selected and set their Checked state to true or false depending on that, as well as handle the Tap event of the RadImageButtons.

This is where we need to hook up with the Pivot_SelectionChanged event as well as with the corresponding RadImageButton_Tap events of each button.

Let’s have a look at the Pivot_SelectionChanged event first:

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

switch (Pivot.SelectedIndex)
{
    case 0:
        RadImageButton1.IsChecked = true;
        RadImageButton1.IsHitTestVisible = false;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 1:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = true;
        RadImageButton2.IsHitTestVisible = false;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 2:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = true;
        RadImageButton3.IsHitTestVisible = false;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 3:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = true;
        RadImageButton4.IsHitTestVisible = false;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 4:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = true;
        RadImageButton5.IsHitTestVisible = false;
        break;
}

}

As you can see, we need to change the IsChecked state and the IsHitTestVisible state of the corresponding RadImageButtons in relation to the SelectedIndex of our Pivot. If we won’t set change the IsHitTestVisible property, the Checked state will go away if a user taps a second time on our RadImageButton.

Now let’s have a look at a RadImageButton_Tap event:

private void RadImageButton1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            //making sure we are not already at Index 0
            if (Pivot.SelectedIndex != 0)
            {
        //setting the IsChecked and IsHitTestvisible states
                RadImageButton1.IsChecked = true;
                RadImageButton1.IsHitTestVisible = false;
                RadImageButton2.IsChecked = false;
                RadImageButton2.IsHitTestVisible = true;
                RadImageButton3.IsChecked = false;
                RadImageButton3.IsHitTestVisible = true;
                RadImageButton4.IsChecked = false;
                RadImageButton4.IsHitTestVisible = true;
                RadImageButton5.IsChecked = false;
                RadImageButton5.IsHitTestVisible = true;

                //going to Index 0
                Pivot.SelectedIndex = 0;
            }
        }

As you can see, we are doing basically the same. The differences are that we are checking the current SelectedIndex property as well as navigating to the desired PivotItem after setting the RadImageButton’s IsChecked and IsHitTestVisible states.

No you know how you can create an awesome looking and feeling Pivot with Telerik’s RadImageButtons.

As always, I hope this post is helpful for some of you.

Happy coding!

Do you know Why Apps Succeed? Perfecto Mobile analyzed over 1,000 responses to their Digial Quality Strategies survey and aim to answer the question, "Why do apps succeed?" in this exclusive report.

Topics:

Published at DZone with permission of Marco Siccardi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}