Why does WP7 ListPicker have different margins and height to TextBox

Question

I have a page in my WP7 app consisting of a TextBox beside a ListPicker. In their default modes, they don't line up properly; the ListPicker has a different padding to the TextBox, and its height is also different.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel Orientation="Horizontal">
        <TextBox HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/> 
        <toolkit:ListPicker Width="170" ItemsSource="{Binding l}" Style="{StaticResource ListPickerStyle1}" VerticalAlignment="Top"/>
    </StackPanel>
</Grid>

Manually tweaking the ListPicker's template to fit in correctly here is tricky and error prone. For example, when its height is adjusted, the caption (i.e. the text of the selected item) is no longer in the centre of the component.

My app is currently failing MS app review because the components are not all the same height.

Is there an easy way for me to set the toolkit:ListPicker to have the same appearance as a TextBox?

Answer 1

The simplest solution will be to take a copy of the the default style and tweak that using Blend to be exactly how you want it to look. This will take a little trial and error to sort out.

You can then use the implicit styling rules to apply it to all ListPickers without having to explicitly set the style on each instance:

<Style x:Key="MyListPickerStyle
       TargetType="toolkit:ListPicker>
    .... your tweaks here
</Style>

<Style TargetType="toolkit:ListPicker"
       BasedOn="{StaticResource MyListPickerStyle}" />

It may be easier to tweak the TextBox Style of course :)