c# - 扩展至完整模式时更改 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 的背景更改为您的颜色

<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>

希望对你有帮助