How To Set Height of Selected Item in Silverlight ListPicker in Windows Phone

Question

I need to reduce the amount of space that a listpicker takes up on the screen of the phone after the user has made a choice. I can reduce the width of the selected item but I haven't found a way to reduce the height. Yes, I can reduce the size of the control but the header always takes up 35 units and the panel the selected item takes has a height of 70. Reducing the height of the listpicker makes it look smaller but this just blacks out the bottom portion of the panel the selected item shows in. The text is still centered. Setting the VerticalContentAlignment doesn't help, and so the text is gradually obscured as the height is reduced. Is there a way to reduce the height of the panel that the selected item shows up in -- or to shift the alignment of the selected text to the top of the panel and then blank out the bottom part that isn't showing any text?

Answer 1

This is something that can be easily done by creating a template in Expression Blend --

1. Open your project in Expression Blend.
2. Navigate to your Page with the ListPicker.
3. In the Objects and Timeline box, find your ListPicker.
4. Right Click, choose Edit Template -> Edit a Copy -> Enter a name to use chose Define in -> Application, and hit OK.
5. Click on Grid in the Object and Timeline box. In the Properties box, enter a new Height. I used 36.
6. Expand Border
7. Click on UserControl.
8. In the Properties Window, change the Font size from 19 pt to a small size (12 pt)
9. Now that you created the template, you need to apply it to all of your listpickers like so:

<toolkit:ListPicker Style="{StaticResource ListPickerStyle1}"/>

Here's the source.

    <Style x:Key="ListPickerStyle1" TargetType="toolkit:ListPicker">
                <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
                <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
                <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
                <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
                <Setter Property="PickerPageUri" Value="/Microsoft.Phone.Controls.Toolkit;component/ListPicker/ListPickerPage.xaml"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="toolkit:ListPicker">
                            <StackPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="PickerStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Highlighted">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundColor}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="UserControl">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{StaticResource PhoneSubtleBrush}" FontSize="{StaticResource PhoneFontSizeNormal}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0 0 0 8"/>
                                <Grid Height="36">
                                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                        <UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" FontSize="16">
                                            <StackPanel>
                                                <TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8"/>
                                                <Canvas x:Name="ItemsPresenterHost" MinHeight="46">
                                                    <ItemsPresenter x:Name="ItemsPresenter">
                                                        <ItemsPresenter.RenderTransform>
                                                            <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                                        </ItemsPresenter.RenderTransform>
                                                    </ItemsPresenter>
                                                </Canvas>
                                            </StackPanel>
                                        </UserControl>
                                    </Border>
                                </Grid>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>