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　タイムゾーンの選択

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

図14　予定の表示

まとめ

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