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

时间:2014-09-04 11:02:44

标签: c# xaml windows-phone-8 toolkit listpicker

我使用了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();
        }

    }

2 个答案:

答案 0 :(得分: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>

现在正在工作。我已经实现了这一点。

答案 1 :(得分:0)

默认情况下,当您在全屏模式下显示项目时,您的项目将以较小的字体显示。所以你需要做的是将FullScreen模式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个项目时才会进入全屏模式。如果不是,您需要手动设置ExpansionMode="FullScreenOnly"以全屏显示。