SHOEISHA iD

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

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

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

Silverlight/WPFでデータバインディングを利用しOutlookライクなスケジュールを構築する その1
Silverlight編

Silverlight/WPFでOutlookライクなアプリ構築(1)

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

データのマッピングを行い、予定を画面に表示させる

 XamDataManager コントロールでは現在のリソース、もしくはリソース ID を CurrentUser, CurrentUserId プロパティに割り当てる必要があります。MainPage.xaml を開き、MainPageViewModel.CurrentUserId を割り当てます。

コード11 CurrentUserId の割り当て
<ig:XamScheduleDataManager Name="xamScheduleDataManager1"
                DataConnector="{Binding ElementName=listScheduleDataConnector1}"
                CurrentUserId="{Binding CurrentUserId}"  />

 さらに、データ コネクター コントロールでは各種情報のコレクションを設定し、それぞれのプロパティをマッピングする必要があります。割り当てるデータのエンティティ名を標準のものにしている場合は、UseDefaultMappings プロパティを True と設定することであらかじめ定義されたマッピングが設定されます。

コード12 データのマッピング
<ig:ListScheduleDataConnector Name="listScheduleDataConnector1"
                    AppointmentItemsSource="{Binding Appointments}"
                    ResourceCalendarItemsSource="{Binding ResourceCalendars}"
                    ResourceItemsSource="{Binding Resources}"  >
    <ig:ListScheduleDataConnector.AppointmentPropertyMappings>
        <ig:AppointmentPropertyMappingCollection UseDefaultMappings="True" />
    </ig:ListScheduleDataConnector.AppointmentPropertyMappings>
    <ig:ListScheduleDataConnector.ResourceCalendarPropertyMappings>
        <ig:ResourceCalendarPropertyMappingCollection UseDefaultMappings="True" />
    </ig:ListScheduleDataConnector.ResourceCalendarPropertyMappings>
    <ig:ListScheduleDataConnector.ResourcePropertyMappings>
        <ig:ResourcePropertyMappingCollection UseDefaultMappings="True" />
    </ig:ListScheduleDataConnector.ResourcePropertyMappings>
</ig:ListScheduleDataConnector>

 全ての XAML は下記のとおりです。

コード13 MainPage.xaml(最終版)
<UserControl x:Class="xamSchedule_SL.MainPage"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:ig="http://schemas.infragistics.com/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <ig:XamDayView Name="xamDayView1"
                   DataManager="{Binding ElementName=xamScheduleDataManager1}" />
        <ig:XamScheduleDataManager Name="xamScheduleDataManager1"
                      DataConnector="{Binding ElementName=listScheduleDataConnector1}"
                       CurrentUserId="{Binding CurrentUserId}"  />
        <ig:ListScheduleDataConnector Name="listScheduleDataConnector1"
                            AppointmentItemsSource="{Binding Appointments}"
                            ResourceCalendarItemsSource="{Binding ResourceCalendars}"
                            ResourceItemsSource="{Binding Resources}" >
            <ig:ListScheduleDataConnector.AppointmentPropertyMappings>
                <ig:AppointmentPropertyMappingCollection UseDefaultMappings="True" />
            </ig:ListScheduleDataConnector.AppointmentPropertyMappings>
            <ig:ListScheduleDataConnector.ResourceCalendarPropertyMappings>
                <ig:ResourceCalendarPropertyMappingCollection UseDefaultMappings="True" />
            </ig:ListScheduleDataConnector.ResourceCalendarPropertyMappings>
            <ig:ListScheduleDataConnector.ResourcePropertyMappings>
                <ig:ResourcePropertyMappingCollection UseDefaultMappings="True" />
            </ig:ListScheduleDataConnector.ResourcePropertyMappings>
        </ig:ListScheduleDataConnector>
    </Grid>
</UserControl>

 ソリューションを実行すると、最初にタイムゾーンを指定するダイアログが表示されます。

図13 タイムゾーンの選択
図13 タイムゾーンの選択

 タイムゾーンを選択すると、コードで設定した予定が表示されます。

図14 予定の表示
図14 予定の表示

まとめ

 今回は Silverlight クラス ライブラリに NetAdvantage for Silverlight LOB のスケジュール データ 構造を実装し、画面にデータを表示させました。ビューについては、XamDayView 以外にも XamMonthView, XamScheduleView を用いて全く同じデータを別の形式で表現することが可能になります。Silverlight においてスケジュール管理を行うアプリケーション開発を検討されている場合はぜひ一度試されてはいかがでしょうか。次回は同じデータ構造を WPF で表現する方法についてお伝えします。

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5669 2010/12/27 17:28

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング