How to change background color of Windows Phone Listpicker in FullScreen Mode - xaml

Question

This question has been asked before but the answers provided have not worked for myself and others. The style for the listpicker is provided by I haven't been able to get the background of the Listpicker to change color (in this case yellow) despite trying every property I can think of to get it to change. What is wrong with the code?
<Style TargetType="toolkit:ListPicker" x:Key="ListPickerStyle1">
<!--<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>-->
<!--<Setter Property="Background" Value="YellowGreen"/>-->
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Margin" Value="{StaticResource PhoneTouchTargetOverhang}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Expanded">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" Duration="0"> <DiscreteObjectKeyFrame Value="{StaticResource PhoneTextBoxEditBackgroundColor}" KeyTime="0"/> </ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<DiscreteObjectKeyFrame Value="Yellow" KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness" Duration="0">
<DiscreteObjectKeyFrame Value="200" KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}" FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0 0 0 8"/>
<Grid>
<!--<Border x:Name="Border" Background="Yellow" BorderBrush="{TemplateBinding Background}" BorderThickness="2">-->
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding Background}" BorderThickness="2">
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</Border>
<Popup x:Name="FullModePopup">
<!--<Border Background="{StaticResource PhoneChromeBrush}">-->
<Border Background="Yellow" BorderThickness="200">
<!-- Popup.Child should always be a Border -->
<Grid Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl Grid.Row="0" Content="{TemplateBinding FullModeHeader}" Background="Yellow"
Foreground="{StaticResource PhoneForegroundBrush}"
FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}"
HorizontalAlignment="Left" Margin="24 12 0 0"/>
<ListBox x:Name="FullModeSelector" Grid.Row="1" ItemTemplate="{TemplateBinding ActualFullModeItemTemplate}"
FontSize="{TemplateBinding FontSize}" Margin="{StaticResource PhoneMargin}" Background="Yellow">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="Yellow"/>
<!-- Ensures all containers will be available during the Loaded event -->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Border>
</Popup>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

I did this by creating an interface to represent ListPickerPage, and changing any code references in the Toolkit to use the interface (IListPickerPage) instead.
Then, I just created a new PhoneApplicationPage, and copied & slightly modified the source (xaml & xaml.cs), (I made it implement IListPickerPage)
using System.Collections;
using System.Windows;
using System.Windows.Controls;
namespace Microsoft.Phone.Controls
{
public interface IListPickerPage
{
string HeaderText { get; set; }
IList Items { get; }
SelectionMode SelectionMode { get; set; }
object SelectedItem { get; set; }
IList SelectedItems { get; }
DataTemplate FullModeItemTemplate { get; set; }
bool IsOpen { get; set; }
}
}
and then, when you want to use it, you just specify your own page instead, by setting the PickerPageUri
<toolkit:ListPicker x:Name="lpStr"
Grid.RowSpan="2"
Width="1"
Height="1"
CacheMode="BitmapCache"
ExpansionMode="FullScreenOnly"
Foreground="Black"
FullModeItemTemplate="{StaticResource ListPickerStringLargeTemplate}"
IsHitTestVisible="False"
Opacity="0"
PickerPageUri="/Views/Globals/ToolkitPages/MyListPickerPage.xaml" />
</Grid>
The rest is simply customizing your own ListPickerPage xaml file to fit your requirements.