Многостраничные приложения в Silverlight - Страница поиска

ОГЛАВЛЕНИЕ

Страница поиска

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

<UserControl x:Class="PageSwitching.Search"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"            
    Width="500" Height="185">
<Grid
    x:Name="LayoutRoot"
    Background="#FF000000" Height="Auto">
    <Grid.RowDefinitions>
      <RowDefinition Height="0" />
      <RowDefinition Height="50*" />
      <RowDefinition Height="2*" />
      <RowDefinition Height="30*" />
      <RowDefinition Height="39*" />
      <RowDefinition Height="0" />
      <RowDefinition Height="80*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="1*" />
      <ColumnDefinition Width="4.6*" />
    </Grid.ColumnDefinitions>
    <TextBlock
      x:Name="wordPrompt" Text="The Word: "
      HorizontalAlignment="Right"
      Margin="0,12,5,0" Grid.Row="1"
      FontFamily="Verdana" FontSize="24"
      TextWrapping="Wrap" />
    <controls:AutoCompleteBox
      x:Name="myAutoComplete"
      Margin="5,9,0,9" Grid.Column="1"
      Grid.RowSpan="1" Grid.Row="1"
      HorizontalAlignment="Left"
      Height="30" Width="210"
      FontFamily="Verdana"
      FontSize="14"  />
    <TextBlock
      x:Name="minPrefix"
      Text="Minimum Prefix Length:"
      Padding="5" FontFamily="Verdana"
      Margin="0,0,25,0" Grid.Row="3"
      HorizontalAlignment="Right"
      VerticalAlignment="Bottom"
      FontSize="18" />
    <TextBlock
      x:Name="negOne"
      HorizontalAlignment="Left"
      VerticalAlignment="Bottom"
      Grid.Column="0" Grid.Row="4"
      FontFamily="Verdana"
      Text="-1"  Margin="5,0,0,0"
      FontSize="14" />
    <TextBlock x:Name="eight"
      Margin="0,0,5,0"
      HorizontalAlignment="Right"
      VerticalAlignment="Bottom"
      Grid.Column="0" Grid.Row="4"
      FontFamily="Verdana"
      Text="8" FontSize="14" />
    <TextBlock  x:Name="CurrentValue"
      Text="2" HorizontalAlignment="Right"
      VerticalAlignment="Bottom"
      Margin="0,0,3,5"  Width="20"
      Grid.Column="0"  Grid.Row="3"
      TextWrapping="Wrap"
      FontFamily="Verdana"
      Foreground="#FFF6300B"
      FontSize="18" />
    <Slider x:Name="SetPrefixLength"
      Minimum="-1" Value="2"
      Maximum="8" SmallChange="1"
      LargeChange="2" Grid.Row="4"
      Grid.Column="0"
      Margin="24,0,20,0" />
    <Border
      Height="Auto"
      x:Name="Border"
      HorizontalAlignment="Left"
      VerticalAlignment="Stretch"
      Width="500"
      Margin="0,0,0,0"
      Grid.Row="1" Grid.RowSpan="4"
      Canvas.ZIndex="-1"
      Background="#FF73B8F2" Grid.Column="0" Grid.ColumnSpan="2" />
    <TextBlock Margin="0,0,0,0" Grid.Row="6"
          Text="" TextWrapping="Wrap"  x:Name="TheWord"
          HorizontalAlignment="Center" VerticalAlignment="Center"
          FontFamily="Georgia" FontSize="48" Foreground="#FFFFFF00"/>
    <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0"
          Width="Auto" Grid.Column="1" Grid.Row="6"  x:Name="ButtonSP"
          Orientation="Horizontal">
      <StackPanel.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
          <GradientStop Color="#FF000000"/>
          <GradientStop Color="#FFF8527C" Offset="1"/>
        </LinearGradientBrush>
      </StackPanel.Background>
      <Button Height="40" x:Name="returnButton" Width="100"
          RenderTransformOrigin="0.5,0.5" Background="#FF00FF00"
          FontFamily="Georgia" FontSize="20" Content="Return"
          HorizontalAlignment="Left" VerticalAlignment="Bottom"
          Margin="5,0,0,0" Canvas.ZIndex="1"/>
    </StackPanel>
  </Grid>
