Customizing ListPicker for WP7 - Part2

published on: 11/12/2010 | Views: N/A | Tags: WP7Toolkit Styling UI ListPicker

by WindowsPhoneGeek

This is Part2 of the "Customizing ListPicker for WP7" article in which I explain in details how to style a Windows Phone 7 ListPicker and how to customize the different visual states. In Part1 I talked about the different parts and the default ControlTemplate so in this post I will give a real example of how to completely customize the appearance of ListPicker in varias ways.

Note: All about the ListPicker control you can find in "ListPicker for WP7 in depth" post. For more information about all new controls in the updated version of the toolkit please visit the "Silverlight Toolkit November 2010 Update - What's New" post.

To begin with first visit the Part1 for reference.

Now lets take a look at the ControlTemplate where I have added some new elements like the ellipse:

As you can see I have added two ellipses with Orange strike color, changes some colors and added ad additional PlaneProjection.

You can compare with the default template and find the differences:

The final look of the newly styled ListPicker should be:

Note: In this example I use a databound ListPicker with the following data templates:

<DataTemplate x:Name="PickerItemTemplate">
                <StackPanel Orientation="Horizontal" Background="Transparent">
                    <Border Background="LightGreen" Width="34" Height="34">
                        <TextBlock Text="{Binding Country}" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                    <TextBlock Text="{Binding Name}" Margin="12 0 0 0"  />
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Name="PickerFullModeItemTemplate">
                <StackPanel Orientation="Horizontal" Margin="16 21 0 20" Background="Orange" Width="110" Height="110" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5"/>
                </StackPanel>
            </DataTemplate>

The next thing I am going to do is to change the Expanded state behavior. I will make some kind of roll animation with PlaneProjection.RotationZ. In order to implement such effect  I will have to add some projection to the animated element (in our case this is the element named "grid"):

                                    <Grid.Projection>
                                        <PlaneProjection x:Name="testProjection" />
                                    </Grid.Projection>

After that the animation should looks like:

                                <VisualState x:Name="Expanded">
                                            <Storyboard>                   
                                                <DoubleAnimationUsingKeyFrames  Storyboard.TargetName="grid"
                                                    Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)">
                                                    <EasingDoubleKeyFrame KeyTime="0" Value="0">
                                                        <EasingDoubleKeyFrame.EasingFunction>
                                                            <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                        </EasingDoubleKeyFrame.EasingFunction>
                                                    </EasingDoubleKeyFrame>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="45">
                                                        <EasingDoubleKeyFrame.EasingFunction>
                                                            <ExponentialEase EasingMode="EaseOut" Exponent="15"/>
                                                        </EasingDoubleKeyFrame.EasingFunction>
                                                    </EasingDoubleKeyFrame>
                                                    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="360"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames
                                                   Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="BorderBrush"
                                                    Duration="0">
                                                    <DiscreteObjectKeyFrame
                                                    Value="Transparent"
                                                    KeyTime="0"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>

    I have added a rotate effect and also changed the BorderBrush color in the expanded state. Now when you switch to Expanded mode the effect should be something simmilar to this(the grid element is rotatet and the borderbrush is made transparent). That can be seen only in the Expanded scenario which is controlled through the ItemCountThreshold property (you can determine whether your control to go to Expanded of FullMode).

Now lets focus on the cases when we have FullMode. The corresponding element that we have to change is "FullModePopup".

As you can see in the popup there are ListBox and ContentControl. The ListBox is responsible for the content presentation and the ContentControl for the header. ListBox is a control that allows various ways of customizations. It can be styled using the Style property and  its items can be styled as well through the ItemContainerStyle property. In this example I will change the ItemContainerStyle and will add another ItemsPanel so that the items will be rendered in WrapPanel instead of StackPanel.

The ItemContainerStyle should looks like:

           <Style TargetType="ListBoxItem" x:Name="itemstyle">
                <Setter Property="Foreground" Value="Red" />
                <Setter Property="FontWeight" Value="ExtraBold"/>
            </Style>
The ItemsPanel will be changed to :

              <ListBox.ItemsPanel>
                       <ItemsPanelTemplate>
                              <toolkit:WrapPanel />
                         </ItemsPanelTemplate>
                </ListBox.ItemsPanel>

As a result the final FullMode will looks like:

Note: The layout of the items is already WrapPanel and the foreground color is changed to Red through the ListBox ItemContainerStyl.

Here is the final screen shout of this example and a demo video. You can see three different ListPicker controls:

   

The source code is :

<Style TargetType="toolkit:ListPicker" x:Name="style">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="toolkit:ListPicker">
        ...
          </ControlTemplate>
        </Setter.Value>
       </Setter>
</Style>

<toolkit:ListPicker Grid.Row="0" x:Name="listPicker" Style="{StaticResource style}" ItemTemplate="{StaticResource PickerItemTemplate}" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"   FullModeHeader="Cities" CacheMode="BitmapCache" Header="Cities"/>

You can get the full source code here.

Hope you enjoy this article.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Customizing ListPicker for WP7 - Part2'

Title Your Name

Comment