在扩展到完整模式时更改WP8 ListPicker背景颜色

Question

我在下面使用更改为完整模式时更改ListPicker的背景颜色。但我只看到黑屏。

<Style TargetType="toolkit:ListPicker" x:Key="customStyle">
                <Setter Property="Background" Value="YellowGreen"/>
                <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
                <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 FullModeItemTemplate}"
                                            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>

XAML中的ListPicker

<toolkit:ListPicker Header="SELECT TRANSLATION" x:Name="lspTranslationLang" Style="{StaticResource customStyle}"
                                        SelectedItem="{Binding Name, Mode=TwoWay}" SelectionChanged="lspTranslationLang_SelectionChanged">
                            <toolkit:ListPicker.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock FontWeight="Bold" Foreground="Black" Text="Select Translation"></TextBlock>
                                    </StackPanel>
                                </DataTemplate>
                            </toolkit:ListPicker.HeaderTemplate>
                            <toolkit:ListPicker.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock FontSize="30" Text="{Binding Language}" />
                                    </StackPanel>
                                </DataTemplate>
                            </toolkit:ListPicker.ItemTemplate>
                            <toolkit:ListPicker.FullModeItemTemplate>
                                <DataTemplate>
                                    <Grid Margin="0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"></RowDefinition>
                                            <RowDefinition Height="*"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                                            <ColumnDefinition Width="*"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <Image Grid.Row="0" Margin="10,0,0,0" Width="30" Height="30" Grid.Column="0" Source="{Binding ImagePath}" ></Image>
                                        <TextBlock Grid.Row="0" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Language}" FontSize="30"/>
                                        <TextBlock Grid.Row="1" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Description}" FontSize="30"/>

                                        <Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
                                    </Grid>
                                </DataTemplate>
                            </toolkit:ListPicker.FullModeItemTemplate>
                        </toolkit:ListPicker>

如何将listpicker的标题和项目的背景颜色更改为我想要的任何颜色？

Answer 1

将Background的{​​{1}}更改为您的颜色

rootGrid

希望这可以帮到你

Answer 2

要更改ItemTemplate的背景，您需要在DataTemplate

中设置网格的背景颜色

<toolkit:ListPicker.FullModeItemTemplate>
                                <DataTemplate>
                                    <Grid Background="Color Value">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"></RowDefinition>
                                            <RowDefinition Height="*"></RowDefinition>
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"></ColumnDefinition>
                                            <ColumnDefinition Width="*"></ColumnDefinition>
                                        </Grid.ColumnDefinitions>
                                        <Image Grid.Row="0" Margin="10,0,0,0" Width="30" Height="30" Grid.Column="0" Source="{Binding ImagePath}" ></Image>
                                        <TextBlock Grid.Row="0" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Language}" FontSize="30"/>
                                        <TextBlock Grid.Row="1" Padding="10,0,10,0" Grid.Column="1" Text="{Binding Description}" FontSize="30"/>
                                        <Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
                                    </Grid>
                                </DataTemplate>
                            </toolkit:ListPicker.FullModeItemTemplate>