</UserControl>

Ключевым моментом в Xaml является пространство имен (в самом верху файла), используемое, чтобы включить код инструментария для того, чтобы включить возможность автозаполнения (AutoCompleteBox):

xmlns:controls="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls"

Для этого вам понадобится добавить ссылку на сборку Microsoft.Windows.Controls, которая поставляется вместе с инструментарием Controls.

Search.xaml.cs

Хотя код страницы Search немного сложнее, чем тот, что мы видели в предыдущем примере, код передачи значения остался тем же. Мы предоставляем переменную экземпляра типа List<String> ,

private List<string> sortedWords = null;

И заполняем это в пределах реализации UtilizeState,

public void UtilizeState( object state )
{
   if ( state != null )
   {
     sortedWords = state as List<string>;
     myAutoComplete.ItemsSource = sortedWords;
   }
}

Обратите внимание на то, что мы также устанавливаем свойство ItemSource для AutoCompleteBox на данный список строк. Это “загружает” AutoCompleteBox словами, которые он затем предложит в качестве пользовательских типов.

Страница должна быть способна отвечать на (щелчок  по кнопке Return, а также на изменения ползунка, который устанавливает минимальную длину префикса (минимальное число букв, которые пользователь должен ввести для того, чтобы AutoCompleteBox начал рекомендовать слова).

returnButton.Click += new RoutedEventHandler( returnButton_Click );
SetPrefixLength.ValueChanged +=
  new RoutedPropertyChangedEventHandler<double>(
SetPrefixLength_ValueChanged );
myAutoComplete.MinimumPrefixLength = 2;
myAutoComplete.LostFocus += new RoutedEventHandler( myAutoComplete_LostFocus );

Мы также создали обработчик для события, которое вызывается в момент, когда AutoCompleteBox теряет фокус, таким образом мы можем получить выбранное слово и вывести его на экране в левом нижнем углу,

Рисунок 8-9. Потеря фокуса

Вот полный код Search.xaml.cs,

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
 
namespace PageSwitching
{
  public partial class Search : UserControl, ISwitchable
  {
 
    private List<string> sortedWords = null;
 
    public Search()
    {
      InitializeComponent();
      Loaded += new RoutedEventHandler( Search_Loaded );
    }
 
    public void UtilizeState( object state )
    {
      if ( state != null )
      {
        sortedWords = state as List<string>;
        myAutoComplete.ItemsSource = sortedWords;
      }
    }
 
    void Search_Loaded( object sender, RoutedEventArgs e )
    {
      returnButton.Click +=
new RoutedEventHandler( returnButton_Click );
      returnCleanButton.Click +=
           new RoutedEventHandler( returnCleanButton_Click );
      SetPrefixLength.ValueChanged +=
        new RoutedPropertyChangedEventHandler<double>
( SetPrefixLength_ValueChanged );
      myAutoComplete.MinimumPrefixLength = 2;
      myAutoComplete.LostFocus += new RoutedEventHandler
( myAutoComplete_LostFocus );
    }
 
    void returnButton_Click( object sender, RoutedEventArgs e )
    {
      Switcher.Switch( new Find());
    }
 
    void myAutoComplete_LostFocus( object sender, RoutedEventArgs e )
    {
      if ( myAutoComplete.Text != null && myAutoComplete.Text.Length > 1 )
      {
        TheWord.Text = myAutoComplete.Text;
      }
    }
 
    void SetPrefixLength_ValueChanged(
object sender,
      RoutedPropertyChangedEventArgs<double> e )
    {
      myAutoComplete.MinimumPrefixLength =
         (int) Math.Floor( SetPrefixLength.Value );
      CurrentValue.Text = myAutoComplete.MinimumPrefixLength.ToString();
    }
  }
}