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

Answer 1

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.