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:

Expanded with dark theme:

Expanded with light theme:

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.

Answer 1

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>