展开时的 ListPicker 背景 + 浅色主题

Question

当我将设备主题切换为 light 时，我无法让我的 ListPicker 看起来正确。从下面的屏幕截图中可以看出，dark 主题看起来不错，但 light 主题看起来透明。

开始：

用深色主题扩展：

用浅色主题扩展：

This question 看起来很有希望，但它似乎只适用于FullScreenMode。另外，在答案链接到的 this article 中，描述了更新 Expanded 视觉状态，当我在 Blend 中打开我的页面并编辑模板的副本时，它似乎不存在.这是我的 XAML，非常简单：

<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>

另外，在代码隐藏中，我有这段代码，它强制顶部 ListPicker 在展开时位于底部的顶部：

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

有没有办法解决我上面遇到的背景颜色问题？更改Background 属性只会更改未展开视图的背景颜色。

Answer 1

使用StackPanel 代替Grid 控件并在其他控件上指定Margin 以设置它们之间的间距。

类似这样的：

<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>