Irenicatech / archive
Microsoft

Listpicker в Windows Phone 7

Windows Phone 7 — это современная мобильная операционная система от Microsoft. Особенностью данной ОС является наличие нового ядра Windows CE, новый уровень API и GUI. GUI Windows Phone 7 требует написание приложений на SilverLight/XNA. В данной статье я расскажу Вам о применении контрола Listpicker для создания максимально удобных приложений под Windows Phone 7.

ListPicker это один из контролов в Silverlight Toolkit для Windows Phone 7. Он предназначен для выбора какого-либо пункта из списка. Данный элемент очень похож на Combobox, но имеет значительно больше возможностей, чем ComboBox. Например, если необходимо отобразить список небольшой длины, то ListPicker покажет данные в виде Combobox-а (описывается свойством ItemTemplate и используется в тот момент, когда отображается один выбранный элемент из списка, т.е. контрол не активен), а если необходимо отобразить большее число позиции списка, то Listpicker покажет данные в виде ListBox-а (задается параметром FullModelItemTemplate и используется при выборе пользователя из всего списка, т.е. когда контрол ListPicker активен). Выбор формы отображения происходит автоматически. Именно поэтому, данный элемент управления очень удобно использовать. Преобразовать использованные в уже написанных приложениях ListBox-ы в ListPicker-ы очень легко — достаточно просто заменить название контрола в xaml файле с ListBox на ListPicker.

Создадим простое приложение на Microsoft Silverlight.
Для этого запускаем среду разработки и создаем новый проект Windows Phone Application Project.

Далее щелкните правой кнопкой мыши на References -> выберите Add Refrences -> и выберите Microsoft.Phone.Controls.Toolkit:

Затем, выбираем MainPage.xaml и происходит построение интерфейса пользователя, но для использования Microsoft.Phone.Controls.Toolkit необходимо после этого в нем объявлить

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Теперь добавим несколько контролов на главную страницу: TextBlock, TextBox и ListPicker:

Для использования ListPicker мы должны определить ItemTemplate и FullModeItemTemplate:

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

Полный код XAML:

<phone:PhoneApplicationPage
    x:Class="ListPickerDemo.MainPage"
    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"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    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"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Name="lpkItemTemplate">
            <TextBlock Text="{Binding Country}" />
        </DataTemplate>
        <DataTemplate x:Name="lpkFullItemTemplate">
           <TextBlock Text="{Binding Country}" />
        </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 x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="ListPicker" 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">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Name" Margin="14,0,0,0"/>
            <TextBox Grid.Row="1" Name="txtName"/>
            <TextBlock Text="Ages " Grid.Row="2" Margin="14,0,0,0"/>
            <TextBox Name="txtAge" Grid.Row="3"/>
            <TextBlock Text="Country" Grid.Row="4" Margin="14,0,0,0" />
            <toolkit:ListPicker FullModeItemTemplate="{Binding lpkFullItemTemplate}"
                Grid.Row="5" ItemTemplate="{Binding lpkItemTemplate}"
                x:Name="lpkCountry"/>
            <Button Content="Submit" Grid.Row="5" Height="72" HorizontalAlignment="Left" Margin="284,87,0,0" Name="btnSubmit" Click="btnSubmit_Click"
             VerticalAlignment="Top" Width="160" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Затем переходим к MainPage.xaml.cs и задаем массив строк в качестве примера данных, а также добавляем для ListPicker свойства ItemSource:

C # код:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace ListPickerDemo
{
    public partial class MainPage : PhoneApplicationPage
    {
        String[] Country = { "Viet Nam","Japan",
                              "China","USA",
                              "Poland","Brazil",
                         "Singapore","Philipin","Malaysia"};
        public MainPage()
        {
            InitializeComponent();
            this.lpkCountry.ItemsSource = Country;
        }
        private void btnSubmit_Click(object sender, RoutedEventArgs e)
        {
            String _Content = String.Format("Name: {0} nAges: {1}nCountry: {2}", txtName.Text,txtAge.Text,lpkCountry.SelectedItem);
            MessageBox.Show(_Content);
        }
    }
}

Теперь мы запускаем приложение для просмотра результата:

Если у вас небольшое число стран:

И если у вас длинный список стран (будет работать FullModeItemTamplate):

И после подтверждения формы:

Данный контрол очень удобен для использования практически во всех приложениях: для создания рубрицированного каталога книг электронной библиотеки, библиотеки аудиоплеера, для удобства заполнения форм регистрации и так далее. Применение ListPicker-а, несомненно, делает интерфейс приложения более удобным для пользователя и снижает время, затрачиваемое на выбор параметров. Простота применения и модификации позволяют использовать данный контрод программисту любого уровня — от новичка до профессионала.