Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
UltraChart 折れ線グラフの色を指定する

UltraChart ではグラフに自動的に色を切り替えて配色するようになっていますが、状況に応じて配色を変更したい状況があります。ここでは UltraChart の折れ線グラフ(合成チャート)の色を指定する方法をご紹介します。


実装方法

各折れ線グラフ(NumericSeries)の PaintElement コレクション(PEs)に、色情報を加えます。


C#

//シリーズの生成
NumericSeries lineSeries1 = this.GetSeriesABound("Series A");
// ラインの色指定
lineSeries1.PEs.Add(new PaintElement(Color.FromArgb(116, 70, 185)));
this.UltraChart1.CompositeChart.Series.Add(lineSeries1);

NumericSeries lineSeries2 = this.GetSeriesABound("Series B");
// ラインの色指定
lineSeries2.PEs.Add(new PaintElement(Color.FromArgb(159, 179, 40)));
this.UltraChart1.CompositeChart.Series.Add(lineSeries2);

NumericSeries lineSeries3 = this.GetSeriesABound("Series C");
// ラインの色指定
lineSeries3.PEs.Add(new PaintElement(Color.FromArgb(249, 98, 50)));
this.UltraChart1.CompositeChart.Series.Add(lineSeries3);

NumericSeries lineSeries4 = this.GetSeriesABound("Series D");
// ラインの色指定
lineSeries4.PEs.Add(new PaintElement(Color.FromArgb(46, 156, 166)));
this.UltraChart1.CompositeChart.Series.Add(lineSeries4);

NumericSeries lineSeries5 = this.GetSeriesABound("Series E");
// ラインの色指定
lineSeries5.PEs.Add(new PaintElement(Color.FromArgb(220, 63, 118)));
this.UltraChart1.CompositeChart.Series.Add(lineSeries5);



VB.NET

'シリーズの生成
Dim lineSeries1 As NumericSeries = Me.GetSeriesABound("Series A")
' ラインの色指定
lineSeries1.PEs.Add(New PaintElement(Color.FromArgb(116, 70, 185)))
Me.UltraChart1.CompositeChart.Series.Add(lineSeries1)

Dim lineSeries2 As NumericSeries = Me.GetSeriesABound("Series B")
' ラインの色指定
lineSeries2.PEs.Add(New PaintElement(Color.FromArgb(159, 179, 40)))
Me.UltraChart1.CompositeChart.Series.Add(lineSeries2)

Dim lineSeries3 As NumericSeries = Me.GetSeriesABound("Series C")
' ラインの色指定
lineSeries3.PEs.Add(New PaintElement(Color.FromArgb(249, 98, 50)))
Me.UltraChart1.CompositeChart.Series.Add(lineSeries3)

Dim lineSeries4 As NumericSeries = Me.GetSeriesABound("Series D")
' ラインの色指定
lineSeries4.PEs.Add(New PaintElement(Color.FromArgb(46, 156, 166)))
Me.UltraChart1.CompositeChart.Series.Add(lineSeries4)

Dim lineSeries5 As NumericSeries = Me.GetSeriesABound("Series E")
' ラインの色指定
lineSeries5.PEs.Add(New PaintElement(Color.FromArgb(220, 63, 118)))
Me.UltraChart1.CompositeChart.Series.Add(lineSeries5)


実行結果

折れ線グラフが指定した色で描画されました。

UltraChart


※ 合成チャート利用の前提となる、チャートエリアの設定、レイヤーの設定、X 軸 / Y 軸の設定などは添付サンプルをご覧ください。

 

サンプル

サンプルのダウンロード(Infragistics ASP.NET 2016.2 バージョン、C#)

サンプルのダウンロード(Infragistics ASP.NET 2016.2 バージョン、VB.NET)

(サンプルは 16.2.20162.2013 バージョンで作成されました)

igGrid セルに縦罫線を表示

igGrid のセルに縦罫線を表示してみましょう。下記 CSS を適用することで実現することができます。

<style>
.ui-iggrid tbody td {
    border-right: 1px solid #dadada;
}
</style>

 

実行結果

セルの境界がわかりやすくなりました。シンプルな CSS の設定ですが、継続的にお問合わせを頂いておりますのでご紹介致しました。

igGrid 縦罫線

 

サンプル

サンプルのダウンロード(Infragistics Ignite UI 2016.2 バージョン)
(本サンプルは 16.2.20162.2040 バージョンで作成されました)

UltraChart null を非表示にする方法

年度別のウェブサイトアクセス数をラインチャートで表示するアプリケーションを考えてみましょう。緑のラインが 2016 年、青のラインが 2017 年の実績を示しています。

UltraChart

 

データは DataTable 形式で、月ごとのアクセス数を保持しています。


C#

DataTable dt = new DataTable();
dt.Columns.Add("月", typeof(string));
dt.Columns.Add("2016 年", typeof(decimal));
dt.Columns.Add("2017 年", typeof(decimal));

dt.Rows.Add("1 月", 30000, 40000);
dt.Rows.Add("2 月", 25000, 33000);
dt.Rows.Add("3 月", 20000, 35000);
dt.Rows.Add("4 月", 25000, 35000);
dt.Rows.Add("5 月", 30000, 38000);
dt.Rows.Add("6 月", 35000, 43000);
dt.Rows.Add("7 月", 45000, 55000);
dt.Rows.Add("8 月", 40000, 60000);
dt.Rows.Add("9 月", 50000, null);
dt.Rows.Add("10 月", 60000, null);
dt.Rows.Add("11 月", 66000, null);
dt.Rows.Add("12 月", 70000, null);

 


VB.NET

Dim dt As New DataTable()
dt.Columns.Add("月", GetType(String))
dt.Columns.Add("2016 年", GetType(Decimal))
dt.Columns.Add("2017 年", GetType(Decimal))

dt.Rows.Add("1 月", 30000, 40000)
dt.Rows.Add("2 月", 25000, 33000)
dt.Rows.Add("3 月", 20000, 35000)
dt.Rows.Add("4 月", 25000, 35000)
dt.Rows.Add("5 月", 30000, 38000)
dt.Rows.Add("6 月", 35000, 43000)
dt.Rows.Add("7 月", 45000, 55000)
dt.Rows.Add("8 月", 40000, 60000)
dt.Rows.Add("9 月", 50000, Nothing)
dt.Rows.Add("10 月", 60000, Nothing)
dt.Rows.Add("11 月", 66000, Nothing)
dt.Rows.Add("12 月", 70000, Nothing)

 

UltraChart ではデータポイントに null があると、デフォルトの動作では自動的に 0 に置き換えてグラフを描画致します。上のチャートでは 2017 年 9 月以降の null 値が 0 として描画されます。但し、将来の実績値をグラフ化する際には、null を 0 に置き換えるよりもデータポイントを描画しないことが多いと思います。

 

実装方法

UltraChart では、このような場合に備え、NullHandling プロパティを提供しています。値に DontPlot を指定することで、null のデータポイントは描画されなくなります。


C#

// null のデータポイントを描画しない
UltraChart1.LineChart.NullHandling = Infragistics.UltraChart.Shared.Styles.NullHandling.DontPlot;

 



VB.NET

' null のデータポイントを描画しない
UltraChart1.LineChart.NullHandling = Infragistics.UltraChart.Shared.Styles.NullHandling.DontPlot

 

 

実行結果

実績は 8 月までとなり、9 月以降のデータポイントは描画されなくなりました。

UltraChart

 

オンラインリソース

NullHandling プロパティ (LineChartAppearance)
http://jp.infragistics.com/help/aspnet/infragistics4.webui.ultrawebchart.v16.2~infragistics.ultrachart.resources.appearance.linechartappearance~nullhandling

 

サンプル

サンプルのダウンロード(Infragistics ASP.NET 2016.2 バージョン、C#)

サンプルのダウンロード(Infragistics ASP.NET 2016.2 バージョン、VB.NET)


(サンプルは 16.2.20162.2013 バージョンで作成されました)

XamDataGrid 行のスタイルを変更する

XamDataGrid では、デフォルトで選択行やアクティブ行、ホバー行など各種状態に対して青色を基調とした配色が行われています。これら行のスタイルを状況に応じて変更したいという状況はよくあります。今回は行のスタイルを状態毎に個別に変更する方法をご紹介します。

 

実装方法

XamDataGrid の行のスタイルは DataRecordPresenter クラスで設定することができます。XamDataGrid の各要素の構成は「xamDataGrid について」を参照下さい。

DataRecordPresenter に対するスタイルを作成します。Setter の Value には ComboBox で選択している色をバインドしています。実装の詳細は サンプル をご覧ください。

<Style TargetType="{x:Type igDP:DataRecordCellArea}">
    <!--アクティブ行の背景色-->
    <Setter Property="BackgroundActive"
            Value="{Binding ElementName=BackgroundActive_Color, Path=SelectedItem}"/>
    <!--選択行の背景色-->
    <Setter Property="BackgroundSelected"
            Value="{Binding ElementName=BackgroundSelected_Color, Path=SelectedItem}"/>
    <!--ホバー行の背景色-->
    <Setter Property="BackgroundHover"
            Value="{Binding ElementName=BackgroundHover_Color, Path=SelectedItem}"/>
    <!--アクティブ行のボーダー色-->
    <Setter Property="BorderActiveBrush"
            Value="{Binding ElementName=BorderActiveBrush_Color, Path=SelectedItem}"/>
    <!--ホバー行のボーダー色-->
    <Setter Property="BorderHoverBrush"
            Value="{Binding ElementName=BorderHoverBrush_Color, Path=SelectedItem}"/>
    <!--選択行のボーダー色-->
    <Setter Property="BorderSelectedBrush"
            Value="{Binding ElementName=BorderSelectedBrush_Color, Path=SelectedItem}"/>
</Style>

 

実行結果

画面右側のコンボボックスから色情報を選択して下さい。行のスタイルを無効化される場合、全てのコンボボックスで白色(#FFFFFFFF)を選択して下さい。

XamDataGrid 行スタイル

 

オンラインリソース

レコード ホバーの色の変更
http://jp.infragistics.com/help/wpf/xamdata-changing-the-record-hover-color

xamDataGrid、xamDataCarousel および xamDataPresenter のスタイリング ポイント
http://jp.infragistics.com/help/wpf/wpf-working-with-xamdatagrid-xamdatacarousel-and-xamdatapresenter-styling-points

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016.2 バージョン、C#)
(本サンプルは 16.2.20162.2045 バージョンで作成されました)

XamDataGrid 多段明細行

XamDataGrid ではデータを横方向に連続して表示する以外にも、データを多段表示することもできます。

データを多段で表示できると、横幅が限られた画面幅に各レコードを収めることも可能ですし、データを俯瞰しやすくなります。

XamDataGrid 多段明細行

 

実装方法

FieldLayoutSettings にある AutoArrangeCells プロパティに “Never” を指定し、グリッドのフィールドが自動的に1段で整列する動作を無効化します。

<igDP:XamDataGrid x:Name="xamDataGrid1" DataSource="{Binding People}">
    <igDP:XamDataGrid.FieldLayoutSettings>
        <!--
            Field の RowSpan、ColumnSpan を明示的に設定するために
            AutoArrangeCells に "Never" を指定する。
        -->
        <igDP:FieldLayoutSettings
            AutoGenerateFields="False"
            AutoArrangeCells="Never" />
    </igDP:XamDataGrid.FieldLayoutSettings>
    ...
</igDP:XamDataGrid>

 

続いて、各フィールド(各列)の表示位置を指定していきます。フィールドの Row プロパティColumn プロパティにそれぞれ位置情報を指定します。

「ID」フィールドは他のフィールドの 2 倍の高さで表示するため、RowSpan に 2 を指定します。「住所」フィールドは、「郵便番号」フィールドと「電話番号」フィールドの幅を合わせたサイズにするため ColumnSpan に 2 を指定します。

<igDP:XamDataGrid x:Name="xamDataGrid1" DataSource="{Binding People}">
    ...
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                <!--各フィールドの位置を、RowSpan、ColumnSpan で設定する。-->
                <igDP:Field Name="ID" Label="ID" Width="30"
                            Row="0" Column="0"
                            RowSpan="2"/>
                <igDP:Field Name="LastName" Label="姓"
                            Row="0" Column="1"/>
                <igDP:Field Name="FirstName" Label="名"
                            Row="1" Column="1"/>
                <igDP:Field Name="ZipCode" Label="郵便番号"
                            Row="0" Column="2"/>
                <igDP:Field Name="Address" Label="住所"
                            Row="1" Column="2"
                            ColumnSpan="2"/>
                <igDP:Field Name="Tel" Label="電話番号"
                            Row="0" Column="3"/>
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

 

オンラインリソース

レコード内にセルを配置
http://jp.infragistics.com/help/wpf/xamdata-arranging-cells-within-the-record

AutoArrangeCells プロパティ
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.fieldlayoutsettings~autoarrangecells

Row プロパティ (FieldItem)
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.fielditem~row

Column プロパティ (FieldItem)
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.fielditem~column

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016.2 バージョン、C#)
(本サンプルは 16.2.20162.2045 バージョンで作成されました)

XamDataGrid と XamBarcode を使ったレポートの作成

XamDataGrid ではグリッドの内容を印刷する機能を提供しています。XamDataGrid の印刷は専用のメソッドを呼び出すことで簡単に実現することができます。今回は XamDataGrid のセルに XamBarcode(バーコードコントロール)を埋め込んで、商品リストを作ってみます。

XamDataGrid に XamBarcode を埋め込む部分は、以前にご紹介した XamDataGrid の TemplateField 機能を利用します。TemplateField 機能については下記をご覧ください。

XamDataGrid セルに任意のコントロールを埋め込む(テンプレートフィールド) 
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2016/12/02/26827.aspx

 

WPF アプリケーションの見た目

XamDataGrid & XamBarcode

 

XamBarcode コントロールの配置

TemplateField に XamBarcode(XamCode128Barcode)を配置します。

<igDP:XamDataGrid x:Name="xamDataGrid1" DataSource="{Binding Products}" Grid.Row="1"
                  AutoFit="True" FontSize="27">
    ...
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                ...
                <igDP:TemplateField Name="Barcode" BindingType="UseAlternateBinding" AlternateBinding="{Binding ProductID}" Label="Barcode"
                                    Row="0" Column="3" RowSpan="2"
                                    IsEnabled="False" AllowEdit="False" IsReadOnly="True">
                    <igDP:TemplateField.DisplayTemplate>
                        <DataTemplate>
                            <!--バーコードコントロールの配置-->
                            <ig:XamCode128Barcode Data="{Binding}" ShowText="False" />
                        </DataTemplate>
                    </igDP:TemplateField.DisplayTemplate>
                </igDP:TemplateField>
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

 

印刷処理の実装

続いて印刷ボタンをクリックした際に呼び出されるコマンドの実装内容です。印刷対象となる XamDataGrid をパラメータとして渡しています。

Infragistics.Windows.Reporting.Report オブジェクトに、EmbeddedVisualReportSection を経由して XamDataGrid を設定します。続いてヘッダー、フッターの設定を行い、最後に Report.Print メソッドを呼び出して印刷を行います。

<Button Content="印刷"
        HorizontalAlignment="Left"
        Margin="90,0,0,0"
        Width="75"
        Command="{Binding PrintCommand}"
        CommandParameter="{Binding ElementName=xamDataGrid1}" />
public ICommand PrintCommand
{
    get
    {
        if(_printCommand == null)
        {
            _printCommand = new DelegateCommand
            {
                ExecuteHandler = (param) =>
                {
                    var grid = param as XamDataGrid;

                    try
                    {
                        // レポートオブジェクトの生成
                        Report reportObj = new Report();
                        // XamDataGrid ヘッダーを毎ページに表示
                        reportObj.ReportSettings.RepeatType = RepeatType.PageBreak;
                        
                        // セクション(XamDataGrid)
                        EmbeddedVisualReportSection gridSection = new EmbeddedVisualReportSection(grid);
                        // セクション(ヘッダー)
                        gridSection.PageHeader = "商品リスト";
                        // セクション(フッター)
                        gridSection.PageFooterTemplate = grid.Resources["FooterTemplate"] as DataTemplate;
                        // セクションをレポートに追加
                        reportObj.Sections.Add(gridSection);
                        
                        // 印刷
                        reportObj.Print(true, false);
                    }
                    catch
                    {
                        ...
                    }                            
                },
                CanExecuteHandler = (param) =>
                {
                    return true;
                }
            };
        }
        return _printCommand;
    }
}

 

実行結果

xps 形式で出力した結果です。

印刷結果

 

オンラインリソース

XamDataGrid 印刷 
http://jp.infragistics.com/help/wpf/xamdatagrid-printing

XamBarcode 
http://jp.infragistics.com/help/wpf/xambarcode

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)XamDataGrid_ActualPosition_CS.zip

(このサンプルは 16.2.20162.2045 バージョンで作成されました。)

WebDataGrid クリック行のデータを取得する

WebDataGrid のクリックした行のデータを取得してみます。よくあるシナリオとして、セルにボタンを埋め込み、ボタンをクリックした際にクリック行のデータを伴う処理を実施することがあります。このような場合、WebDataGrid のアクティブ化機能を利用することで簡潔に実装することができます。

 

実装方法

1.アクティブ化機能の有効化

下記のように WebDataGrid の Behaviors コレクションに Activation を設定します。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px"
    AutoGenerateColumns="False">
    <Columns>
        ...
    </Columns>
    <Behaviors>
        <%--アクティブ化機能の有効化--%>
        <ig:Activation>
        </ig:Activation>
    </Behaviors>
</ig:WebDataGrid>

2.アクティブ行の取得

続いてセルに埋め込まれたボタン(<input type="button" .../>)をクリックしたタイミングで発生するイベントをハンドルし、アクティブ化機能の持つアクティブセル → アクティブセルのある行 → 行上にある別のセルを辿っていきます。最終的に、クリックされた行の ID セルを取得します。

<script type="text/javascript">
    function selectRow() {

        // WebDataGrid を取得
        var grid = $find("WebDataGrid1");
        // アクティブ化機能を取得
        var activation = grid.get_behaviors().get_activation();
        // アクティブセルを取得
        var activeCell = activation.get_activeCell();
        // アクティブセルのある行を取得
        var activeRow = activeCell.get_row();
        // 行にある ID セルを取得
        var targetCell = activeRow.get_cellByColumnKey("ID");
        // ID セルの値を取得
        var retreivedValue = targetCell.get_value();

        document.getElementById("valueHolder").value = retreivedValue;
    }
</script>

 

実行結果

クリックしたボタンの配置されている行の ID セルの値を取得することができました。

WebDataGrid アクティブ化

 

オンラインリソース

WebDataGrid アクティブ化
http://jp.infragistics.com/help/aspnet/webdatagrid-activation

 

サンプル

サンプルのダウンロード(Infragistics ASP.NET 2016 vol.2 バージョン、C#)
WebDataGrid_Activation_CS.zip

(このサンプルは 16.2.20162.2013 バージョンで作成されました。)

XamDataGrid 列の表示順序を取得

XamDataGrid の列の表示順序を取得する方法をご紹介します。

XamDataGrid ではアプリケーション実行時に列の位置を左右で入れ替えたり、多段に組み替えることができます。 実行時の列の表示順序を取得するには、Field の ActualPosition.Column プロパティを利用します。

private void button_Click(object sender, RoutedEventArgs e)
{
    FieldCollection fields = xamDataGrid1.FieldLayouts[0].Fields;
    for (int index = 0; index < fields.Count; index++)
    {
        Console.WriteLine("列名:{0}  インデックス:{1}", fields[index].Name, fields[index].ActualPosition.Column);
    }
    Console.WriteLine(" --- ");
}

 

オンラインリソース

ActualPosition プロパティ
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.fielditem~actualposition


サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)XamDataGrid_ActualPosition_CS.zip

(このサンプルは 16.2.20162.1006 バージョンで作成されました。)

XamDataGrid セルのスタイルを状態に応じて変更

XamDataGrid のセルのスタイルを、行の状態に応じて変更してみます。

XamDataGrid の提供する CellBinding 機能を利用することで簡潔に実装することができます。

Title 列の CellBindings コレクションに、セルの背景色(CellValuePresenter.Foreground)と ViewModel の ForegroundColor プロパティをバインドします。

<igDP:XamDataGrid DataSource="{Binding Tasks}" Grid.Row="1">
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                <igDP:Field Name="ID" Label="ID"/>
                <igDP:Field Name="Title" Label="タスク">
                    <igDP:Field.CellBindings>
                        <igDP:CellBinding Property="Foreground"
                                  Target="CellValuePresenter"
                                  Binding="{Binding Path=DataItem.ForegroundColor}"/>
                    </igDP:Field.CellBindings>
                </igDP:Field>
                ...
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>


「完了」列の bool 値が false の行は、「タスク」列のセル文字が赤くスタイルされました。「全て完了!」ボタンをクリックすると、全行の IsCompleted プロパティが true に更新され、全てのタスクの前景色が黒に変わります。

XamDataGrid CellBinding

 

オンラインリソース

セル設定のデータ項目プロパティへのバインド (xamDataGrid)http://jp.infragistics.com/help/wpf/xamdatagrid-binding-cell-settings-data-item-properties

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)
XamDataGrid_CellBinding_CS.zip

(このサンプルは 16.2.20162.1006 バージョンで作成されました。)

XamDataGrid セルに任意のコントロールを埋め込む(テンプレートフィールド)

グリッドでの編集機能を考えたときに、エンドユーザーがどの項目を編集対象で、どの項目は表示対象であるかを表現することは操作感の向上につながります。ここでは XamDataGrid のテンプレートフィールドを利用して、エンドユーザーが見た目でどの項目を編集できるのかを表現してみます。

 

テンプレートフィールドを使わない場合

どの項目を編集できるかはマウス操作やキーボード操作が発生するまで見分けがつきません。

XamDataGrid

 

テンプレートフィールドを使った場合

「商品名」、「在庫」、「発注数」列が編集できることが所見で分かるようになりました。

XamDataGrid テンプレートフィールド

 

ではここからテンプレートフィールドの実装を行っていきます。

 

テンプレートフィールドの定義

データに紐づく列を XamDataGrid に表示する場合、FieldLayout.Fields コレクションに Field オブジェクトを定義するのが基本となりますが、テンプレートフィールドは TemplateField オブジェクトを定義していきます。

<igDP:XamDataGrid DataSource="{Binding Path=Data.Products}">
    <!--AutoGenerateFields を False とし、明示的に列を宣言-->
    <igDP:XamDataGrid.FieldLayoutSettings>
        <igDP:FieldLayoutSettings AutoGenerateFields="False" />
    </igDP:XamDataGrid.FieldLayoutSettings>
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                <igDP:Field Name="ProductID" Label="製品 ID"
                            AllowEdit="False" IsTabStop="False" Width="53"/>
                <!--テンプレートフィールド-->
                <igDP:TemplateField Name="ProductName" Label="製品名"
                                    Settings="{StaticResource FieldSetting}"
                                    DisplayTemplate="{StaticResource FieldDisplayTemplate}"
                                    EditTemplate="{StaticResource FieldEditorTemplate}"/>
                ...
                <!--テンプレートフィールド-->
                <igDP:TemplateField Name="UnitsInStock" Label="在庫" Width="80"
                                    Settings="{StaticResource FieldSetting}"
                                    DisplayTemplate="{StaticResource FieldDisplayTemplate}"
                                    EditTemplate="{StaticResource FieldEditorTemplate}"/>
                <!--テンプレートフィールド-->
                <igDP:TemplateField Name="UnitsOnOrder" Label="発注数" Width="80"
                                    Settings="{StaticResource FieldSetting}"
                                    DisplayTemplate="{StaticResource FieldDisplayTemplate}"
                                    EditTemplate="{StaticResource FieldEditorTemplate}"/>
                ...
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

 

Template の定義

テンプレートフィールドでは、「表示状態」と「編集状態」それぞれに対応する UI を定義することができます。「表示状態」は DisplayTemplate、「編集状態」は EditTemplate にそれぞれ DataTemplate を割り当てます。今回は下記の DataTemplate を利用しています。DisplayTemplate、EditTemplate 共に TextBox を使っているので、どちらが有効になっているかを判別するため EditTemplate で使われる FieldEditorTemplate では背景色にデフォルトとは異なる色を指定しています。

<Window.Resources>
    ...
    <!--表示用コントロール-->
    <DataTemplate x:Key="FieldDisplayTemplate">
        <TextBox Text="{igEditors:TemplateEditorValueBinding}" />
    </DataTemplate>
    <!--編集用エディタ-->
    <DataTemplate x:Key="FieldEditorTemplate">
        <TextBox Text="{igEditors:TemplateEditorValueBinding}" Background="#FFF2A5A5" />
    </DataTemplate>
</Window.Resources>

 

実行結果

「商品名」がコーラのセルにフォーカスを当てた状態です。他の TextBox とは異なる背景色となり、EditTemplate が表示されていることがわかります。

XamDataGrid テンプレートフィールド

 

オンラインリソース

テンプレート フィールドの構成
http://jp.infragistics.com/help/wpf/xamdatapresenter-configuring-template-field

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)XamDataGrid_TemplateField_CS.zip

