検索インターフェイスの作成
検索キーワードの入力および検索実行用ボタンが配置されるパネルはSilverlight標準のStackPanelを使用します。ユーザーが検索機能を使用しない時にはパネルを縮小し、ユーザーが必要な時にキーワード入力部分が表示されるようにするようにします。
2つのStackPanelを使用したパネルはExpression Blendを使用して作成します。作成後のXAMLは以下のようになります。
<Grid HorizontalAlignment="Right" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="spnlSearchBox" Margin="0,0,0,0" HorizontalAlignment="Left"
VerticalAlignment="Stretch" Grid.Column="0" Width="250" Opacity="0.6">
<TextBlock Height="30" Width="164" Margin="6,30,80,0" VerticalAlignment="Top"
Text="キーワードを入力：" TextWrapping="Wrap" Foreground="Navy"
Opacity="1" FontSize="16" FontWeight="Bold" />
<TextBox x:Name="txtKeywords" Margin="4,0,8,8" Text="TextBox" TextWrapping="Wrap"
Opacity="1"/>
<Button Height="35" Margin="120,0,8,0" Content="検索"
Background="{StaticResource DarkBrush}" Opacity="1" Click="Button_Click"
FontSize="16" FontWeight="Bold"/>
</StackPanel>
<StackPanel x:Name="spnlToolbar" Width="50" Margin="0,0,0,0"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1"
MouseLeftButtonDown="spnlToolbar_MouseLeftButtonDown"
MouseEnter="spnlToolbar_MouseEnter" MouseLeave="spnlToolbar_MouseLeave">
<TextBlock x:Name="textBlock" Margin="-37,50,-37,0" Text="Search"
TextWrapping="NoWrap" FontWeight="Bold" FontSize="32"
RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False"
d:LayoutRounding="Auto" Height="49.545" Cursor="Hand"
ToolTipService.ToolTip="SharePointを検索">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="1.5,0" StartPoint="0,0">
<GradientStop Color="#FF4B920E"/>
<GradientStop Color="#FF458E06" Offset="1"/>
<GradientStop Color="#FF458E06"/>
</LinearGradientBrush>
</TextBlock.Foreground>
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="270"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
ユーザーが「Search」と書かれたテキストブロックをクリックした際のパネルの開閉処理はコードビハインドから行うため、ここではまだ実装しません（資料参照）。パネルの準備ができたら、今度はパネル上のマウスホバー時にユーザーにパネルがクリック可能であるというフィードバックを与えるため、このテキストブロックをハイライトさせるアニメーションを作成します。
Silverlightでアニメーションを用いるにはストーリーボードを作成します。［オブジェクトとタイムライン］タブ上で「Search」と書かれているテキストブロック（例：textBlock）をクリックし、適当な間隔のキーフレームを設定します。各キーフレームでは、テキストブロックのForegroundにハイライトとして使用されるGradientのGradientStopの位置を徐々にずらしていくことで、テキストブロックに表示されている文字列が左から右に光る効果が出せます。
★↓違いが一見して分かりにくいので、図5のキャプションで少し補足しました。
<Storyboard x:Name="sbSearch" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="textBlock"
Storyboard.TargetProperty="(TextBlock.Foreground).(GradientBrush.
GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="Black"/>
<EasingColorKeyFrame KeyTime="00:00:00.2000000" Value="#FF489009"/>
<EasingColorKeyFrame KeyTime="00:00:00.4000000" Value="#FF4F9413"/>
<EasingColorKeyFrame KeyTime="00:00:00.6000000" Value="#FF4B910E"/>
<EasingColorKeyFrame KeyTime="00:00:00.8000000" Value="#FF529617"/>
<EasingColorKeyFrame KeyTime="00:00:01.0000000" Value="#FF4B910E"/>
<EasingColorKeyFrame KeyTime="00:00:01.4800000" Value="#FF4B910E"/>
</ColorAnimationUsingKeyFrames>
ユーザーによるマウスオーバー操作とこのアニメーションを連動して開始するには、テキストブロックが配置されているパネルのMouseEnterおよびMouseLeaveイベントハンドラーでストーリーボードのBegin/Stopメソッドを呼ぶだけです。
private void spnlToolbar_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
// "Search" のアニメーションを開始
this.sbSearch.Begin();
}
private void spnlToolbar_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
// "Search" のアニメーションをストップ
this.sbSearch.Stop();
}
このようなささやかなアニメーションを使用したフィードバックもユーザーエクスペリエンスの向上には欠かせないものです。質の高いアニメーションを手軽に組み込むことができるのもSilverlightを使うメリットの一つと言えるでしょう。
