DataGrid for WPF/Silverlight
手順 2：C1DataGrid コントロールの追加
製品の概要 > チュートリアル (Silverlight のみ) > WCF RIA Services のデータソースへのグリッドの連結 > 手順 2：C1DataGrid コントロールの追加

前の手順では、WCF RIA Services を有効にして新しい Silverlight アプリケーションを作成し、新しいデータソースを追加しました。この手順では、アプリケーションを設定し、そのアプリケーションに C1DataGrid コントロールを追加します。次の手順に従います。

  1. ソリューションエクスプローラで、C1DataGridRIA プロジェクトを右クリックし、［参照の追加］を選択します。［参照の追加］ダイアログボックスが表示されます。
  2. ［参照の追加］ダイアログボックスで、次のアセンブリを選択したら、［OK］をクリックします。
    • System.Windows.Controls.Data
    • System.Windows.Controls.DomainServices
    • C1.Silverlight
    • C1.Silverlight.DataGrid
    • C1.Silverlight.DataGrid.Ria
    これで、選択したアセンブリの参照がプロジェクトに追加されます。
  3. ソリューションエクスプローラで、MainPage.xaml ファイルをダブルクリックして開きます。
  4. プロジェクトの XAML ウィンドウで、UserControl タグを更新します。次のようになります。
    XAML
    コードのコピー 
    <UserControl x:Class="C1DataGridRIA.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"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:ria="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
    xmlns:adapter="clr-namespace:C1.Silverlight.DataGrid.Ria;assembly=C1.Silverlight.DataGrid.Ria"
    xmlns:local="clr-namespace:C1DataGridRIA.Web"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    このマークアップは、ユーザーが追加したアセンブリへの参照を追加し、UserControl をサイズ変更します。
  5. Grid タグの直後に次のマークアップを追加して、行定義を作成します。
    XAML
    コードのコピー 
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

    このマークアップは、ページのレイアウトを設定します。
  6. Grid タグ内の行定義の直下に次のマークアップを追加して、C1RiaAdaptor を作成します。
    XAML
    コードのコピー 
    <!-- RIA データソース -->
<adapter:C1RiaAdapter x:Name="_adapter" DataGrid="{Binding ElementName=_dataGrid}">
    <ria:DomainDataSource x:Name="_myDataSource" QueryName="GetProducts" PageSize="8">
        <ria:DomainDataSource.DomainContext>
            <local:NorthwindContext/>
        </ria:DomainDataSource.DomainContext>
        <ria:DomainDataSource.GroupDescriptors>
            <ria:GroupDescriptor PropertyPath="CategoryID"/>
            <ria:GroupDescriptor PropertyPath="Discontinued"/>
        </ria:DomainDataSource.GroupDescriptors>
        <ria:DomainDataSource.SortDescriptors>
            <ria:SortDescriptor PropertyPath="ProductName" Direction="Descending"/>
        </ria:DomainDataSource.SortDescriptors>
        <ria:DomainDataSource.FilterDescriptors>
            <ria:FilterDescriptor PropertyPath="UnitPrice" Operator="IsGreaterThanOrEqualTo" Value="18"/>
            <ria:FilterDescriptor PropertyPath="ProductName" Operator="Contains" Value="C"/>
        </ria:DomainDataSource.FilterDescriptors>
    </ria:DomainDataSource>
</adapter:C1RiaAdapter>

    このマークアップは、RIA データソースを追加します。
  7. Grid タグ内の C1RiaAdaptor タグの下に次のマークアップを追加して、ページにヘッダーを追加します。
    XAML
    コードのコピー 
    <!-- ヘッダー -->
<Border Grid.Row="0" Height="40" Background="LightBlue">
    <TextBlock Text="CollectionView adapter for C1DataGrid: RIA Services"
       Margin="10 0 0 0" FontSize="15" FontWeight="Bold" VerticalAlignment="Center"/>
</Border>
  8. Grid タグ内の Header の下に次のマークアップを追加して、ページにレイアウト Grid を追加します。
    XAML
    コードのコピー 
    <!-- コンテンツ -->
