ListPicker项未在全屏模式下显示

本文关键字：模式 显示 ListPicker | 更新日期: 2023-09-27 18:20:41

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

ListPicker项未在全屏模式下显示

更新您的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>

它现在起作用了。我已经实现了这一点。

默认情况下，当您在全屏模式下显示项目时，您的项目将以较小的字体显示。因此，您要做的是将全屏模式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中的项目超过5个时，ListPicker才会进入全屏模式。如果没有，您需要手动设置ExpansionMode="FullScreenOnly"以使其全屏显示。

相关文章：