SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

xamWebTileViewをページに追加し、データをバインド

 ツールバーからアセットを選択すると、インストールされているコントロール並びにコントロールパーツの一覧が表示されます。[コントロール]-[Infragistics]カテゴリーを選択すると、NetAdvantage Silverlightコントロールの一覧が表示されます。一覧の中からxamWebTileViewを選択し、ページに追加します。その後、HorizontalAlignment、VerticalAlignmentをそれぞれ既定値であるStretchと設定します。

<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"
    x:Class="NAXamTileView_CS.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <igTileView:XamWebTileView/>
    </Grid>
</UserControl>

 次にItemsSourceプロパティの右側にあるチェックボックスをクリックし、[データバインド]を選択します。

図8 - ItemsSourceプロパティにデータバインドを設定
図8 - ItemsSourceプロパティにデータバインドを設定

 データバインドの作成ダイアログが起動するのでバインドするデータを選択します。

図9 - 先ほど作成したサンプルデータをバインド
図9 - 先ほど作成したサンプルデータをバインド

 正しくバインドが行われていると、図10のようにタイルが表示されます。ここまでのxamWebTileViewのXAMLは次のとおりです。

<Grid x:Name="LayoutRoot" Background="White"
      DataContext="{Binding Source={StaticResource SampleDataSource}}">
<!--ItemsSource にデータ コンテキストの Collection を指定-->
    <igTileView:XamWebTileView
        ItemsSource="{Binding Collection, Mode=OneWay}"/>
</Grid>
図10 - データがバインドされたxamWebTileview
図10 - データがバインドされたxamWebTileview

 このままですとタイルのヘッダー、コンテンツが文字のみとなってしまうので、それぞれのテンプレートを作成します。

xamWebTileViewのスタイリング・テンプレート作成

 データをxamWebTileViewにバインドした場合はそれぞれのレコードがTilePaneとして作成されます。TilePaneの中でもヘッダーはTilePaneHeaderTemplate、コンテンツはTilePaneContentTemplateとして定義することができます。まずはxamWebTileView上でコンテキストメニューを表示し、[追加のテンプレート]-[TilePaneHeaderTemplate]-[空アイテムの作成]を選択します。

図11 - TilePaneHeaderTemplateを作成
図11 - TilePaneHeaderTemplateを作成

 テンプレートのキーを[DataTemplate1]と設定し[OK]ボタンをクリックするとテンプレートの編集画面が表示されます。まず、テンプレートに予め設定されているGridをStackPanelと変更しOrientaionプロパティをHorizontalと設定します。StackPanelには続けてImage、TextBlockを追加します。ImageのWidth、Heightはそれぞれ30、TextBlockのVerticalAlignmentはCenterと設定します。ここまでで作成されたXAMLは次のとおりです。

<!--ヘッダー テンプレート-->
<DataTemplate x:Key="DataTemplate1">
    <StackPanel Orientation="Horizontal">
        <Image Height="30" Width="30"/>
        <TextBlock VerticalAlignment="Center" Text="TextBlock" />
    </StackPanel>
</DataTemplate>

 次に、テンプレートに追加したImageのSourceプロパティに任意の画像ファイルを指定します。今回はあらかじめ追加していたImagesフォルダーの中から「User Edit64.png」を選択しました。また、TextBlockのTextプロパティにName列をデータバインドさせます。最終的なXAML並びにデザイン画面は次のとおりとなります。

<!--ヘッダー テンプレート-->
<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>
図12 - 完成したヘッダーテンプレート
図12 - 完成したヘッダーテンプレート

 ヘッダー テンプレートの編集を終了し、先ほどと同様に[追加のテンプレートの編集]-[TilePaneContentTemplateの編集]-[空アイテムの作成]を選択します。キー名は「DataTemplate2」と設定します。このテンプレートでは実際にタイルに表示されるUIを構築します。GridのColumnDefinition、RowDefinitionを設定し、それぞれImageならびにTextBlockを配置します。また、配置したコントロールにて各列のデータを表示するようにデータバインディングを設定します。構築されたXAMLは次のとおりです。

<!--コンテンツ テンプレート-->
<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>

 設定が完了したらプロジェクトを実行し、タイルのドラッグ&ドロップや選択による拡大、縮小が可能であることを確認してください。

図13 - テンプレートが適用され表現力が増している
図13 - テンプレートが適用され表現力が増している
図14 - タイルを選択した状態
図14 - タイルを選択した状態

次のページ
その他の設定をカスタマイズ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4498 2009/10/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング