Windows Phone Toolkit ListPicker background is White

Question

I have a Windows Phone 8 app. My app uses the ListPicker from the Toolkit. My app appears just fine. However, when I expand the ListPicker, the background is White. I can't read any of the items' text. When the ListPicker is collapsed, I can read the selected item's text just fine. Here is my code:

<Grid x:Name="myGrid" Background="Black" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />                    
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Grid.RenderTransform>
    <TranslateTransform x:Name="myGridTransform" />
  </Grid.RenderTransform>

  <Grid Background="Silver" VerticalAlignment="Stretch">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <TextBlock Text="app name" Margin="24,6,0,0" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Left" Style="{StaticResource PhoneTextSmallStyle}" />
    <TextBlock Text="PAGE" Margin="24,0,0,6" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" Style="{StaticResource PhoneTextLargeStyle}" />
  </Grid>

  <ScrollViewer Grid.Row="1" Margin="8,0,8,0">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <TextBlock HorizontalAlignment="Left" Grid.Row="0" TextWrapping="Wrap" Text="Group" VerticalAlignment="Top" Style="{StaticResource PhoneTextGroupHeaderStyle}" Margin="12,12,12,0" />
      <TextBlock HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" Text="label" VerticalAlignment="Top" Style="{StaticResource PhoneTextLargeStyle}"/>
      <toolkit:ListPicker x:Name="myListPicker" Grid.Row="2" Margin="12,-6,12,-2" Background="Transparent" Loaded="myListPicker_Loaded">
        <toolkit:ListPicker.Items>
          <toolkit:ListPickerItem Tag="1" Content="Option 1" />
          <toolkit:ListPickerItem Tag="2" Content="Option 2" />
        </toolkit:ListPicker.Items>
      </toolkit:ListPicker>
      <TextBlock HorizontalAlignment="Left" Grid.Row="3" Margin="12,0,12,8" TextWrapping="Wrap" Text="other details." VerticalAlignment="Top" Style="{StaticResource PhoneTextSmallStyle}" />
    </Grid>
  </ScrollViewer>
</Grid>

What am I doing wrong?

Answer 1

i think that is because your device or emulator under light theme

try updating the Expanded Visual State background

Answer 2

Instead of using the attribute Content, add the text of the ListPickerItem in the tag itself usinf . Like this:

<toolkit:ListPicker x:Name="myListPicker">
    <sys:String>Option 1</sys:String>
    <sys:String>Option 2</sys:String>
</toolkit:ListPicker>

Answer 3

I faced this problem with ListBox where the background used to go black on increasing the height of ListBox. The problem lies with the parent container. Somehow Grid's children don't abide by the background color when the context exceeds a particular height. Try replacing Grid with StackPanel as your parent container and set the background color of every child to your desired color. Should work.