Silvelight ゲージでBINGOを作る その1

Posted 2009/6/23 3:16 by Tatsuya Yamada's blog

前回予告したように、DevDays5で使用したBINGO用デジタルスロットの作成手順を数回に分けてご紹介していきます。

 ビンゴを試してみる・・・Silverlight3 betaが必要です

 

まず前提として必要条件を。

部分的にPerspective3Dを使っていたりするのでSilverlight3betaで作っていますが、その部分を抜けばSilverlight2でも問題ないかもしれません。

また、DataVisualizationについては製品をお持ちでない方はトライアル版でお試しください。→コチラよりダウンロード可能です。

 

ゲージコントロール xamWebGauge

まず、BINGOアプリの肝となるゲージコントロールについて簡単に。

xamWebGaugeは、NetAdvantage Silverlight DataVisualizationに含まれるコントロールで、数値指標値を視覚的にわかりやすく表現することを目的としています。

大きく分けて3種類のゲージスタイルが用意されています。

一つ目は リニア ゲージと呼ばれる、線形のスケール内で指標を示すもので、シンプルな温度計やボリュームメーターなどの表現に使われます。これは xamWebLinearGauge コントロールが担当します。

リニア ゲージ

二つ目はラジアル ゲージという円形スケールの中にマーカーを配置するもので、自動車のスピードメーターでおなじみの表現方法です。これは xamWebRadialGauge コントロールが担当します。

ラジアル ゲージ

最後に、今回使うのがデジタル ゲージで、LEDなどで数字や文字したイメージを再現します。パチンコ屋でもよく見かけるやつです。これはxamWebSegmentedDisplay コントロールが担当します。

デジタル ゲージ

 

ゲージの配置とセグメントの種類

BINGOでも使っている、このデジタル ゲージの使い方をご紹介します。すごく簡単です。

まずVisual Studio で Silverlight アプリケーションを作成し、必要な参照設定を追加します。

ゲージに必要なアセンブリは、下の図の2つです。

ゲージの参照設定追加

つぎに、XAMLに名前空間の定義を追加します。

<UserControl x:Class="DigitalGauge.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:igGauge="clr-namespace:Infragistics.Silverlight.Gauge;assembly=Infragistics.Silverlight.DataVisualization.Gauge.v9.1"        
    Width="400" Height="300">

 

では、画面内にxamWebSegmentedDisplayコントロールを追加してみましょう。

まずは基本的な使い方です。下のようにすると、3ケタの枠で777と表示できます。

<igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="SevenSegment" Digits="3" Text="777" />

777

SegmentModeというプロパティがありますが、数値のみを表示するときはSevenSegment(7セグ)がシンプルで良いです。

SegmentModeにはもうひとつ、ForteenSegment(14セグ)も指定でき、こちらはアルファベットも表示することができます。

<igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="FourteenSegment" Digits="5" Text="START" />

START

もしこのセグメントのデザインをもっとオリジナルなものにしたい場合は、テンプレートを使ってStyleを変更することができます。

よりLEDなスタイル

このStyleのソース

 

簡単なサンプル

では、デジタル ゲージを使ったサンプルにしてみましょう。

ボタンクリック時に0~999のランダムな数字を表示する簡単なスロットマシーンです。

(実行にはSilverlight3 beta プラグインが必要です)

シンプルスロット(Silverlight3 betaが必要)

 

このコードは以下のとおり。

とくに難しいところはないですが、xamWebSegmentDisplayの表示値を受け取るプロパティはTextなので、文字列として設定する必要がある点に注意してください。

 

XAMLコード

<UserControl x:Class="DigitalGauge.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:igGauge="clr-namespace:Infragistics.Silverlight.Gauge;assembly=Infragistics.Silverlight.DataVisualization.Gauge.v9.1"        
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="250"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <igGauge:XamWebSegmentedDisplay x:Name="seg" SegmentMode="SevenSegment"  Digits="3" Text="000" Grid.Row="0" Margin="10"/> 
        <Button x:Name="slot" Content="SLOT!" FontSize="20" Grid.Row="1" Click="slot_Click" Margin="10"/>
    </Grid>
</UserControl>
コードビハインド
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace DigitalGauge
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
        private void slot_Click(object sender, RoutedEventArgs e)
        {
            var r = new Random();
            var num = r.Next(0, 999);
            this.seg.Text = string.Format("{0,3}", num);
        }
    }
}
  

このようにゲージコントロール自体はとても簡単に使えますので、ぜひお試しあれ!

次回は、BINGOアプリの仕組みをもう少し掘り下げてみたいと思います。

の全ての投稿を閲覧する