ダイアログウィンドウを持ったSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1Windowコントロールを使ったWebページの作成

2010/12/14 14:00

ポスト

ダウンロードサンプルソース（C#） (684.2 KB)
ダウンロードサンプルソース（VB） (691.1 KB)

　ComponentOne Studio for Silverlightに収録されているWindow for Silverlightは、ポップアップウィンドウを簡単に表示できるコントロールです。ウィンドウの状態も、モーダル／モードレスから選べるのでさまざまな用途に使うことができます。そこで今回は、このWindow for Silverlightを使って、メモとヘルプを表示するウィンドウを持ったSilverlightアプリケーションを作成してみました。

ポスト

はじめに

　Webページを作成する際、メインページの補助入力やちょっとしたアドバイスなどの表示に、ポップアップウィンドウを使いたいときもあります。しかし、Silverlightアプリケーションでポップアップウィンドウを使おうとすると、結構手間がかかります。

　ComponentOne Studio for Silverlightに収録されているWindow for Silverlightは、このポップアップウィンドウを簡単に表示できるコントロールです。ウィンドウの状態も、モーダル／モードレスから選べるのでさまざまな用途に使うことができます。

　そこで、今回はこのWindow for Silverlightを使って、メモとヘルプを表示するウィンドウを持ったSilverlightアプリケーションを作成してみました。

Webページから複数のモードレスウィンドウを起動。ウィンドウにはコントロールを配置可能

モーダルウィンドウとしても起動可能

対象読者

　Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎的な知識が必要になります。

必要な環境

　Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。また、Visual Studio 2008 Silverlight Tools 3.0をインストールしていることが必須条件です。

　なお、本プログラムはWindows Vista上で動作するVisual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0を使用して作成し、Internet Explorer 8で動作確認を行っています。

コンポーネントのインストール

　Window for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。

　インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

C1Windowコントロールについて

　Window for SilverlightのC1Windowコントロールは、Silverlightアプリケーション内にフローティングウィンドウを表示し、ウィンドウ内にコントロールを含むコンテンツを組み込むことができます。ウィンドウは、キャプションバーを使ってWebページ内をドラッグしたり、システムボタンを使ってウィンドウを最大化したり、元のサイズに戻したり、閉じたりすることができます。

　ウィンドウの表示状態はモーダルとモードレスの2通りから選べます。モードレスウィンドウは必要な数だけ開くことができ、ウィンドウを表示しながら呼び出し元のWebページを操作することができます。一方、モーダルウィンドウは一度に1つしか開けず、ウィンドウ表示中は呼び出し元のWebページの操作ができません。

　C1Windowコントロールを表示するためには、独立したXAMLファイル（Silverlightユーザーコントロール）を作成して、C1Windowのコンテンツ領域に配置します。そのため、通常のWebページと同様にウィンドウ内のコンテンツをレイアウトすることができるので、テキストボックスやコンボボックス、ボタンなどのコントロールを組み込んで使うことができます。

　C1Windowは、ヘッダーとコンテンツの2つの領域に分かれます。ヘッダー領域には、ウィンドウタイトルが表示でき、デフォルトでは［最小化］［最大化］［閉じる］の3つのボタンが表示されます。

ウィンドウはヘッダーとコンテンツの2つの領域がある

デフォルトでは［最小化］［最大化］［閉じる］の3つのボタンが表示される

　なお、［最小化］［最大化］［閉じる］のボタンは、それぞれ次のプロパティで非表示にすることができます。

ShowMinimizeButton
ShowMaximizeButton
ShowCloseButton

　ウィンドウをWebページのどこに表示するのか、表示位置を「HorizontalAlignment」と「VerticalAlignment」プロパティで設定できます。また、CenterOnScreenメソッドを使えば、ページの中央に配置することも可能です。

　ウィンドウのサイズは、「Width」プロパティと「Height」プロパティで指定します。ウィンドウの表示時の状態は、デフォルトではフロート状態になっていますが、「WindowState」プロパティを使うと、最大化・最小化を指定できます。設定値は次の3つです。

Floating
Maximized
Minimized

　なお、サイズ変更を禁止したいときは「IsResizable」プロパティを使用します。

　ヘッダー領域は、フォントや背景色などを細かく指定できます。下記は、プロパティの一覧です。