(このサンプルは 16.2.20162.1006 バージョンで作成されました。)

XamDataGrid Field に ViewModel のデータをバインドする

XamDataGrid の列に ViewModel のデータをバインドしてみましょう。例えば、ViewModel 側に編集可否を制御するフラグデータを保持しておき、フラグの状態に応じて列単位のセル編集可否を制御するシナリオを考えてみます。

 

ViewModel のプロパティ

編集可否を制御するフラグ、AllowTitleEdit プロパティ(デフォルト値 true)と AllowDueEdit プロパティ(デフォルト値 false)を用意します。

class MainViewModel : NotificationObject
{
    ...

    private bool _allowTitleEdit;
    public bool AllowTitleEdit
    {
        get
        {
            return _allowTitleEdit;
        }
        set
        {
            _allowTitleEdit = value;
            OnPropertyChanged();
        }
    }

    private bool _allowDueEdit;
    public bool AllowDueEdit
    {
        get
        {
            return _allowDueEdit;
        }
        set
        {
            _allowDueEdit = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        ...

        #region 列編集可否

        this.AllowTitleEdit = true;
        this.AllowDueEdit = false;
        
        #endregion
    }
}

 

Window へ ViewModel を渡す

Window の DataContext に ViewModel を渡します。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // ViewModel を Window の DataContext へ割り当て
        MainViewModel vm = new MainViewModel();
        this.DataContext = vm;
    }
}

 