<Grid Grid.Row="1" Margin="20">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

    このレイアウトグリッド内に C1DataGrid コントロールを追加します。
  9. 追加したコンテンツレイアウト Grid（ タグの直前）内に次のマークアップを追加して、ページに標準の DataPager コントロールを追加します。
    XAML
    コードのコピー 
    <!-- DataPager -->
    <data:DataPager x:Name="_dataPager" Source="{Binding Data, ElementName=_myDataSource}" BorderThickness="0" Background="White"/>
  10. コンテンツレイアウト Grid 内の DataPager の直後に次のマークアップを追加して、ページに C1DataGrid コントロールを追加します。
    XAML
    コードのコピー 
    <!-- C1DataGrid -->
<c1:C1DataGrid x:Name="_dataGrid" CanUserGroup="True" AutoGenerateColumns="False" Grid.Row="1"
       CanUserAddRows="True" CanUserEditRows="True" CanUserRemoveRows="True"
       ItemsSource="{Binding Data, ElementName=_adapter}"
       BeginningRowEdit="_dataGrid_BeginningRowEdit" CommittingRowEdit="_dataGrid_CommittingRowEdit"
       CancelingRowEdit="_dataGrid_CancelingRowEdit" RowsDeleted="_dataGrid_RowsDeleted" >
    <c1:C1DataGrid.Columns>
        <c1:DataGridNumericColumn Binding="{Binding CategoryID, Mode=TwoWay}" SortMemberPath="CategoryID" FilterMemberPath="CategoryID" Header="CategoryID"/>
        <c1:DataGridCheckBoxColumn Binding="{Binding Discontinued, Mode=TwoWay}" SortMemberPath="Discontinued" FilterMemberPath="Discontinued" Header="Discontinued"/>
        <c1:DataGridTextColumn Binding="{Binding ProductName, Mode=TwoWay}" SortMemberPath="ProductName" FilterMemberPath="ProductName" Header="ProductName"/>
        <c1:DataGridTextColumn Binding="{Binding QuantityPerUnit, Mode=TwoWay}" SortMemberPath="QuantityPerUnit" FilterMemberPath="QuantityPerUnit" Header="QtyPerUnit"/>
        <c1:DataGridNumericColumn Binding="{Binding UnitPrice, Mode=TwoWay}" SortMemberPath="UnitPrice" FilterMemberPath="UnitPrice" Header="UnitPrice"/>
    </c1:C1DataGrid.Columns>
</c1:C1DataGrid>

    この C1DataGrid コントロールは、追加済みのデータベースに連結され、定義済みの連結列を含みます。
  11. コンテンツレイアウト Grid 内の C1DataGrid の直後に次のマークアップを追加して、ページに１つのテキストボックスと２つのボタンを追加します。
    XAML
    コードのコピー 
    <!-- テキストの変更 -->
<TextBox x:Name="_changeText" Margin="0 4 0 0" Grid.Row="2"/>
<!-- 拒否ボタン -->
<Button x:Name="_rejectButton" Content="Reject Changes" IsEnabled="False" Click="_rejectButton_Click" Width="120" HorizontalAlignment="Right" Margin="0 4 130 0" Grid.Row="3"/>
<!-- 送信ボタン -->
<Button x:Name="_submitButton" Content="Submit Changes" IsEnabled="False" Click="_submitButton_Click" Width="120" HorizontalAlignment="Right" Margin="0 4 0 0" Grid.Row="3"/>

    実行時に、このテキストボックスにはグリッドに加えられたすべての変更の場所が表示されます。また、これらのボタンを使用して、実行時にグリッドに加えられた変更を拒否または適用できます。 次の手順では、アプリケーションに追加した XAML を実装するためのコードを追加します。
  12. MainPage.xaml ページを右クリックし、［コードの表示］を選択して、コードエディタで MainPage.xaml.cs（または MainPage.xaml.vb）ページを開きます。
  13. ページの先頭に imports 文を追加します。
    コードのコピー 
    Imports C1.Silverlight.DataGrid
Imports System.ServiceModel.DomainServices.Client
    コードのコピー 
    using C1.Silverlight.DataGrid;
using System.ServiceModel.DomainServices.Client;

  14. MainPage クラス内に次のコードを追加して、XAML で追加されたコントロールを実装します。
    コードのコピー 
    Private Sub _submitButton_Click(sender As Object, e As RoutedEventArgs)
   ' サーバーに変更を送信します
   _dataGrid.IsLoading = True
   _myDataSource.DomainContext.SubmitChanges(AddressOf OnSubmitCompleted, Nothing)
