Expression Blend 3を使ってSilverlight 3でリッチなレイアウトを持ったアプリケーションを作成しよう

NetAdvantage Silverlightによるリッチなナビゲーションの作成

その他の設定をカスタマイズ

　xamWebTileViewの設定をカスタマイズする場合は、xamWebTileView.TilePanelSettingsプロパティを設定します。プロパティ画面からTilePanelSettingsオブジェクトを新規作成します。

図15 - TilePanelSettingsを追加

　TilePanelSettingsではアニメーション効果の有無、アニメーション時間、アニメーションのイージング関数の設定、各種タイルの表示設定が可能です。今回はアニメーションの時間であるAnimationDurationを「00:00:02」、Silverlight 3で追加されたEasingFunctionを「Elastic In」、パネルを最小化した際の表示位置であるMinimizedStripLocationを「Bottom」と設定します。その他の設定項目についてはヘルプページで確認することができます。xamWebTileViewの設定XAMLは次のようになります。

<!--ItemsSource にデータ コンテキストの Collection を指定-->
<igTileView:XamWebTileView
    ItemsSource="{Binding Collection, Mode=OneWay}"
    TilePaneHeaderTemplate="{StaticResource DataTemplate1}"
    TilePaneContentTemplate="{StaticResource DataTemplate2}">
    <igTileView:XamWebTileView.TilePanelSettings>
        <!--TilePanelの設定-->
        <igTileView:TilePanelSettings AnimationDuration="00:00:02"
                                      MinimizedStripLocation="Bottom">
            <igTileView:TilePanelSettings.EasingFunction>
                <ElasticEase EasingMode="EaseIn"/>
            </igTileView:TilePanelSettings.EasingFunction>
        </igTileView:TilePanelSettings>
    </igTileView:XamWebTileView.TilePanelSettings>
</igTileView:XamWebTileView>

　プロジェクトを実行し、タイル選択時のアニメーションが変更されていること、最小化された他のタイルの位置が下部に表示されていることを確認してください。

図16 - 最小化の位置が変更されている

　すべてのXAMLコードは次のとおりです。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:igTileView="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.XamWebTileView.v9.1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="NAXamTileView_CS.MainPage"
    Width="640" Height="480" mc:Ignorable="d">

    <UserControl.Resources>
        <!--ヘッダー テンプレート-->
        <DataTemplate x:Key="DataTemplate1">
            <StackPanel Orientation="Horizontal">
                <Image Height="30" Width="30" Source="Images/User Edit64.png"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding Name}"/>
            </StackPanel>
        </DataTemplate>
        <!--コンテンツ テンプレート-->
        <DataTemplate x:Key="DataTemplate2">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Photo}"/>
                <TextBlock VerticalAlignment="Center" Text="名前"
                 Grid.Row="1" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="住所"
                 Grid.Row="2" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="会社名"
                 Grid.Row="3" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="E-mail"
                 Grid.Row="4" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="電話番号"
                 Grid.Row="5" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding Name}"
                 Grid.Row="1" Grid.Column="1" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding Address}"
                 Grid.Row="2" Grid.Column="1" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding CompanyName}"
                 Grid.Row="3" Grid.Column="1" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding Email}"
                 Grid.Row="4" Grid.Column="1" d:LayoutOverrides="Width"/>
                <TextBlock VerticalAlignment="Center" Text="{Binding PhoneNumber}"
                 Grid.Row="5" Grid.Column="1" d:LayoutOverrides="Width"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White"
          DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <!--ItemsSource にデータ コンテキストの Collection を指定-->
        <igTileView:XamWebTileView
            ItemsSource="{Binding Collection, Mode=OneWay}"
            TilePaneHeaderTemplate="{StaticResource DataTemplate1}"
            TilePaneContentTemplate="{StaticResource DataTemplate2}">
            <igTileView:XamWebTileView.TilePanelSettings>
                <!--TilePanelの設定-->
                <igTileView:TilePanelSettings AnimationDuration="00:00:02"
                                              MinimizedStripLocation="Bottom">
                    <igTileView:TilePanelSettings.EasingFunction>
                        <ElasticEase EasingMode="EaseIn"/>
                    </igTileView:TilePanelSettings.EasingFunction>
                </igTileView:TilePanelSettings>
            </igTileView:XamWebTileView.TilePanelSettings>
        </igTileView:XamWebTileView>
    </Grid>
</UserControl>

まとめ

　今回はExpression Blend 3のサンプルデータ作成機能を用いてxamWebTileViewコントロールにデータを表示しました。今までにないレコードのタイル表示や、ドラッグ＆ドロップ機能、選択時の拡大、縮小機能を最小限のXAML記述とコードレスで実現できる素晴らしいコンポーネントです。

　また、今回使用したコントロールのほかにもグリッド、チャート、ツリーなど高機能、高パフォーマンスなSilverlightコントロールを収録したNetAdvantage Silverlightをぜひ実際に試してみてください。