XAML 上での XamDataGrid の定義

XamDataGrid には 4 つの列を定義し、「タイトル」列、「期限」列の AllowEdit プロパティに先程の AllowTitleEdit プロパティ、AllowDueEdit プロパティをバインドします。Field のプロパティに ViewModel のデータをバインドする際は FieldBinding クラスを利用します。下記コードスニペットの 14 行目~ 18 行目をご覧ください。

<Window
        ...
        xmlns:igDP="http://infragistics.com/DataPresenter" x:Class="XamDataGrid_Field_AllowEdit.MainWindow"
        ...>
    <Grid>
        ...
        <igDP:XamDataGrid DataSource="{Binding Tasks}" Grid.Row="1">
            ...
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:FieldLayout.Fields>
                        <igDP:Field Name="ID" Label="ID"/>
                        
                        <!--FieldBinding を利用した場合-->
                        <igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{igDP:FieldBinding AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{igDP:FieldBinding AllowDueEdit}"/>

                        <!--2014 vol.1 以前の場合:代替案1-->
                        <!--<igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowDueEdit}"/>-->
                        
                        <!--2014 vol.1 以前の場合:代替案2-->
                        <!--<igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowDueEdit}"/>-->
                        
                        <igDP:Field Name="IsCompleted" Label="完了?"/>
                    </igDP:FieldLayout.Fields>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>
        ...
    </Grid>
