ListPicker FullScreen mode Background problem: workaround

by WindowsPhoneGeek

Today we receive several questions about a possible bug in the Silverlight for Windows Phone Toolkit ListPicker control that caused regection of their apps.

Here is the problem in short: Currently setting the Background property of the ListPicker does not reflect the background color in the FullScreen mode. If you switch between different phone themes sometimes the ListPicker seems like transparent.

Here is the Question : How to change the background color of the ListPicker  FullScreen mode?

Here is the answer: 

All you need to do is just to make some changes into the ListPicker style(note that you will need the full style with the ControlTemplate and VisualStates). We will give two options.

Option1: Basically you have to change the Expanded Visual state in this way:

<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
    <!--<DiscreteObjectKeyFrame
    Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
    KeyTime="0"/>-->
    <DiscreteObjectKeyFrame KeyTime="0">
        <DiscreteObjectKeyFrame.Value>
            <SolidColorBrush Color="YellowGreen"/>
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>

Option 2: You can comment the part of the Expanded VisualState that changes the Background of the border: 

<!--<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
    <DiscreteObjectKeyFrame
    Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
    KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>-->

Here is the full source code. 

<Style TargetType="toolkit:ListPicker" x:Key="customStyle">
        <!--<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="{StaticResource PhoneTextBoxEditBorderBrush}"
                                            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="{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}">
                                    <!-- Popup.Child should always be a Border -->
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <ContentControl
                                        Grid.Row="0"
                                        Content="{TemplateBinding FullModeHeader}"
                                        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}">
                                            <ListBox.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel/>
                                                    <!-- Ensures all containers will be available during the Loaded event -->
                                                </ItemsPanelTemplate>
                                            </ListBox.ItemsPanel>
                                        </ListBox>
                                    </Grid>
                                </Border>
                            </Popup>
                        </Grid>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</phone:PhoneApplicationPage.Resources>

Here you can download the full source code.

You can also follow us on Twitter @winphonegeek

Comments

    <DataTemplate x:Name="CustomHeaderTemplate ">
                    <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                        <TextBlock Text="language: "/>
                        <TextBlock Text="{Binding Language}" Foreground="Green"/>
                    </StackPanel>
                </DataTemplate>

<toolkit:ListPicker x:Name="listPicker" ItemTemplate="{StaticResource PickerItemTemplate}"
      HeaderTemplate ="{StaticResource CustomHeaderTemplate }"   />