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 中的列表选择器

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

希望对你有帮助