</Window>

FieldBinding は 2014 vol.2 より提供される機能です。2014 vol.1 以前のバージョンを利用する場合、FieldBinding の代わりに Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowTitleEdit もしくは Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowTitleEdit として ViewModel のデータを参照します。上記コードスニペットの 20 行目~ 30 行目をご覧ください。

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)
XamDataGrid_Field_AllowEdit.zip

(このサンプルは 16.2.20162.1006 バージョンで作成されました。)

XamDataGrid エクセルライクなセルの直接編集(IME 入力)

XamDataGrid ではエクセルライクなセルの直接編集(IME 入力)をサポートしています。

FieldSettings 配下の IsAutoEditModeEnabled プロパティを True にすることでこの機能が有効になります。XamDataGrid ではデフォルトの動作として、セルクリック時に編集状態に入るようになっています。セルの直接編集ではクリック時にセルを選択するよう振る舞ってほしいので、CellClickAction プロパティに SelectCell を設定します。


XAML での実装

 

<igDP:XamDataGrid DataSource="{Binding Tasks}">
    ...
    <igDP:XamDataGrid.FieldSettings>
        <!--IsAutoEditModeEnabled を True にしてセルの直接編集を有効化-->
        <igDP:FieldSettings
            CellClickAction="SelectCell"
            IsAutoEditModeEnabled="True"/>
    </igDP:XamDataGrid.FieldSettings>
    ...
