デスクトップアプリ(WPF)にRevealを組み込む! Getting Started!

# はじめに

## Revealとは
[Reveal  ダッシュボードをアプリケーションに組み込み](https://www.revealbi.io/jp)
> Reveal Embeddedは、アプリケーションに組み込み可能なデータ可視化SDKです。シンプルな価格体系、組み込みの容易さでアプリケーションの価値を最大限向上することができます。

## この記事は
Revealをデスクトップアプリケーション(WPF)に組み込むための手順を、空のアプリケーション作成して組み込むまでを紹介します！


# 前提
・Reveal SDKがインストールされていること。

下記ページより入手できます。
[ダッシュボードをアプリケーションに組み込み | データ可視化 | Reveal](https://www.revealbi.io/jp)

他、参考ページ
[データ可視化SDK(Reveal SDK) (Web/デスクトップ同梱)のダウンロードからインストールまで](https://qiita.com/furugen/items/28aaac8cff334676c345)


# サンプルアプリケーションの作成

まずは、空のアプリケーションから作成していきます。


## Visual Studioを開きます。

## ファイル > 新規作成 > プロジェクト を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/2190a784-2370-77c6-1cf2-84c1d6ba6937.png)


## Windowsデスクトップ > WPF アプリ(.NET Framework) > プロジェクトファイル名を入力　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/d902d404-3ad0-9904-24d0-69ee864689f9.png)


## 空のアプリケーションが作成されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/e637012e-541b-bd1b-ad8a-3b75baa6bc82.png)


# Nuget による Reveal の導入
続いて、作成した空のアプリケーションにRevealを組み込んでいきます。

## ソリューションを右クリック > ソリューションの Nuget パッケージの管理 を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/319c3d98-02b7-995d-4994-ccf827b9c23a.png)


## Reveal の Nuget 設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/03bd8c90-292d-59b5-b2eb-9f2f0b4923db.png)


## Nuget の追加ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/90cf72ca-0434-210c-7093-a80b53a39b55.png)


## Reveal SDK の名前とソースを入力して、OK をクリック

名前に"Reveal SDK",　ソースには"C:\Users\Public\Documents\Infragistics\NuGet"を設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/a0713b58-a267-562a-bceb-afff93799476.png)

## Reveal SDK の Nuget をインストール
下記の順に操作し、"インストール"をクリックします。
 パッケージソース ... 先ほど追加した"Reveal SDK"を選択
 フィルタ ... "Reveal"で検索 
 選択するNuget .. "Infragistics.Reveal.Sdk.Wpf.Trial"

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/09deeaff-b4dd-08f2-b40e-593290784b58.png)

ライセンスの同意を求める画面が表示されますので、ご確認のうえ、"同意する"を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/a2a2a443-2f9d-b3f8-556f-fc11c05dfb48.png)

# Reveal の表示
## MainWindow.xaml に Reveal の名前空間を追加

```xml

xmlns:sdk="clr-namespace:Infragistics.Sdk;assembly=RVUI.WPF"
```

## Reveal View を配置。

```xml:MainWindow.xaml

<Window x:Class="DesktopDemo.MainWindow"
        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:local="clr-namespace:DesktopDemo"
        xmlns:sdk="clr-namespace:Infragistics.Sdk;assembly=RVUI.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <sdk:RevealView  x:Name="revealView" />
    </Grid>
</Window>


```


## 最小設定を C# にて実施

```c#

using Infragistics.Sdk;
using System.Windows;

namespace DesktopDemo
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Reveal 初期設定用コード
            RevealSettings revealSettings = new RevealSettings(null);
            revealView.Settings = revealSettings;

        }
    }
}
```



## Revealが表示されることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/666f0554-194a-6a6b-a6f3-20c669d7f57a.png)



# まとめ
この記事では、Revealをデスクトップアプリ(WPF)で表示するまでの手順を紹介しました。
但し、データソースはまだ設定していないため、Revealに表示するデータソースを設定する必要があります。

次回は、Reveal(デスクトップ/WPF)にデータソースを設定する手順を紹介します。