ListPicker項目未以FullScreen模式顯示

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

更新您的DataTemplate：

<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更改爲以下..我只在這裏增加了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項時纔會進入FullScreen模式。如果不是，則需要手動設置ExpansionMode="FullScreenOnly"才能將其全屏顯示。