10 уроков по Silverlight 5. Урок 9

Статья
10/20/2021

Урок 9. Элементы управления

Чтобы обратиться ко мне напрямую, посетите мой блог http://michaelcrump.net/ или мой микроблог в Twitter http://twitter.com/mbcrump.

Это девятая статья из серии «10 уроков по Silverlight 5».

Сначала вспомним, что такое Silverlight.

Microsoft Silverlight — это платформа создания полнофункциональных интернет-приложений.

Среда выполнения Silverlight доступна для большинства веб-браузеров в виде подключаемого модуля и работает под управлением различных операционных систем, включая Windows, Mac и Linux.

На предыдущем уроке мы:

научились устанавливать точку останова внутри выражений привязки Silverlight 5 и узнали, как пользоваться этими возможностями в Silverlight 4, установив набор SDK для Silverlight 5;
создали пример приложения, содержащего ошибку привязки, и изучили сведения в окне выходных данных с целью дальнейшего анализа, чтобы быстро определить источник ошибки и устранить ее;
перечислили несколько средств повышения быстродействия и производительности, поддерживаемых Silverlight 5, о которых вы могли не знать.

В этой статье я расскажу о нескольких новых возможностях и элементах управления: о поддержке двойного и тройного щелчка, PivotViewer и выборе элементов списка на основании текста, вводимого в полях со списком.

Поддержка двойного и тройного щелчка

Одна из новых возможностей Silverlight 5 — поддержка двойного и тройного щелчка, позволяющая определить, сколько раз пользователь щелкнул кнопкой мыши. Соответствующее свойство называется ClickCount и находится в классе MouseButtonEventArgs. Давайте посмотрим, как пользоваться этой возможностью.

Создайте проект Silverlight 5 и присвойте ему любое имя.

Откройте файл MainPage.xaml.cs и добавьте в него следующий код. Примечание. Раздел метода MainPage() используется не во всех приложениях.

public MainPage()
    {
        InitializeComponent();
    }
     
    private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        textBlock1.Text = e.ClickCount.ToString();
    }

Откройте файл MainPage.xaml и замените содержимое раздела Grid следующим кодом.

<Grid x:Name="LayoutRoot" Background="White">
          <Border BorderBrush="Black" BorderThickness="1" Margin="52,49,68,74" CornerRadius="10">
              <TextBlock Height="152" HorizontalAlignment="Center" x:Name="textBlock1" Text="0" VerticalAlignment="Center" Width="244" MouseLeftButtonDown="textBlock1_MouseLeftButtonDown" Foreground="#FFFF2E2E" FontSize="96" TextAlignment="Center" />
          </Border>
    </Grid>

Если теперь запустить приложение, появится следующее окно.

Щелкните несколько раз внутри границы, и вы увидите, что число на экране будет увеличиваться. Если подождать несколько секунд и щелкнуть еще раз, число сбросится. Если хотите, добавьте в приложение операторы If..Then…, чтобы определить, при каком значении этого числа оно сбрасывается. Аж 35 щелчков. Шутка. :)

PivotViewer

Группа разработки Silverlight дает следующее определение: Silverlight PivotViewer предоставляет мощные, полезные и информативные средства, упрощающие обработку больших объемов данных в Интернете. Мне нечего к этому добавить. На этом уроке мы сначала создадим приложение SL5, использующее элемент управления PivotViewer и отображающее коллекцию фильмов (классический пример, правда?).

Обратите внимание, что в этом примере используется лишь малая часть возможностей PivotViewer. Для информации я добавил в конец статьи официальную ссылку корпорации Майкрософт.

Создайте проект Silverlight 5 и назовите его PivotViewer.

Откройте файл MainPage.xaml.cs и добавьте в него следующий код.

using System;
    using System.Linq;
    using System.Windows;
    using System.Windows.Controls;
    using System.Collections.ObjectModel;
     
    namespace PivotViewer
    {
        public partial class MainPage : UserControl
       {
           private ObservableCollection<Movie> Movies;
    
           public MainPage()
           {
               InitializeComponent();
               Movies = new ObservableCollection<Movie>();
               for (Int64 i = 0; i < 500; i++)
               {
                   Movies.Add(new Movie() { Title = "Ice Age" + i.ToString(), CountryOfOrigin = "USA", Description = "Set during the Ice Age.", Director = "Chris Wedge" + i.ToString(), Duration = 90, ReleaseDate = new DateTime(2002, 09, 03) });
       
               }
            }
    
           private void UserControl_Loaded(object sender, RoutedEventArgs e)
           {
               MoviePivot.ItemsSource = Movies;
           }
       }
   }

Создайте класс с именем Movie, который должен выглядеть примерно так.