プロパティ	説明
Header	ヘッダーを取得／設定
HeaderBackground	ヘッダーの背景ブラシを取得／設定
HeaderFontFamily	ヘッダーのフォントファミリを取得／設定
HeaderFontSize	ヘッダーのフォントサイズを取得／設定
HeaderFontStretch	ヘッダーのフォントストレッチを取得／設定
HeaderFontStyle	ヘッダーのフォントスタイルを取得／設定
HeaderFontWeight	ヘッダーのフォントウェイトを取得／設定
HeaderForeground	ヘッダーの前景ブラシを取得／設定
HeaderHorizontalContentAlignment	ヘッダーのHorizontalContentAlignmentを取得／設定
HeaderPadding	ヘッダーのパディングを取得／設定
HeaderTemplate	ヘッダーの表示に使用されるデータテンプレートを取得／設定
HeaderVerticalContentAlignment	ヘッダーのVerticalContentAlignmentを取得／設定

作成するWebページの構成

　では、さっそくWebページを作成してみましょう。メインのページは、グリッドでテキストブロック1つとボタンを2つ配置しただけのとてもシンプルな構成です。グリッドは、背景をグラデーションで塗りつぶします。

コントロールのレイアウト

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選んで「テンプレート」から［Silverlightアプリケーション］を選択します。

［Silverlightアプリケーション］を選択
「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから［ASP.NET Webサイト］を選びます。

リストから［ASP.NET Webサイト］を選ぶ
プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

モードレスウィンドウの作成

　では、早速C1Windowコントロールを使ってみましょう。最初は、モードレスウィンドウとTextBoxを使って、簡単なメモを入力できるポップアップウィンドウを作成します。

メインページの作成

　まず、メインページとなる「MainPage.xaml」を作成します。グリッドは行列の追加はせずにそのままで、BackgroundプロパティにLinearGradientBrushをセットし、線形グラデーションで塗りつぶします。

<Grid x:Name="LayoutRoot">
      <Grid.Background>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
              <GradientStop Color="Gold" Offset="0.0" />
              <GradientStop Color="LemonChiffon" Offset="1.0" />
          </LinearGradientBrush>
      </Grid.Background>

　次に、スタックパネルでテキストブロックとボタン2つを配置します。ボタンは、イベントハンドラを使うので、名前を付けてClickイベントハンドラを作成します。

    <StackPanel VerticalAlignment="Center">
        <TextBlock Text="C1Windowのテストページ" FontSize="16" Foreground="Chocolate" 
                   HorizontalAlignment="Center" />
        <Button Click="Button_Click"  Width="200" Height="50" Content="モードレスウィンドウでメモを開く" />
        <Button Click="Button_Click_1"  Width="200" Height="50" Content="モーダルウィンドウでヘルプを開く" />
    </StackPanel>

</Grid>

C1Windowコントロールの作成方法

　C1Windowコントロールは、ページ上のどの要素の子にもならず、独立したユーザーコントロールとして作成します。従って、メインページにC1Windowコントロールを配置するのではなく、C1Windowオブジェクトをルート要素とするXAMLファイルを作成します。

　新しいC1Windowコントロールを持ったウィンドウを作成するために、まずは、ソリューションエクスプローラでプロジェクトを右クリックし、［追加］‐［新しい項目］オプションを選択します。

［新しい項目］オプションを選択する

　テンプレートから［Silverlightユーザーコントロール］を選択し、新しいコントロールの名前を「popwindow」に変更します。

テンプレートから［Silverlightユーザーコントロール］を選択する

　すると、プロジェクトに新しいXAMLファイルが追加されます。このXAMLファイルのコードをみると、コンストラクタを持った新しいクラスが作成されています。

Visual Basic

Partial Public Class popwindow
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

End Class

namespace sl_c1window_cs
{
    public partial class popwindow : UserControl
    {
        public popwindow()
        {
            InitializeComponent();
        }
    }
}

　しかし、よく見ると「UserControl」クラスからの継承になっているので、このままではC1Windowクラスのメンバは使えません。そこで、このクラスをC1Windowクラスに結びつけるコードの作成が必要になります。なお、以降さまざまなファイルを操作しますので、混乱しないようにしてください。

　プロジェクトに、「C1.Silverlight」への参照を追加します。

「C1.Silverlight」への参照を追加する

モードレス表示のメモウィンドウの作成

　続いて、この「popwindow.xaml」をメモウィンドウとしてポップアップするようにします。

　まず、「popwindow.xaml」にTextBoxを追加します。テキストボックスは、複数行編集ができるように、AcceptsReturnプロパティを「True」にして、Backgroundプロパティを「Lavender」にします。

popwindow.xamlのXAMLコード

<UserControl x:Class="sl_c1window_cs.popwindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        
        <TextBox AcceptsReturn="True" Background="Lavender"></TextBox>
    </Grid>
</UserControl>