</igDP:XamDataGrid>

 

 

オンラインリソース

IsAutoEditModeEnabled プロパティ
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.fieldsettings~isautoeditmodeenabled

編集動作の構成 (xamDataPresenter)
http://jp.infragistics.com/help/wpf/xamdatapresenter-conf-editing

 

サンプル

サンプルのダウンロード(Infragistics WPF 2016 vol.2 バージョン、C#)
XamDataGrid_IME_DirectInput.zip

(このサンプルは 16.2.20162.1006 バージョンで作成されました。)

XamDataGrid レコードのドラッグアンドドロップ

XamDataGrid レコードのドラッグアンドドロップを実装してみましょう。XamDataGrid 単体ではドラッグアンドドロップの機能ありませんが、 Infragistics WPF に含まれる Infragistics Drag and Drop Framework を組み合わせることで実現することができます。

XamDataGrid のレコードは DataRecordPresenter として描画されており、ドラッグアンドドロップ機能を DataRecordPresenter に割り当てていきます。

Snoop を使って XamDataGrid を覗いてみます。DataRecordPresenter はここです。

image



実装の手順


1.DataRecordPresenter のテンプレートを取り込む

DataRecordPresenter のテンプレートをアプリケーション内に取り込み、ドラッグアンドドロップ機能を追加して上書きします。テンプレートは下記ファイルパスの DataPresenterAero_Express.xaml にあります。

C:\Program Files (x86)\Infragistics\2016.2\WPF\DefaultStyles\DataPresenter
→ DataPresenterAero_Express.xaml

 

2.取り込んだテンプレートのカスタマイズ

DataRecordPresenter の ContentPresenter(x:Name="PART_RecordContentSite")に DragDropManager を設定します。DragSource の IsDraggable を True にすることでレコードのドラッグができるようになります。また、DropTarget の IsDropTarget を True にすることでレコードのドロップができるようになります。

続いて、DragSource の Drop イベントをハンドルしてドラッグされたレコードとドロップされた位置を判定してレコード位置の制御を行います。DataRecordPresenter のテンプレートには DragDropBehavior(後述) を設定します。

ここまでの実装内容は下記コードスニペットの 11 – 27 行目と対応します。

<Style TargetType="{x:Type igDP:DataRecordPresenter}">
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type igDP:DataRecordPresenter}">
                <Custom:CardPanel x:Name="baseGrid" Background="{TemplateBinding Background}" RenderTransform="{TemplateBinding FixedNearElementTransform}">
                    <Border x:Name="addRowFooter" BorderBrush="DarkGray" BorderThickness="0,0,0,1" Background="{DynamicResource {ComponentResourceKey ResourceId=AddRowBackground, TypeInTargetAssembly={x:Type igDP:XamDataGrid}}}" HorizontalAlignment="Stretch" Height="Auto" Visibility="Collapsed" VerticalAlignment="Stretch" Width="Auto"/>
                    <Grid Margin="0" RenderTransform="{TemplateBinding ScrollableElementTransform}">
                        ...
                        <ContentPresenter x:Name="PART_RecordContentSite" ContentTemplate="{TemplateBinding RecordContentAreaTemplate}" Content="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="3" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="3" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <!--ドラッグアンドドロップの設定-->
                            <ig:DragDropManager.DragSource>
                                <ig:DragSource 
                                        IsDraggable="True"
                                        >
                                    <i:Interaction.Behaviors>
                                        <!--ビヘイビアの設定-->
                                        <behaviors:DragDropBehavior/>
                                    </i:Interaction.Behaviors>
                                </ig:DragSource>
                            </ig:DragDropManager.DragSource>

                            <ig:DragDropManager.DropTarget>
                                <ig:DropTarget
                                        IsDropTarget="True"/>
                            </ig:DragDropManager.DropTarget>
                            <!--ドラッグアンドドロップの設定-->
                        </ContentPresenter>
                        ...
                    </Grid>
                </Custom:CardPanel>
                ...
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    ...
</Style>

