擴展到完整模式時更改 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>

如何將列表選擇器的標題和項目的背景顏色更改為我想要的任何顏色？

Answer 1

將rootGrid Background更改為您的顏色

<toolkit:ListPicker.FullModeItemTemplate>
                    <DataTemplate>
                        <Grid x:name="rootGrid" Margin="0" Background="Your color">
                            <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>

希望這可以幫助你

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>