　次に、C1Windowコントロールとpopwindowクラスを結合します。作り方は、まずC1Windowクラスのコンストラクタでオブジェクトを作成し、各プロパティを設定して、Contentプロパティにpopwindowクラスのオブジェクトへの参照を代入します。

　「MainPage.xaml」のコードウィンドウを表示し、「モードレスウィンドウでメモを開く」ボタンのClickイベントハンドラの処理を作成します。「C1.Silverlight」名前空間への参照を設定してから、C1Windowクラスのインスタンスを作成します。

Visual Basic

Imports C1.Silverlight

Partial Public Class MainPage
    Inherits UserControl

    Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim window As C1Window = New C1Window()

using C1.Silverlight;

namespace sl_c1window_cs
{
    public partial class MainPage : UserControl
    {
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var window = new C1Window();

　C1WindowクラスのHeaderプロパティで、ウィンドウのタイトルを設定します。そのまま文字列を設定すれば、それがウィンドウタイトルになります。また、HeaderBackgroundプロパティを使うと、ヘッダー部を塗りつぶすことができます。塗りつぶしには、Brushオブジェクトをプロパティに設定します。

　メモをWebページのどこに配置するのかを指定するには、「CenterOnScreen」メソッドを使うことができます。このメソッドを指定することで、Webページの中央に配置されます。また、「VerticalAlignment」「HorizontalAlignment」プロパティを使えば、ページ内の上下左右の位置を指定できます。ここでは、ページの左上にポップアップするように設定します。

Visual Basic

'window.CenterOnScreen()
window.Header = "メモ"
window.HeaderBackground = New SolidColorBrush(Colors.Blue)
window.VerticalAlignment = VerticalAlignment.Top
window.HorizontalAlignment = HorizontalAlignment.Left

//window.CenterOnScreen();
window.Header = "メモ";
window.HeaderBackground = new SolidColorBrush(Colors.Blue);
window.VerticalAlignment = VerticalAlignment.Top;
window.HorizontalAlignment = HorizontalAlignment.Left;

　次に、Contentプロパティにpopwindowクラスのインスタンスを作成し、代入します。これでpopwindowクラスはC1Windowとして表示されます。あとは、Showメソッドを実行すると、C1Windowコントロールはモードレスウィンドウで表示されます。

Visual Basic

Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim window As C1Window = New C1Window()

    'window.CenterOnScreen()
    window.Header = "メモ"
    window.HeaderBackground = New SolidColorBrush(Colors.Blue)
    window.VerticalAlignment = VerticalAlignment.Top
    window.HorizontalAlignment = HorizontalAlignment.Left

    window.Content = New popwindow()
    window.Show()

End Sub

private void Button_Click(object sender, RoutedEventArgs e)
{
    var window = new C1Window();

    //window.CenterOnScreen();
    window.Header = "メモ";
    window.HeaderBackground = new SolidColorBrush(Colors.Blue);
    window.VerticalAlignment = VerticalAlignment.Top;
    window.HorizontalAlignment = HorizontalAlignment.Left;

    window.Content = new popwindow();
    window.Show();
}

　実際にプロジェクトを実行して［モードレスウィンドウでメモを開く］ボタンを押すと、「メモ」と書かれたウィンドウがポップアップし、テキストボックスに入力することができます。

　メモウィンドウは、サイズ変更やページ内の移動が可能です。［閉じる］ボタンを押すことでウィンドウを閉じることができます。また、モードレスウィンドウは、いくつも開くことができ、呼び出し側のWebページを操作することも可能です。

メモウィンドウはページの左上にポップアップする

サイズ変更、移動が可能

複数のメモウィンドウを表示可能

モーダル表示のヘルプウィンドウの作成

　次に、モーダルで表示するヘルプウィンドウを作成します。

　まず、プロジェクトにもう1つC1Windowオブジェクトをルート要素とするXAMLファイルを追加します。追加の方法はメモウィンドウと同じです。ファイル名は「helpwindow」にします。

ファイル名を「helpwindow」にする

　XAMLファイルが追加されたら、ウィンドウ内をレイアウトします。テキストブロックで文字列を入れ、イメージコントロールでロゴ画像を表示するようにします。プロジェクトには、ロゴ画像を追加しておいてください。

　スタックパネルをグリッドの中に入れ、そこにコントロールを並べていきます。また、モードレスウィンドウと区別できるように、グリッドの背景色を変えておきます。

helpwindow.xamlのXAMLコード

<UserControl x:Class="sl_c1window_vb.helpwindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" 
    Width="400" Height="300">
    
    
    <Grid x:Name="LayoutRoot" Background="PeachPuff">
        <StackPanel>
            <TextBlock Text="C1Windowコントロールは、Silverlight プラグイン内のフローティングウィンドウにコンテンツを表示します。"
                            TextWrapping="Wrap"></TextBlock>
            <TextBlock Text="C1Window オブジェクトは、ページ上のどの要素の子でもありません。"
                            TextWrapping="Wrap"></TextBlock>
            <TextBlock Text="このため、これらのオブジェクトは、C1Window オブジェクトをルート要素とする個別のXAML ファイルで定義されます。"
                            TextWrapping="Wrap"></TextBlock>
            <TextBlock Text="新しい C1Window オブジェクトを作成するには、次の手順に従います。"
                            TextWrapping="Wrap"></TextBlock>
            <TextBlock Text="1.Visual Studio のプロジェクトエクスプローラで、プロジェクトを右クリックし、［追加］→［新しい項目］オプションを選択します。"
                            TextWrapping="Wrap" Foreground="Navy"></TextBlock>
            <TextBlock Text="2.［Silverlight ユーザーコントロール］オプションを選択し、新しいコントロールの名前を「MyWindow」と指定します。"
                            TextWrapping="Wrap" Foreground="Navy"></TextBlock>
            <TextBlock Text="キャプションバーを使ってウィンドウをドラッグしたり、システムボタンを使ってウィンドウを最大化、元のサイズに戻す、または閉じることができます。"
                            TextWrapping="Wrap" Foreground="Navy"></TextBlock>
            <TextBlock Text="モードレスウィンドウは必要な数だけ開くことができますが、モーダルウィンドウは一度に1つしか開けません。"
                            TextWrapping="Wrap" Foreground="Navy"></TextBlock>
        