XAML での実装はここまでです。



3.DragDropBehavior の実装


次に、DragDropBehavior に DragSource のレコードがドロップされたタイミングで発生する Drop イベントを実装していきます。

public class DragDropBehavior : Behavior<DragSource>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.Drop += AssociatedObject_Drop;
    }

    private void AssociatedObject_Drop(object sender, DropEventArgs e)
    {
        System.Diagnostics.Debug.WriteLine("Drop");

        DragSource dragSource = sender as DragSource;
        FrameworkElement fe = dragSource.AssociatedObject as FrameworkElement;
        Record record = fe.DataContext as Record;

        // XamDataGrid の取得
        XamDataGrid presenter = record.DataPresenter as XamDataGrid;

        // ドラッグレコードの取得
        ContentPresenter source = e.DragSource as ContentPresenter;
        DataRecord sourceRecord = source.DataContext as DataRecord;
        int sourceIndex = sourceRecord.Index;

        // ドロップレコードの取得
        ContentPresenter target = e.DropTarget as ContentPresenter;
        DataRecord targetRecord = target.DataContext as DataRecord;
        int targetIndex = targetRecord.Index;

        var dc = presenter.DataContext;
        MainViewModel vm = dc as MainViewModel;

        // ドラッグレコードの位置変更
        vm.Tasks.Move(sourceIndex, targetIndex);
    }

    protected override void OnDetaching()
    {
        this.AssociatedObject.Drop -= AssociatedObject_Drop;
        base.OnDetaching();
    }
}


