LightSwitchの画面項目にSilverlightユーザーコントロールを追加する

作者 茂田 裕行 - (株)ネクストスケープ 投稿日 2011年9月5日

セクション

エンタープライズ・アーキテクチャ,

デベロップメント

トピック

C# ,

Visual Basic.NET ,

Silverlight ,

.NETフレームワーク ,

IDE ,

.NET ,

RIA ,

プログラミング ,

.NET Framework Programming

共有 |

Visual Studio LightSwitch 2011（以下、LightSwitch）は、前稿にて紹介した通り、素早く簡単に業務用アプリケーションを作成できる開発環境だ。コードをほとんど書くことなく多機能な画面を作れるメリットがある反面、標準機能を超える機能を実現したい時に方法がわからずに悩んでしまうことがある。そこで本稿では、LightSwitchの標準部品ではないUIコントロールを作成して組み込む方法を紹介する。

LightSwitchではSilverlightのユーザーコントロールを画面部品として利用できる。例として「スライダーでテキストボックスの値を変更する部品」を作成しよう。（※ここで説明する機能はVisual Studio 2010 Professional以上で利用できる）。本稿では、その手順について説明する。完成後の画面イメージは図1の通りだ。

 
図1:完成画面

手順1：
LightSwitchのプロジェクトを作成したら、まず、テーブルを追加する。ここでは、テーブルに「Table1」という名前のテーブルを作成した。「Value」というInteger型の列を追加し、この値をSliderで変更できるようにする。

 
図2:テーブルを作成したところ

手順2:
ソリューションにSilverlightのプロジェクトを追加する。Visual Studioの「ファイル」メニューを開いて「追加」→「新しいプロジェクト」を選択すると、「新しいプロジェクトの追加」画面が現れる。プロジェクトのテンプレートで「Silverlight クラス ライブラリ」を選択しプロジェクトに名前をつけてOKボタンを押す。作成したプロジェクトに最初からあるClass1.csは削除する。

図3:Silverlightプロジェクト作成画面

手順3:
ユーザーコントロールを記述するためのXAMLを追加する。Silverlightプロジェクトから「新しい項目」メニューで「Silverlight ユーザー コントロール」を選択する。ここでは、名前を”IntegerSlider.xaml”としておく。

 
図4:Silverlightユーザーコントロール作成画面

手順4:
XAMLを編集してスライダーのコントロールを作成する。SliderタグのMinimum, Maximum属性でスライダーの最小値、最大値を設定している。SliderタグのValue属性とLightSwitch上のデータソース「Table1」の列「Value」をバインドしている。XAMLの追加が終わったら、一旦ビルドを行っておこう。

<UserControl x:Class="CustomControls.IntegerSlider"
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">

<Grid x:Name="LayoutRoot" Background="White">
<Slider x:Name="intSlider" Width="300" Height="20"
Minimum="0" Maximum="100" Value="{Binding Path=Screen.Table1.Value, Mode=TwoWay}" />
</Grid>
</UserControl>

手順5:
上記で作成したユーザーコントロールを、LightSwitchの画面に組み込む。ソリューションエクスプローラーでデータソース「Table1」の詳細画面を新規作成すると、デザイナー画面が表示される。「追加」メニューから「新しいカスタム コントロール」を選択する。

図5:詳細画面のデザイナー

「カスタム コントロールの追加」画面で「参照の追加」ボタンを押し、アセンブリ参照するプロジェクトを選択する。上記でXAMLを編集したSilverlightプロジェクトを選択して「OK」を押す。「参照の追加」画面のコントロールの一覧から、先程作成した”IntegerSlider”を選択し、OKボタンを押すと、スライダーが画面に追加される。

 
図6:「カスタム コントロールの追加」画面

 
図7:「参照の追加」画面

以上で実装は完了である。F5キーを押し実行すると、図1のように、スライダーによってテキストボックスの値が変わる画面が表示されることが分かる。

手順4でSliderタグのバインディングモードをTwoWayに設定しているため、スライダーのつまみを動かすと、「Table1」エンティティの「Value」プロパティ値が変更される。テキストボックスもまた、エンティティの「Value」プロパティと自動でバインドされているため、スライダーのつまみを移動させただけでテキストボックスの値が変わる。

バインディングの設定は、上記で説明した方法以外に、手順5の「新しいカスタムコントロールのデータの指定」欄で指定する方法と、コードビハインドで指定する方法の2通りある。スライダーやテキストボックスの内容などの、データの状態を現す部分だけでなく、文字色やテキストサイズなど画面部品の表示に関わる部分も変更可能なので、いろいろ試すといいだろう。

LihgtSwtichの機能拡張方法としては、LightSwitch Extensibility Toolkitを使ったり、サードパーティ製のコントロールを購入するなど様々な方法があるが、本稿で紹介したSilverlightのコントロールを作成する方法は、Silverlightの知識があれば簡単に拡張できるメリットがある。LightSwitchを用いたシステムでカスタマイズする必要があれば、一度検討してみると良いだろう。