CODEWITHSUNDEEP
windows-phone-8windows-phonelistpicker
Alaa Masoud
Alaa Masoud

Reputation: 7135

WP8 ListPicker expanded mode background

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

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

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

Upvotes: 1

Views: 2856

Answers (1)

Neil Turner
Neil Turner

Reputation: 2727

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.

Upvotes: 2

Related Questions