実行結果

レコードのドラッグアンドドロップができるようになりました。

image


サンプル

サンプルはこちらから。
XamDataGrid_Drag_Drop.zip

(本サンプルは16.2.20162.1006バージョンで作成されました)

オンラインリソース

DataRecordPresenter クラス
http://jp.infragistics.com/help/wpf/infragisticswpf4.datapresenter.v16.2~infragistics.windows.datapresenter.datarecordpresenter

Infragistics Drag and Drop Framework
http://jp.infragistics.com/help/wpf/drag-and-drop-framework

XamDataGrid FieldChooser に特定列を表示しない方法

XamDataGrid では列の表示/非表示を切り替えることのできる、FieldChooser 機能を提供しています。

こんな見た目です。左側に表示されている小さなウィンドウが FieldChooser です。FieldChooser 上でチェックを切り替えると XamDataGrid の列表示も同期して切り替わります。XamDataGrid FieldChooser

 

デフォルトでは全ての列を表示/非表示切り替えができるのですが、特定の列は非表示にされないようにしたいこともあります。このような時には、非表示にされたくない列のプロパティ変更を行うことで、FieldChooser から除外することができます。

例えば、ID 列を FieldChooser から除外するには FieldSettings の AllowHiding に “Never” を設定します。

<igDP:XamDataGrid DataSource="{Binding Tasks}">
    ...
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:Field Name="ID">
                <igDP:Field.Settings>
                    <!--ID 列は FieldChooser から除外する-->
                    <igDP:FieldSettings AllowHiding="Never"/>
                </igDP:Field.Settings>
            </igDP:Field>
            ...
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

 

 

実行結果

FieldChooser から ID 列を非表示にすることができました。
XamDataGrid FieldChooser

 

オンラインリソース

フィールドが非表示にされることを防止する
http://jp.infragistics.com/help/wpf/xamdatapresenter-prevent-fields-from-being-hidden



サンプル

サンプルはこちらから。
XamDataGrid_FieldChooser_HideField.zip

(本サンプルは16.2.20162.1006バージョンで作成されました)

AppStylist スタイル ライブラリのロード

Infragistics Windows Forms と Infragistics ASP.NET では素早く統一感のある外観を設定することのできる AppStylist というツールを提供しています。AppStylist に関しては こちらこちら を御覧ください。

今回は AppStylist で設定した外観を、Windows Forms アプリケーションに読み込む方法をご紹介します。

AppStylist では設定内容を、拡張子が isl の XML ファイルに保存します。スタイリングを行うフォームが読み込まれる前に、この isl ファイルを読み込みます。


C#

public Form1()
{
    InitializeComponent();

    // ISL ファイルのロード
    Infragistics.Win.AppStyling.StyleManager.Load("My StyleSet.isl");
}

 


VB.NET

Public Sub New()

    MyBase.New()
    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    ' ISL ファイルのロード
    Infragistics.Win.AppStyling.StyleManager.Load("My StyleSet.isl")

End Sub

 



実行結果

AppStylist ISL ファイル

 

サンプル

サンプルはこちら
AppStylist_ISL_Load_CS.zip
AppStylist_ISL_Load_VB.zip

(本サンプルは16.2.20162.1000バージョンで作成されました) 

オンラインリソース

スタイル ライブラリのロード
http://jp.infragistics.com/help/winforms/styling-guide-loading-a-stylelibrary