はじめに
ComponentOne Studio for Silverlightに収録されているRangeSlider for Silverlightは、Windowsフォームでいうスライダーコントロールに似たコントロールで、サム（動かす“つまみ”の部分）を移動させるだけで数値を入力することができるコントロールです。しかも、最小値と最大値を2つのサムで指定して範囲を設定するといったことも可能です。
今回は、このRangeSlider for Silverlightを使って、Webページ上に配置したImageコントロールのサイズを拡大・縮小するSilverlightアプリケーションを作成してみました。
対象読者
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で動作確認を行っています。
コンポーネントのインストール
RangeSlider for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。
インストーラは、グレープシティのWebページからダウンロードできます。製品ページの［申込フォーム］をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
RangeSlider for SilverlightのC1RangeSliderコントロールについて
C1RangeSliderコントロールは標準のスライダコントロールを拡張して、2つのサムを使った数値入力を可能にするコントロールです。そのため、単一の値ではなく数値を範囲で取得することもできます。
また、使用しているアプリケーションに合わせて、水平方向と垂直方向どちらにも設定することができます。C1RangeSliderコントロールは、次のプロパティを使用して動作範囲や値の取得を行います。
| プロパティ | 説明 |
|---|---|
| Delay | RepeatButtons（LowerValueサムの左側とUpperValueサムの右側）が押されてからクリック動作のリピートを開始するまで待機する時間をミリ秒単位で取得または設定します。 |
| Interval | クリック動作のリピートが開始された後のリピート間隔をミリ秒単位で取得または設定します。 |
| LowerValue | 範囲コントロールの現在の小さい方の値を取得または設定します。 |
| Maximum | 範囲コントロールの設定可能な最大値を取得または設定します。 |
| Minimum | 範囲コントロールの設定可能な最小値を取得または設定します。 |
| Orientation | C1RangeSliderの方向（水平または垂直）。 |
| UpperValue | 範囲コントロールの現在の大きい方の値を取得または設定します。 |
| ValueChange | RangeBaseコントロールのUpperValue／LowerValueに対して加算または減算する値を取得または設定します。 |
C1RangeSliderコントロールには、値の範囲の選択に使用する2つのサムがあります。UpperValue（垂直方向では上、水平方向では右）とLowerValue（垂直方向では下、水平方向では左）のサムは、スライダトラックに沿って移動します。デフォルトでは、UpperValueプロパティは「100」に、LowerValueプロパティは「0」に設定されています。
値の範囲は、UpperValueとLowerValueの差によって決定されます。
また、ValueChangeプロパティは、トラックをクリックしたときに、UpperValueまたはLowerValueのサムがスライダトラックに沿ってどの程度移動するかを決定します。ただし、トラックのUpperValueとLowerValueのサムの間（範囲内）をクリックした場合、サムは移動しません。
なお、LowerValueプロパティはMinimumプロパティより小さくできず、UpperValueプロパティはMaximumプロパティより大きくできません。
ユーザーが2つのサムをクリックすると、UpperValueにはUpperValueChangedイベントが、LowerValueにはLowerValueChangedイベントが発生します。イベントを使った処理を組み立てる場合は、これらのイベントハンドラに処理を記述します。
Webページの作成
では、さっそくWebページを作成してみましょう。グリッドは、背景色をグラデーションで塗りつぶし、行列を設定します。まず、3行のグリッドを作成し、1行目と2行目を2列に分割します。
1行目にはそれぞれImageコントロールを、2行目にはTextBlockコントロールを各列に配置します。3行目には、テーマの「C1ThemeRainierOrange」を設定し、その中にC1RangeSliderコントロールを配置します。それぞれのコントロールは、Effectプロパティに「DropShadowEffect」を設定し、影付きの表示にします。
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のコードが表示されます。
グリッドの設定
グリッドを作成していきます。行ごとに列の設定が違うので、Gridコントロールのネストを作成します。
まず、最初にRowDefinitionsで行を3行設定します。次に、列を設定したい行を指定しColumnDefinitionsを記述します。また、グリッドの背景色をグラデーションで塗りつぶすので、LinearGradientBrushブラシを作成し、Backgroundプロパティに設定します。
<Grid x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="PaleTurquoise" Offset="0.0" />
<GradientStop Color="RoyalBlue" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
<Grid Grid.Row="0" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="1" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Grid>
Imageコントロールの作成
次に、ツールボックスの「Imageコントロールアイコン」をダブルクリックして、Imageコントロールを2つ作成します。作成する場所は、グリッドの最初の行を設定している<Grid Grid.Row="0"></Grid>の中です。
コードから参照するので名前を付け、グリッドを配置する位置を指定します。設定する画像「sample.jpg」と「sample2.jpg」はSourceプロパティで指定し、プロジェクトに組み込んでおきます。コントロールのサイズは、Width・Heightプロパティで「450」に設定し、Effectプロパティに「DropShadowEffect」を設定します。
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="image1" Grid.Row="0" Grid.Column="0" Source="sample.jpg"
Width="350" Height="350">
<Image.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</Image.Effect>
</Image>
<Image x:Name="image2" Grid.Row="0" Grid.Column="1" Source="sample2.jpg"
Width="450" Height="450">
<Image.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</Image.Effect>
</Image>
</Grid>
C1RangeSliderコントロールの作成
今度は、TextBlockコントロールとC1RangeSliderコントロールを作成します。
TextBlockコントロールの作成
2行目のグリッドにTextBlockコントロールを2つ作成します。このコントロールは、C1RangeSliderコントロールのサムの位置（値）を表示させるのに使用します。
コードから操作するので、名前を付け、Effectプロパティでドロップシャドウを付けておきます。記述する場所は、<Grid Grid.Row="1"></Grid>の中です。
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textblock1" Grid.Row="1" Grid.Column="0"
Text="Range = 1.0000000000000"
HorizontalAlignment="Center" Margin="5"
Foreground="DarkOrange" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect Color="Black" Opacity="50" BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
<TextBlock x:Name="textblock2" Grid.Row="1" Grid.Column="1"
Text="Range = 1.5000000000000"
HorizontalAlignment="Center" Margin="5"
Foreground="DarkOrange" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect Color="Black" Opacity="50" BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</Grid>
C1RangeSliderコントロールの作成
ツールボックスにある「C1ThemeRainierOrange」アイコンをダブルクリックして、続いて</Grid>の下にテーマを作成します。
<my:C1ThemeRainierOrange VerticalAlignment="Top" > </my:C1ThemeRainierOrange>
このテーマの中に、C1RangeSliderコントロールを作成することで、テーマ「C1ThemeRainierOrange」がC1RangeSliderコントロールに適用されます。テーマのタグの間にカーソルを置き、ツールボックスにあるC1RangeSliderコントロールのアイコンをダブルクリックします。
このC1RangeSliderコントロールは水平方向に作成し、Imageコントロールを0.1倍～3倍の間で0.1倍刻みで拡大・縮小するように動作させたいので、次のプロパティを設定します。
Orientation="Horizontal" Maximum="3" Minimum="0.1" ValueChange="0.1" Margin="5" UpperValue="1.5" LowerValue="1" Width="400" Opacity="0.8"
まず、「Orientation」プロパティでコントロールの向きを水平にします。そして、動作範囲を「Maximum」「Minimum」プロパティで設定します。サムの動作は0.1単位にしたいので、「ValueChange」プロパティを「0.1」にします。
Webページ時のサムの位置は、「UpperValue」「LowerValue」プロパティで設定します。ここでは、「UpperValue」を「1.5」に、「LowerValue」を「1」指定しておきます。
<c1:C1RangeSlider x:Name="c1rs1" Width="400" Margin="5" Orientation="Horizontal"
UpperValue="1.5" LowerValue="1" Maximum="3" Minimum="0.1"
ValueChange="0.1" Opacity="0.8"
そして、「UpperValue」「LowerValue」サムのイベントハンドラを作成します。それぞれのサムが動作すると、コントロールには「UpperValueChanged」「LowerValueChanged」イベントが発生するので、このイベントに対するイベントハンドラを作成しておきます。また、Effectプロパティでドロップシャドウを設定します。
UpperValueChanged="c1rs1_UpperValueChanged"
LowerValueChanged="c1rs1_LowerValueChanged">
<c1:C1RangeSlider.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</c1:C1RangeSlider.Effect>
</c1:C1RangeSlider >
<Grid x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="PaleTurquoise" Offset="0.0" />
<GradientStop Color="RoyalBlue" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
<Grid Grid.Row="0" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image x:Name="image1" Grid.Row="0" Grid.Column="0" Source="sample.jpg"
Width="350" Height="350">
<Image.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</Image.Effect>
</Image>
<Image x:Name="image2" Grid.Row="0" Grid.Column="1" Source="sample2.jpg"
Width="450" Height="450">
<Image.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</Image.Effect>
</Image>
</Grid>
<Grid Grid.Row="1" ShowGridLines="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textblock1" Grid.Row="1" Grid.Column="0"
Text="Range = 1.0000000000000"
HorizontalAlignment="Center" Margin="5"
Foreground="DarkOrange" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect Color="Black" Opacity="50" BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
<TextBlock x:Name="textblock2" Grid.Row="1" Grid.Column="1"
Text="Range = 1.5000000000000"
HorizontalAlignment="Center" Margin="5"
Foreground="DarkOrange" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect Color="Black" Opacity="50" BlurRadius="10" />
</TextBlock.Effect>
</TextBlock>
</Grid>
<my:C1ThemeRainierOrange VerticalAlignment="Top" Grid.Row="2" >
<c1:C1RangeSlider x:Name="c1rs1" Width="400" Margin="5" Orientation="Horizontal"
UpperValue="1.5" LowerValue="1" Maximum="3" Minimum="0.1"
ValueChange="0.1" Opacity="0.8"
UpperValueChanged="c1rs1_UpperValueChanged"
LowerValueChanged="c1rs1_LowerValueChanged">
<c1:C1RangeSlider.Effect>
<DropShadowEffect Color="Black" Opacity="50" />
</c1:C1RangeSlider.Effect>
</c1:C1RangeSlider >
</my:C1ThemeRainierOrange>
</Grid>
イベントハンドラの処理
今度は、C1RangeSliderコントロールが操作された時の処理を作成します。この処理は、2つのイベントハンドラで行い、「UpperValueChanged」イベントハンドラでは右のImageコントロール（Image2）を、「LowerValueChanged」イベントハンドラでは左のImageコントロール（Image1）をそれぞれ拡大・縮小し、サムの値をTextBlockコントロールで表示します。
処理コードは簡単で、ImageコントロールのWidht・Heightプロパティの値に、「UpperValue」「LowerValue」プロパティで2つのサムの位置を取得し、その値を乗算するだけです。
TextBlockコントロールでの表示も、Textプロパティにこの「UpperValue」「LowerValue」プロパティの値を文字列に変換して代入するだけです。
Imports C1.Silverlight
Partial Public Class MainPage
Inherits UserControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub c1rs1_UpperValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
If c1rs1 IsNot Nothing Then
image2.Width = 300 * c1rs1.UpperValue
image2.Height = 300 * c1rs1.UpperValue
textblock2.Text = "Range = " & c1rs1.UpperValue.ToString()
End If
End Sub
Private Sub c1rs1_LowerValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs)
If c1rs1 IsNot Nothing Then
image1.Width = 300 * c1rs1.LowerValue
image1.Height = 300 * c1rs1.LowerValue
textblock1.Text = "Range = " & c1rs1.LowerValue.ToString()
End If
End Sub
End Class
using C1.Silverlight;
namespace sl_Slider_cs
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void c1rs1_UpperValueChanged(object sender, EventArgs e)
{
if (c1rs1 != null)
{
image2.Width = 300 * c1rs1.UpperValue;
image2.Height = 300 * c1rs1.UpperValue;
textblock2.Text = "Range = " + c1rs1.UpperValue.ToString();
}
}
private void c1rs1_LowerValueChanged(object sender, EventArgs e)
{
if (c1rs1 != null)
{
image1.Width = 300 * c1rs1.LowerValue;
image1.Height = 300 * c1rs1.LowerValue;
textblock1.Text = "Range = " + c1rs1.LowerValue.ToString();
}
}
}
}
まとめ
C1RangeSliderコントロールは、連続した数値の入力にはもってこいのコントロールです。
今回は、2つのイメージ画像を拡大・縮小することに使用しましたが、これをさらに複数のイメージ画像に対して使用すれば、iTunesでのアルバムジャケットの表示サイズ変更のような見せ方をすることもできます。
また、値を範囲（Range）で操作して入力できるので、データのシミュレーションに使ったりグラフコントロールなどと組み合わせてデータを視覚的に表現する、などといった使い方もできます。
参考文献（下記URLは予告なく変更される場合があります）
写真提供
掲載している写真は、アルペンガーデンやまくさが著作権を保有しています。写真を無断で、転載・複写・販売することを固く禁止します。
製品情報