            <Image Source="logo.jpg" Stretch="None"></Image>
        
        </StackPanel>

    </Grid>
</UserControl>

　「popwindow.xaml」と同様、ビハインドコードには新しく「helpwindow」というクラスが作成されています。

Visual Basic

Partial Public Class helpwindow
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

End Class

namespace sl_c1window_cs
{
    public partial class helpwindow : UserControl
    {
        public helpwindow()
        {
            InitializeComponent();
        }
    }
}

　「MainPage.xaml」のコードウィンドウに移動し、2つ目のボタン［モーダルウィンドウでヘルプを開く］のClickイベントハンドラに処理を記述します。

　ウィンドウの設定は、メモウィンドウとほとんど同じで、ウィンドウタイトルやポップアップの位置を設定します。そして、Contentプロパティに、helpwindowクラスのインスタンスを代入します。今度は、モーダルで起動するので、「ShowModal」メソッドを使ってC1Windowコントロールを表示します。

　また、モーダルで起動した際に、ユーザーに呼び出し元のWebページが操作できないことを知らせるために、呼び出し元のWebページをグレー表示にしておきます。これには、ModalBackgroundプロパティを使い、Brushクラスで色を設定します。なお、ここではSolidColorBrushを作成し、色の作成はColorクラスのFromArgbメソッドを使って、アルファチャネル値で透明度を設定して塗りつぶしています。

Visual Basic

Private Sub Button_Click_1(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim window2 As C1Window = New C1Window()

    'window2.CenterOnScreen()
    window2.Header = "ヘルプ"
    window2.HeaderBackground = New SolidColorBrush(Colors.Orange)
    window2.VerticalAlignment = VerticalAlignment.Top
    window2.HorizontalAlignment = HorizontalAlignment.Left
    window2.Content = New helpwindow()


    window2.ModalBackground = New SolidColorBrush(Color.FromArgb(100, 10, 45, 80))
    window2.ShowModal()

private void Button_Click_1(object sender, RoutedEventArgs e)
{
var window2 = new C1Window();

//window2.CenterOnScreen();
window2.Header = "ヘルプ";
window2.HeaderBackground = new SolidColorBrush(Colors.Orange);
window2.VerticalAlignment = VerticalAlignment.Top;
window2.HorizontalAlignment = HorizontalAlignment.Left;
window2.Content = new helpwindow();


window2.ModalBackground = new SolidColorBrush(Color.FromArgb(100, 10, 45, 80));
window2.ShowModal();
}

　実際にプロジェクトを実行し、［モーダルウィンドウでヘルプを開く］ボタンを押すと、「ヘルプ」と書かれたウィンドウがポップアップします。呼び出し元のWebページは暗い色になり、ユーザーはヘルプウィンドウを閉じるまで操作ができなくなります。

　モーダルウィンドウは、モードレスウィンドウと同様サイズ変更や移動、最大化・最小化が可能ですが、複数のウィンド表示はできません。

モーダルでヘルプウィンドウが表示され呼び出し元のWebページは操作できない