using System;
     
    namespace PivotViewer
    {
        public class Movie
        {
            public string Title { get; set; }
            public int Duration { get; set; }
            public DateTime ReleaseDate{ get; set; }
            public string CountryOfOrigin { get; set; }
            public string Description { get; set; }
            public string Director { get; set; }
        }
   }

Откройте файл MainPage.xaml и замените его содержимое следующим кодом.

<UserControl x:Class="PivotViewer.MainPage"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
        Loaded="UserControl_Loaded"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
       <Grid x:Name="LayoutRoot" Background="White">
           <pivot:PivotViewer x:Name="MoviePivot"
                               AccentColor="LightGreen"
                               Background="LightGray"
                               ControlBackground="LightYellow"
                               SecondaryBackground="AntiqueWhite"
                               SecondaryForeground="Bisque"
                               SecondaryItemValueBackgroundColor="Chocolate" >
    
               <!--Setting PivotProperties-->
               <pivot:PivotViewer.PivotProperties>
                   <pivot:PivotViewerStringProperty Id="FTitle" Options="CanFilter" DisplayName="Title" Binding="{Binding Title}" />
                   <pivot:PivotViewerStringProperty Id="FDuration" Options="CanFilter" DisplayName="Duration" Binding="{Binding Duration}" />
                   <pivot:PivotViewerStringProperty Id="FDirector" Options="CanFilter" DisplayName="Director" Binding="{Binding Director}" />
    
               </pivot:PivotViewer.PivotProperties>
    
               <!--Setting data-->
               <pivot:PivotViewer.ItemTemplates>
                   <pivot:PivotViewerItemTemplate>
                       <Border Width="200" Height="200" Background="CadetBlue">
                           <StackPanel Orientation="Vertical">
    
                               <StackPanel Orientation="Horizontal">
                                   <TextBlock Text="{Binding Title}" FontSize="16" Foreground="White" />
                                   <TextBlock Text="(" FontSize="16" Foreground="White" />
                                   <TextBlock Text="{Binding Duration}" FontSize="16" Foreground="White" />
                                   <TextBlock Text=")" FontSize="16" Foreground="White" />
                               </StackPanel>
                               <TextBlock Text="{Binding Director}" FontSize="16" Foreground="White" />
                               <TextBlock Text="{Binding CountryOfOrigin}" FontSize="16" Foreground="White" />
                           </StackPanel>
                       </Border>
                   </pivot:PivotViewerItemTemplate>
               </pivot:PivotViewer.ItemTemplates>
           </pivot:PivotViewer>
       </Grid>
   </UserControl>

Если теперь запустить приложение и выбрать несколько элементов, появится следующее окно. Как видим, загруженное приложение содержит больше 500 элементов. Вот так вот!

Я рассмотрел лишь малую часть возможностей PivotViewer. Дополнительные сведения см. на сайте Silverlight.

Выбор элементов списка на основании текста, вводимого в полях со списком

Еще одна новая возможность Silverlight 5, значительно упрощающая поиск нужных элементов в больших списках, — это функция выбора элементов списка на основании текста, вводимого в полях со списком. Давайте создадим простое приложение.

Создайте проект Silverlight 5 и присвойте ему любое имя.

Откройте файл MainPage.xaml.cs и добавьте в него следующий код.

public MainPage()
    {
        InitializeComponent();
         var lstDevelopers = new List<string>
               { "Michael Crump",
                  "Pete Brown",
                 "Victor G.",
                  "Scott Hanselman",
                  "Jesse Liberty",
                 "Shawn Wildermuth",
                 "Scott Gu",
                 "Joel Cochran",
                 "Kunal Chowdhurry" };
               cbDevelopers.ItemsSource = lstDevelopers;
   }

Откройте файл MainPage.xaml и замените содержимое раздела Grid следующим кодом.

<Grid x:Name="LayoutRoot" Background="White">
           <ComboBox x:Name="cbDevelopers" Height="40" Width="150" Margin="20" />
    </Grid>

Если запустить получившееся приложение и начать вводить текст, элемент управления ComboBox автоматически выделит строки, соответствующие вводимому тексту.

Заключение

На этом уроке мы научились использовать поддержку двойного и тройного щелчка и PivotViewer и выбирать элементы списка на основании текста, вводимого в полях со списком. На следующем (заключительном) уроке я расскажу о нескольких новых возможностях Silverlight 5: о поддержке HTML в браузере, использовании PostScript и задачах для библиотеки TPL. Еще раз спасибо за внимание. Встретимся на следующем уроке.

Чтобы обратиться ко мне напрямую, посетите мой блог http://michaelcrump.net/ или мой микроблог в Twitter http://twitter.com/mbcrump.

Перевод статей от Michael Crump.

Дополнительные ресурсы