ListPicker background when expanded + light theme

Question

I'm having some trouble getting my ListPicker to look right when I switch my device theme to light. As you can see from the screenshots below, it looks fine with a dark theme, but it appears transparent with a light theme.

Start:

enter image description here

Expanded with dark theme:

enter image description here

Expanded with light theme:

enter image description here

This question seemed promising, but it appears to only apply to the FullScreenMode. Plus, in this article, which the answer links to, describes updating the Expanded Visual State, which doesn't seem to exist when I open my page in Blend and edit a copy of the template. Here is my XAML which is very simple:

<Grid x:Name="OptionsGrid" Grid.Row="1">
   <Grid.RowDefinitions>
      <RowDefinition Height=".05*" />
      <RowDefinition Height=".15*" />
      <RowDefinition Height=".05*" />
      <RowDefinition Height=".15*" />
      <RowDefinition Height=".13*" />
      <RowDefinition Height=".15*" />
      <RowDefinition Height=".15*" />
   </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>
      <ColumnDefinition Width=".15*" />
      <ColumnDefinition Width=".1*" />
      <ColumnDefinition Width=".40*" />
      <ColumnDefinition Width=".1*" />
      <ColumnDefinition Width=".15*" />
   </Grid.ColumnDefinitions>

   <TextBlock Text="Test 1: " FontSize="20" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" />

   <toolkit:ListPicker x:Name="lpTest1" Grid.Row="1" Grid.RowSpan="4" Grid.Column="1" Grid.ColumnSpan="3">
      <toolkit:ListPicker.Items>
         <toolkit:ListPickerItem Content="Value 1"/>
         <toolkit:ListPickerItem Content="Value 2"/>
         <toolkit:ListPickerItem Content="Value 3"/>
         <toolkit:ListPickerItem Content="Value 4"/>
      </toolkit:ListPicker.Items>
   </toolkit:ListPicker>

   <TextBlock Text="Test 2: " FontSize="20" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="3"/>

   <toolkit:ListPicker x:Name="lpTest2" Grid.Row="3" Grid.RowSpan="4" Grid.Column="1" Grid.ColumnSpan="3">
      <toolkit:ListPicker.Items>
         <toolkit:ListPickerItem Content="Value 5" />
         <toolkit:ListPickerItem Content="Value 6" />
         <toolkit:ListPickerItem Content="Value 7" />
         <toolkit:ListPickerItem Content="Value 8" />
      </toolkit:ListPicker.Items>
   </toolkit:ListPicker>
</Grid>

Also, in the code-behind, I've got this code which forces the top ListPicker to be on on top of the bottom one when expanded:

lpTest1.SetValue(Canvas.ZIndexProperty, 2);
lpTest2.SetValue(Canvas.ZIndexProperty, 1);

Is there a way around the background color issue I'm experiencing above? Changing the Background property only changes the background color of the non-expanded view.

The white color in both themes is the default behavior for Windows Phone, my question goes to why are you changing the ZIndexProperty of the controls? You should leave the ZIndex to the system to manage... — Pedro Lamas
If I remove my z index code, the bottom listpicker is visible through the top one when the top one is expanded (dark theme). That was the only workaround I could find. — lhan
Also, is what you see in screenshot #3 default behavior? It doesn't seem like the control should be transparent... — lhan

Pedro Lamas Pedro Lamas · Accepted Answer · 2013-03-24T12:14:32

Use a StackPanel instead of the Grid control and specify Margin on the other controls to set spacing between them.

Something like this:

<StackPanel>
    <TextBlock Text="Test 1: " FontSize="20" Margin="12,0" />

    <toolkit:ListPicker x:Name="lpTest1" Margin="12,0">
      <toolkit:ListPicker.Items>
         <toolkit:ListPickerItem Content="Value 1"/>
         <toolkit:ListPickerItem Content="Value 2"/>
         <toolkit:ListPickerItem Content="Value 3"/>
         <toolkit:ListPickerItem Content="Value 4"/>
      </toolkit:ListPicker.Items>
    </toolkit:ListPicker>

    <TextBlock Text="Test 2: " Margin="12,0" />

    <toolkit:ListPicker x:Name="lpTest2" Margin="12,0">
      <toolkit:ListPicker.Items>
         <toolkit:ListPickerItem Content="Value 5" />
         <toolkit:ListPickerItem Content="Value 6" />
         <toolkit:ListPickerItem Content="Value 7" />
         <toolkit:ListPickerItem Content="Value 8" />
      </toolkit:ListPicker.Items>
    </toolkit:ListPicker>
</StackPanel>

ListPicker background when expanded + light theme

1 Answers