扩展+光主题时的ListPicker背景

Question

当我将设备主题切换为光线时，我的ListPicker看起来很难看。从下面的屏幕截图中可以看出，它看起来很好，有一个深色主题，但它看起来是透明的，带有光主题。

开始：

以黑暗主题扩展：

以轻主题扩展：

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>