End Sub
Private Sub _rejectButton_Click(sender As Object, e As RoutedEventArgs)
   ' 変更を拒否します
   _myDataSource.DomainContext.RejectChanges()
   CheckChanges()
   _dataGrid.Reload(False)
End Sub
' 行内に保留中の変更がある場合は、送信/拒否ボタンを無効にします
Private Sub _dataGrid_BeginningRowEdit(sender As Object, e As DataGridEditingRowEventArgs)
   _submitButton.IsEnabled = False
   _rejectButton.IsEnabled = False
End Sub
' 保留中の変更がコミットされた後で、送信/拒否ボタンを有効または無効にします
Private Sub _dataGrid_CommittingRowEdit(sender As Object, e As DataGridEditingRowEventArgs)
   CheckChanges()
End Sub
' 保留中の変更がキャンセルされた後で、送信/拒否ボタンを有効または無効にします
Private Sub _dataGrid_CancelingRowEdit(sender As Object, e As DataGridEditingRowEventArgs)
   CheckChanges()
End Sub
' 行が削除された後で、送信/拒否ボタンを有効または無効にします
Private Sub _dataGrid_RowsDeleted(sender As Object, e As DataGridRowsDeletedEventArgs)
   CheckChanges()
End Sub
' 保留中の変更を送信/拒否するかをチェックし、それに応じてボタンを有効または無効にします。
Private Sub CheckChanges()
   Dim changeSet As EntityChangeSet = _myDataSource.DomainContext.EntityContainer.GetChanges()
   _changeText.Text = changeSet.ToString()
   Dim hasChanges As Boolean = _myDataSource.HasChanges
   _submitButton.IsEnabled = hasChanges
   _rejectButton.IsEnabled = hasChanges
End Sub
' サーバーへの変更の送信時にエラーをチェックします
Private Sub OnSubmitCompleted(so As SubmitOperation)
   _dataGrid.IsLoading = False
   If so.HasError Then
         MessageBox.Show(String.Format("Submit Failed: {0}", so.[Error].Message))
         so.MarkErrorAsHandled()
   End If
   CheckChanges()
End Sub
    コードのコピー 
    private void _submitButton_Click(object sender, RoutedEventArgs e)
{
    // サーバーに変更を送信します
    _dataGrid.IsLoading = true;
    _myDataSource.DomainContext.SubmitChanges(OnSubmitCompleted, null);
}
private void _rejectButton_Click(object sender, RoutedEventArgs e)
{
    // 変更を拒否します
    _myDataSource.DomainContext.RejectChanges();
    CheckChanges();
    _dataGrid.Reload(false);
}
// 行内に保留中の変更がある場合は、送信/拒否ボタンを無効にします
private void _dataGrid_BeginningRowEdit(object sender, DataGridEditingRowEventArgs e)
{
    _submitButton.IsEnabled = false;
    _rejectButton.IsEnabled = false;
}
// 保留中の変更がコミットされた後で、送信/拒否ボタンを有効または無効にします
private void _dataGrid_CommittingRowEdit(object sender, DataGridEditingRowEventArgs e)
{
    CheckChanges();
}
// 保留中の変更がキャンセルされた後で、送信/拒否ボタンを有効または無効にします
private void _dataGrid_CancelingRowEdit(object sender, DataGridEditingRowEventArgs e)
{
    CheckChanges();
}
// 行が削除された後で、送信/拒否ボタンを有効または無効にします
private void _dataGrid_RowsDeleted(object sender, DataGridRowsDeletedEventArgs e)
{
    CheckChanges();
}
// 保留中の変更を送信/拒否するかをチェックし、それに応じてボタンを有効または無効にします。
private void CheckChanges()
{
    EntityChangeSet changeSet = _myDataSource.DomainContext.EntityContainer.GetChanges();
    _changeText.Text = changeSet.ToString();
    bool hasChanges = _myDataSource.HasChanges;
    _submitButton.IsEnabled = hasChanges;
    _rejectButton.IsEnabled = hasChanges;
}
// サーバーへの変更の送信時にエラーをチェックします
private void OnSubmitCompleted(SubmitOperation so)
{
    _dataGrid.IsLoading = false;
    if (so.HasError)
    {
        MessageBox.Show(string.Format("Submit Failed: {0}", so.Error.Message));
        so.MarkErrorAsHandled();
    }
    CheckChanges();
}

 

 

Copyright © GrapeCity, Inc. All rights reserved.