UserControllクラス

Silverlight上でのViewの構成としてはまずUserControllクラスのインスタンスを作成します。 デフォルトではプロジェクトを新規作成したときに、MainPage.xamlというXAMLファイルが出来ています。そしてこのXAMLファイルと関連づいたMainPage.xaml.csには、MainPageというクラスが定義されておりこのMainPageはUserControllクラスを継承したものでした。以下のようになってます。

 
namespace VariousTest
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

で、これをAppクラスで、

 
MainPage mp = new MainPage();
this.RootVisual = mp;

のようにすることで、MainPageのインスタンスをメイン アプリケーション のUIとして設定していました。DisplayObjectのようにUserControllクラスには、他のUIエレメントをどんどん付け足していくことができますが、まずはレイアウトに使うPanelの類を付け足します。

Paneｌの類というのは、Panelクラスを継承したいくつかあるクラスのことです。GridやCanvas,StackPanelがあります。この内Canvas要素では中に配置する要素を座標により絶対位置で配置するものでゲームなどを扱うにはこれが一番好都合です。フォームアプリケーションなどで画面サイズによって動的にボタンなどの配置を自動的に変えたいようにしたい場合などはGridが便利です。

というわけで、MainPage.xamlはデフォルトではGridを使うようになっていますが、これをCanvasに変更します。こうすることで、MainPageクラスのインスタンスが出来たときにCanvasパネルはが貼りつけられた状態になります。

<UserControl x:Class="VariousTest.MainPage"
    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:DesignWidth="640" d:DesignHeight="480">
  <Canvas x:Name="LayoutRoot">

  </Canvas>
</UserControl>

赤文字箇所はデフォルトではGridになっていた箇所をCanvasに変更しました。x:Name="LayoutRoot"という風に書いてありますが、これでこのCanvasにはスクリプトから"LayoutRoot"というインスタンス名でアクセスすることができます。先ほどMainPageクラスのインスタンスとしてmpを作ったので、mp.LayoutRoot　でCanvasにアクセスできます。

Canvasクラス

あとの実装としてはCanvasクラスを大量に作って、一番ルートに加えていった、入れ子にしたりと、CanvasがFlashでいうところのSpriteに相当するような形で扱っていくことになります。その中で画像を扱う場合はImageなどを使ったりするわけです。

ちなみに、プロジェクトの中に読みこんでいる画像をスクリプトのみで表示させるには次のようなスクリプトになります。

このようにVariousTestの中に、datas/banzai とフォルダを作り、その中にpngを入れています。

 
using System.Windows.Media;
using System.Windows.Media.Imaging;

Image img = LoadImage(""/VariousTest;component/datas/banzai/TEST01.png");
this._layer = new Canvas();
this._layer.Children.Add(img);

        private Image LoadImage(string resource_name)
        {
            Image img = null;
            img = new Image();
            img.Source = LoadBitmap(resource_name);

            return img;
        }

        private BitmapImage LoadBitmap(string resource_name)
        {
            BitmapImage bmp = new BitmapImage(new Uri(resource_name, UriKind.Relative));
            return bmp;
        }

ちょっと最初の方ははしょっていますが、まず、Imageクラスのインスタンスを作ります。このときBitmapImageクラスのインスタンスを指定したパスから生成し、ImageクラスのソースにそのBitmapImageを指定します。

Imageクラスは

System.Windows.UIElementを継承しているので、Canvasにひっつけることができます。

this._layer = new Canvas();で新しいCanvasを作成し、this._layer.Children.Add(img); でイメージを付け足しています。ただし、このままですと、表示されません。

this._layerがどこにも張り付けられていないからです。このthis._layerをmp.LayoutRootに張り付ける必要があります。

mp.LayoutRoot.Children.Add(this._layer);

これで無事画像を表示させることができました。

次はこのCanvasの各プロパティをFlashのSpriteに近い操作でハンドリングできるラッパークラスを作ろうと思っています。