WP8 ListPicker expanded mode background

Question

When the device theme is set to dark, the ListPicker control have the following:

Normal mode - background is transparent.
Expanded mode - background is white.

When the device theme is set to light, the ListPicker control have the following:

Normal mode - background is transparent.
Expanded mode - background is transparent.

I am using an image + text in the items collection of the listpicker. It works fine if the theme is set to light. However, when the theme is set to dark the image shows in normal mode but is invisible in expanded mode. Any ideas of a workaround for this?

See images below

Light theme - normal mode Light theme - expanded mode Dark theme - normal mode Dark theme - expanded mode

It seems your Image color also changing with the Phone theme.In Dark theme your image color is Black & In Light theme Image color is White. So that In Dark Theme Image is not displaying even your image is still there.Can you check with your Image? How it's color changing with the Phone Theme ? — asitis
Yes, the image is wrapped in a Rectangle with the Fill property set to PhoneContrastBackgroundBrush and the OpacityMask property set to the image so that the same image can be used in both themes. — Alaa Masoud
You may have to customise the style for the ListPicker control, try this tutorial — Neil Turner
@NeilTurner Yea I already did that however the only way I found this to work was to remove a couple of object animation from the Highlighted visual state of the ListPicker. Unfortunately, in that case the expanded mode will be transparent in the dark theme which is not consistent with the normal behavior of WP8 listpickers — Alaa Masoud
In the Highlighted visual state, I changed the Background to PhoneBackgroundColor - is the image still not visible in this case or is it not the desired look you want? — Neil Turner

Neil Turner Neil Turner · Accepted Answer · 2013-03-20T16:55:21

I have two suggestions which are quick and don't require heavy modification to the ListPicker control...

1) Use the phone's accent colour as an OpacityMask with the image...

<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="40" Width="40">
            <Rectangle.OpacityMask>
                <ImageBrush ImageSource="{Binding Icon}" />
            </Rectangle.OpacityMask>
        </Rectangle>
        <TextBlock Text="{Binding Name}" />
    </StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>

If the icon uses the accent colour, it will be visible on either a black or white background.

2) Change the background colour of the ListPicker's highlighted state so that it's white when using the Light theme (default) and black when using the Dark theme (different from the default). I also changed the Foreground colour.

<ObjectAnimationUsingKeyFrames
    Storyboard.TargetName="UserControl"
    Storyboard.TargetProperty="Foreground"
    Duration="0">
<DiscreteObjectKeyFrame
    Value="{StaticResource PhoneForegroundBrush}"
    KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
    Storyboard.TargetName="Border"
    Storyboard.TargetProperty="Background"
    Duration="0">
<DiscreteObjectKeyFrame
    Value="{StaticResource PhoneBackgroundColor}"
    KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>

Changing a control's theme like this should not cause submission problems as long as the control is a) still usable and b) works on Dark and Light themes.

WP8 ListPicker expanded mode background

1 Answers