ListPicker 项目未在全屏模式下显示

Question

我使用了一个 TOOLKIT ListPicker 。但是这些项目没有以全屏模式显示。单击 ListPicker 时它是一个空白页面，但这些项目是透明的，甚至可以被选中。它似乎是空白页，但项目在那里。

<phone:PhoneApplicationPage
x:Class="Sunder_Gutka.SettingPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<phone:PhoneApplicationPage.Resources>

    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding BackGroundColorArray}" />
    </DataTemplate>

    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" 

    Text="{Binding BackGroundColorArray}"                      
                   />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>



<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        <toolkit:ListPicker x:Name="BackgroundColor"  FullModeHeader="Select Background Color:" Header="Background Color:" BorderThickness="0" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" ItemTemplate="{StaticResource PickerItemTemplate}" Background="#FF09043C" SelectionChanged="BackgroundColor_SelectionChanged" >

        </toolkit:ListPicker>



    </Grid>
</Grid>

---

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace Sunder_Gutka
{
    public partial class SettingPage : PhoneApplicationPage
    {
        String[] BackGroundColorArray = { "Black", "Light Grey", "White[Default]", "Blue", "Green", "Saffron", "Yellow", "Magenta", "Dark Grey", "Red" }; //To be used in LISTPICKER

        public SettingPage()
        {
            InitializeComponent();
            this.BackgroundColor.ItemsSource = BackGroundColorArray; //Item Source  of listpicker

        }
        string SelectedBackgroundColor;

        private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
             SelectedBackgroundColor = BackgroundColor.SelectedItem.ToString();
        }

    }

Answer 1

更新您的数据模板：

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding}" />
    </DataTemplate>
    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" Text="{Binding}"/>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

它现在正在工作。我已经实现了。

Answer 2

默认情况下，当您以全屏模式显示项目时，您的项目以较小的字体显示。所以你要做的就是把全屏模式ItemTempate的DataTampleate改成following..我这里只增加了FontSize..你可以做任何你喜欢的样式。

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding}" />
    </DataTemplate>

    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" Text="{Binding}" FontSize="{StaticResource PhoneFontSizeLarge}" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

模板的样式由您决定。我也希望你知道ListPicker 只有在ListPicker 中有超过 5 个项目时才会进入全屏模式。如果没有，您需要手动设置ExpansionMode="FullScreenOnly" 以使其全屏显示。