検索結果インターフェイスの作成
xamWebDialogWindowとxamWebTileViewを使った
検索結果表示ウィンドウ
検索サービスを呼び出したら今度はサービスより返されるデータを処理し、表示することが必要です。今回はxamWebTileViewコントロールとxamWebDialogWindowを併用して検索結果を表示させます。
xamWebDialogWindowはSilverlightアプリケーション内で使用可能なダイアログウィンドウのコントロールです。ユーザーによる移動、縮小、最大化はもちろんのこと、モーダルダイアログとしても使用可能です。
検索結果表示用には別のユーザーコントロールを作成し、その中にxamWebDialogWindowを配置して使用するため、まずExpression Blendで新しいコントロールを追加し、その中にxamWebDialogWindowを配置します。
検索結果の表示にはxamWebTileViewコントロールを使用します。NetAdvantage Silverlightコントロールの一つであるxamWebTileViewではリスト上の各データをタイルとしてパネル表示し、各タイルはユーザーが任意に拡大・縮小および配置する動作を提供します。好きなように情報の配置を変更できることで、ユーザーは自分のタスク（検索、比較、詳細）に合った生産性を高めることが可能になります。xamWebTileViewについては以前のリッチクライアント記事でも紹介しています。
xamWebTileViewの使用にはコントロールをxamWebDialogWindow上にxamWebTileViewを配置し、検索結果のデータをバインドさせるだけです。
xamWebTileViewコントロールの表示用データは後ほど実装用コードより設定されるため、ここではItemSourceプロパティをResultという値にバインドしておきます。
<igDW:XamWebDialogWindow x:Name="xdwSearchWindow" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="720" Height="560" Style="{StaticResource
XamWebDialogWindowStyle}">
<StackPanel>
<Grid x:Name="SearchOption" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<HyperlinkButton Grid.Column="0" Width="60">
<TextBlock Text="絞り込む" FontWeight="Bold" />
</HyperlinkButton>
<TextBox Grid.Column="1" x:Name="txtNarrowCriteria" Width="200"></TextBox>
<StackPanel x:Name="spnlNumFound" Orientation="Horizontal" Grid.Column="2"
Margin="10,0">
<TextBlock x:Name="txtNumFound" FontWeight="Bold" Foreground="#FFFF8C03"/>
<TextBlock x:Name="txtSearchStatus" HorizontalAlignment="Stretch"
Foreground="#FF98E60C"> 件 見つかりました</TextBlock>
</StackPanel>
</Grid>
<igTileView:XamWebTileView x:Name="xtvSearchResult" Margin="0,0,0,0"
ColumnsInPage="2" RowsInPage="3" Background="{x:Null}"
ItemsSource="{Binding Path=Result}"
TilePaneHeaderTemplate="{StaticResource SearchResultHeaderTemplate}"
TilePaneContainerStyle="{StaticResource TilePaneStyle}"
TilePaneContentTemplate="{StaticResource NormalPaneTemplate}"
MaximizedStateChanging="xtvSearchResult_MaximizedStateChanging">
<igTileView:XamWebTileView.TilePanelSettings>
<igTileView:TilePanelSettings MinimizedStripLocation="Right" AllowAnimation="True"
TilePaneTransition="Swap" />
</igTileView:XamWebTileView.TilePanelSettings>
</igTileView:XamWebTileView>
<Rectangle x:Name="recProgressIcon" Fill="{StaticResource IconBrush}"
StrokeThickness="0" Height="466" RenderTransformOrigin="0.5,0.5">
</Rectangle>
</StackPanel>
</igDW:XamWebDialogWindow>
検索パネルとの連動
検索処理部分を実装する前に、検索パネルのボタンクリックのイベントハンドラーを定義しておきます。Expression BlendよりVisual Studioを起動して記述するか、同じプロジェクトをVisual Studioから開けてイベントの定義を行います。xamDialogWindowは初期状態では表示されないため、WindowStateプロパティをHiddenに設定しておきます。
public partial class MainPage : UserControl
{
// 検索結果表示用ユーザーコントロール
SearchResult sr;
// 結果表示に使用される XamWebDialogWindow
XamWebDialogWindow win;
// 検索結果を格納する ViewModel
SPSearchResultDataSource viewModel;
// 検索キーワード入力用パネルが表示されているかのフラグ
bool panelOpen = false;
public MainPage()
{
InitializeComponent();
// 検索結果表示用ユーザーコントロールを追加
sr = new SearchResult();
this.LayoutRoot.Children.Add(sr);
// 初期状態では結果表示用の XamWebDialogWindow は非表示にしておく
win = (XamWebDialogWindow)sr.FindName("xdwSearchWindow");
win.WindowState = WindowState.Hidden;
// 初期状態ではこのコントロール自体を縮小表示
this.Width = 50;
this.spnlSearchBox.Visibility = Visibility.Collapsed;
}
検索結果を表示するxamDialogWindowを実際に表示させるのは、検索ボタンのClickイベントです。検索結果を保持するViewModelの準備および検索実行などのコードがありますが、それらについては後続のセクションで説明していきます。
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
win.IsModal = true;
win.CenterDialogWindow();
// 検索結果用 ViewModel を準備
this.viewModel = new SPSearchResultDataSource();
// XamWebDialogWindow 内に検索中のパネルを表示
sr.SwitchScreen(true, 0);
win.Show();
// 検索を実行
this.GetSearchResult();
}
これで検索パネルと結果表示用のダイアログウィンドウの準備が整いました。次に必要となるのはSharePoint Webサービスを使用した実際の検索処理です。
