Silverlight-概要

Silverlightチュートリアルへようこそ。 Silverlightは、リッチインターネットアプリケーションを構築するためのプラットフォームです。このチュートリアルでは、Silverlightの背後にある概念を説明し、SilverlightをWebアプリケーションに組み込む方法を示します。完了すると、XAMLとC＃を使用したSilverlightアプリケーションの理解が深まります。

Silverlightとは

Silverlightは、リッチインターネットアプリケーションを構築するために設計されたブラウザープラグインです。通常のWebアプリケーションのようにブラウザーで実行されるが、HTMLが移動できる場所を超えてユーザーインターフェイスを進めようとするアプリケーション。例えば、

Silverlightは、さまざまなオペレーティングシステムで実行される、リッチなブラウザーホストアプリケーションを構築するためのフレームワークです。
HTMLと共存することもできます。したがって、Silverlightは既存のWebアプリケーションを強化できます。
Silverlightは、ブラウザプラグインを介してその魔法を発揮します。 Silverlightコンテンツを含むWebページにアクセスすると、このブラウザープラグインが実行され、コードが実行され、ページの特定の指定領域にそのコンテンツがレンダリングされます。
重要な部分は、Silverlightプラグインが、通常のWebページを駆動するHTMLとJavaScriptの従来のブレンドよりも豊かな環境を提供することです。
ビデオを再生し、ハードウェアアクセラレーション3Dグラフィックスを使用し、ベクターアニメーションを使用するSilverlightページを作成できます。

開発者の観点から見ると、Silverlightの最も興味深い機能は、.NET FrameworkプログラミングモデルをWebアプリケーションのクライアント側にもたらすことです。

Silverlightの機能

SilverlightはWebページ内で実行するように設計されているため、ブラウザープラグインとして実行できます。ビットマップ、ベクターグラフィックス、高解像度ビデオ、アニメーションをレンダリングするためのグラフィカルサービスを提供します。
C＃またはVisual Basic .NETで記述し、Webブラウザーで実行されるコードで.NET Frameworkクラスライブラリ機能を使用できます。
Silverlightユーザーインターフェイス自体は、フルデスクトップ.NET FrameworkのユーザーインターフェイスフレームワークであるWindows Presentation Foundation（WPF）と非常によく似たモデルを使用します。
WPFを知っていれば、Silverlightは簡単に習得できます。 Silverlightは、.NETよりもはるかに小さなダウンロードです。サイズは約10分の1であるため、クラスライブラリのサブセットのみが存在し、WPFのモデルにはさまざまな影響があります。
規模は縮小されていますが、経験豊富な.NET開発者は、Silverlightですぐにくつろげます。

プラットフォームとブラウザ

Silverlightでサポートされるプラットフォームとブラウザーは次のとおりです-

Windows

Microsoft製品に期待されるように、SilverlightはWindowsをサポートしています。 Windows XP Service Pack 2以降または最新バージョンのWindowsが必要です。
古いバージョンは完全にはサポートされていません。たとえば、SilverlightはWindows MEではまったく実行されず、Windows 2000のサポートは制限されています。
ブラウザについては、SilverlightはもちろんMicrosoft独自のInternet Explorerをサポートし、FirefoxとGoogle Chromeバージョン4をサポートしています。
概して、Silverlightは一般的なWebブラウザープラグインAPIをサポートしています。公式にサポートされているリストよりも幅広いブラウザで動作します。

Mac

SilverlightはMac OS10をサポートしていますが、Silverlightバージョン2以降はIntelベースのMacでのみ動作します。
最新のMacでは、FirefoxとSafariの両方がサポートされています。

Linux

Microsoft独自のSilverlightプラグインはLinuxでは動作しませんが、MonoオープンソースプロジェクトにはMoonlightと呼ばれる派生物があります。これはLinux上で動作するSilverlight互換プラグインです。
MoonlightはFirefoxで実行され、興味深いことに、常にスタンドアロンモードで実行できます。
MonoプロジェクトがそもそもMoonlightを構築することを決定した理由の1つは、Silverlightがデスクトップ上で実行されるユーザーインターフェイスウィジェットを構築するための有用なテクノロジーであると考えたためです。

Silverlight-環境設定

Microsoftは、Silverlightアプリケーション開発用に2つの重要なツールを提供しています。彼らは-

ビジュアルスタジオ
発現ブレンド

現在、両方のツールでSilverlightプロジェクトを作成できますが、事実、Visual Studioは開発者により多く使用され、Blendは依然としてデザイナーにより多く使用されています。マイクロソフトは、https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx [https://www.visualstudio.com]からダウンロードできるVisual Studioの無料バージョンを提供しています。。このチュートリアルでは、主にVisual Studioを使用します。

インストール

ステップ1 *-Silverlightがダウンロードされたら、インストーラーを実行します。次のダイアログボックスが表示されます。

ダウンロードされたシルバーライト

ステップ2 *-*インストール*ボタンをクリックすると、インストールプロセスが開始されます。

インストールプロセス

ステップ3 *-Sivelightが正常にインストールされると、次のダイアログボックスが表示されます。

正常にインストールされました

ステップ4 *-このダイアログボックスを閉じ、必要に応じてコンピューターを再起動します。

ステップ5 *-*スタート*メニューから *Visual Studio を開くと、以下のダイアログボックスが開きます。初めて見つめながら、準備に時間がかかります。

Visual Studio

ステップ6 *-次に、Visual Studioのメインウィンドウが表示されます。

Window Visual Studio

ステップ7 *-ここで、Silverlightアプリケーションを開始するには、Silverlight Developerツールもマシンにインストールする必要があります。 *https://www.microsoft.com/getsilverlight/get-started/install/default.aspx？reason = unsupportedbrowser＆_helpmsg = ChromeVersionDoesNotSupportPlugins＃[here] から最新のSilverlight開発者ツールをダウンロードしてインストールします。

Silverlightアプリケーション

ステップ8 *-*インストール*をクリックします。インストールには時間がかかります。

Silverlightインストール

ステップ9 *-インストールが完了すると、次のメッセージが表示されます。

正常にインストールされました

ステップ10 *-これで、最初のSilverlightアプリケーションを構築する準備ができました。 *閉じる*をクリックします。

Silverlight-はじめに

この章では、Silverlightの実際の例を見ていきます。私たちは2つのことが必要です-

まず、Webページが必要です。 Silverlightは、リッチインターネットアプリケーションを対象としています。Webページの一部としてWebブラウザー内で実行するように設計されています。ページには、Silverlightプラグインをロードするための適切なタグを組み込む必要があります。また、Silverlightがインストールされているかどうかを検出するロジックを含めることもできます。また、Silverlightが存在しない場合にフォールバックユーザーインターフェイスを提供できます。
次に必要なのは、Silverlightコンテンツ自体です。このチュートリアルでは、Silverlightの.NETプログラミングモデルに焦点を当てます。 XAML、Silverlightユーザーインターフェイスを定義するために使用するモックアップ言語、およびC＃で記述された.NETコードの混合を含むコンパイル済みSilverlightアプリケーションを作成します。

Webページを作成する

Silverlightの使用を開始する最も簡単な方法は、サーバー側コードのないHTMLページを使用して通常のWebサイトを作成することです。非常に簡単な例を見てみましょう。

ステップ1 *- *Visual Studio を開きます。 [*ファイル]メニューをクリックし、[新規作成]をポイントして、[プロジェクト]をクリックします。

Webページの作成

ステップ2 *-*新しいプロジェクト*ダイアログボックスが開きます。 *テンプレート*で、 Visual C＃を選択し、 *Silverlight をクリックします。右側のペインで、Silverlightアプリケーションを選択します。

Silverlightアプリケーションの選択

プロジェクト名とハードドライブ上の場所を入力してプロジェクトを保存し、[OK]をクリックしてプロジェクトを作成します。

Silverlightプロジェクト自体は、Silverlightコンテンツを構築するだけであり、そのコンテンツは、Webアプリケーション全体を構成する多くの資産の1つに過ぎません。

*OK* をクリックしてください。

ステップ3 *-[Silverlightアプリケーションをホストする]チェックボックスをオンにします。デフォルトはASP.NET Webアプリケーションプロジェクトです。

新しいSilverlightアプリケーション

ステップ4 *-MS-Visual Studioは、SilverlightプロジェクトとASP.NET Webアプリケーションの2つのプロジェクトを作成しました。現在、ASP.NET Webアプリケーションが必要です。以下に示すように、これは[ソリューションエクスプローラー]ウィンドウで確認できます。

ソリューションエクスプローラー

HTTPを介してコンテンツを提供できるものは何でも実行できますが、これは Visual Studio であり、ASP.NET Webテクノロジーを理解しているため、それが私たちに与えるものです。

Silverlightが特定のサーバー側テクノロジに依存しないことを示すために、この .aspx ファイルを削除して、プレーンな静的HTMLファイルのみを残します。

ステップ5 *-FirstExampleTestpage.aspxを右クリックします。オプションのリストから、[削除]をクリックします。

FirstExampleTestpage.aspx

ステップ6 *- *FirstExampleTestPagel を Start ページとして設定します。

FirstExampleTestpagel

*MainPage.xaml* ファイルは、Silverlightコンテンツのユーザーインターフェイスを定義します。 XAMLコードを直接記述することも、 *Toolbox* を使用してさまざまなUI要素をドラッグアンドドロップすることもできます。

ステップ7 *-以下に示すのは *MainPage.xaml の単純なコードで、 Button と TextBlock が StackPanel 内で定義されています。

<UserControl x:Class = "FirstExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <StackPanel>

         <TextBlock x:Name = "TextMessage"
            Text = "Hello World!"
            Margin = "5">
         </TextBlock>

         <Button x:Name = "ClickMe"
            Click = "ClickMe_Click"
            Content = "Click Me!"
            Margin = "5">
         </Button>

      </StackPanel>
   </Grid>

</UserControl>

ステップ8 *-この例では、 *ClickMe_Click という名前のイベント処理メソッドを作成済みであることを前提としています。 MainPage.xaml.cs ファイルでは次のようになります。

using System.Windows;
using System.Windows.Controls;

namespace FirstExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void ClickMe_Click(object sender, RoutedEventArgs e) {
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin";
      }
   }
}

ステップ9 *-インストールされている任意のブラウザーでSilverlightアプリケーションを実行できます。

Silverlightアプリケーションの実行

ステップ10 *-上記のコードをコンパイルして実行すると、次のWebページが表示されます。

コンパイル済み実行済み

ステップ11 *- *Click Me ボタンをクリックすると、以下に示すように TextBlock のテキストが更新されます。

テキスト更新

UI要素をさらに追加して、上記の例を実行することをお勧めします。

Silverlight-XAMLの概要

Silverlightで作業するときに最初に遭遇することの1つはXAMLです。 XAMLは、拡張可能なアプリケーションマークアップ言語の略です。これは、XMLに基づいたシンプルで宣言型の言語です。

XAMLでは、階層関係を持つオブジェクトのプロパティを作成、初期化、および設定するのは非常に簡単です。
主にGUIの設計に使用されます。
ワークフロー基盤でワークフローを宣言するなど、他の目的にも使用できます。

基本的な構文

新しいSilverlightプロジェクトを作成すると、以下に示すように、 MainPage.xaml にデフォルトでXAMLコードの一部が表示されます。

<UserControl x:Class = "FirstExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

   </Grid>

</UserControl>

上記のXAMLファイルにはさまざまな種類の情報が記載されていることがわかります。それらのすべてについて、以下の表で簡単に説明します。

Information	Description
<UserControl	Provides the base class for defining a new control that encapsulates the existing controls and provides its own logic.
x:Class = "FirstExample.MainPage"	It is a partial class declaration, which connects the markup to that partial class code behind, defined in it.
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation%22	Maps the default XAML namespace for Silverlight client/framework.
xmlns:x = "http://schemas.microsoft.c om/winfx/2006/xaml"	XAML namespace for XAML language, which maps it to x: prefix.
xmlns:d = "http://schemas.microsoft.com/expression/blend/2008%22	XAML namespace is intended for designer support, specifically designer support in the XAML design surfaces of Microsoft Visual Studio and Microsoft Expression Blend.
xmlns:mc = "http://schemas.openxmlforma ts.org/markup-compatibility/2006"	Indicates and supports a markup compatibility mode for reading XAML.
>	End of object element of the root.
<Grid></Grid>	These are the starting and closing tags of an empty grid object.
</UserControl>	Closing the object element.

XAMLの構文規則は、XMLの構文規則とほぼ同じです。 XAMLドキュメントを見ると、実際にはそれが有効なXMLファイルであることがわかります。 XMLでは属性の値は文字列である必要がありますが、XAMLではプロパティ要素構文として知られる別のオブジェクトである可能性があるため、その逆は当てはまりません。

Object要素の構文は、左山括弧（<）で始まり、その後にオブジェクトの名前が続きます。ボタン。
そのオブジェクト要素のプロパティと属性が定義されます。
Object要素は、スラッシュ（/）に続いてすぐに右山括弧（>）が続く必要があります。

子要素のない単純なオブジェクトの例を以下に示します。

<Button/>

いくつかの属性を持つオブジェクト要素の例-

<Button Content = "Click Me" Height = "30" Width = "60"/>

プロパティを定義する代替構文の例（Property要素の構文）-

<Button>
   <Button.Content>Click Me</Button.Content>
   <Button.Height>30</Button.Height>
   <Button.Width>60</Button.Width>
</Button>

子要素を持つオブジェクトの例：StackPanelには、子要素としてTextblockが含まれます。

<StackPanel Orientation = "Horizontal">
   <TextBlock Text = "Hello"/>
</StackPanel/>

SilverlightでXAMLを使用する理由

XAMLは元々Silverlightのために発明されたものではありません。 Windows Presentation FoundationであるWPFから来ました。 Silverlightは、多くの場合、WPFのサブセットであると説明されています。 SilverlightはWPFではできないことを行うことができるため、これは厳密には真実ではありません。機能が重複している場合でも、2つの詳細はわずかに異なります。

WPFとSilverlightは多くの点で非常に似ていると言う方が正確です。違いはありますが、SilverlightがWPFから借用しているXAML機能を調べることは有益です。たとえば、Silverlightは、ビットマップとスケーラブルな図形のグラフィックプリミティブを提供します。
また、ビデオとオーディオをレンダリングするための要素も提供します。
単純な書式付きテキストのサポートがあり、任意の要素をアニメーション化できます。 WPFを知っていれば、この機能セットはおなじみでしょう。
重要な点の1つは、WPF XAMLをSilverlightで使用できないことです。
類似点はありますが、多くの小さな違いもあります。

XAMLとコードビハインド

XAMLは、ユーザーインターフェイスの外観と構造を定義します。ただし、ユーザーがアプリケーションと対話するときにアプリケーションに何か便利なことをさせたい場合は、コードが必要になります。

通常、各XAMLファイルはソースコードファイルに関連付けられており、これをコードビハインドと呼びます。さまざまなMicrosoftフレームワークがこの用語を使用しています。
通常、コードビハインドでは、XAMLで定義された要素を使用して、ユーザー入力に関する情報を取得するか、ユーザーに情報を表示する必要があります。
以下に示すXAMLコードでは、 TextBlock および Button が定義されています。デフォルトでは、アプリケーションが実行されると、Webページとボタンにテキスト「* Hello World！*」が表示されます。

<UserControl x:Class = "FirstExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <StackPanel>
         <TextBlock x:Name = "TextMessage"
            Text = "Hello World!"
            Margin = "5">
         </TextBlock>

         <Button x:Name = "ClickMe"
            Click = "ClickMe_Click"
            Content = "Click Me!"
            Margin = "5">
         </Button>

      </StackPanel>
   </Grid>
</UserControl>

コードビハインドは、 x：Name ディレクティブで名前が付けられた要素にアクセスできます。
名前付き要素は、コードビハインドのフィールドを介して使用可能になり、コードはこれらのオブジェクトとそのメンバーに通常の方法でアクセスできます。
x：Prefix は、名前が通常のプロパティではないことを示します。
x：Name は、コードビハインドでこのオブジェクトにアクセスしたいというXAMLコンパイラへの特別なシグナルです。

以下に示すのは、 TextBlock テキストが更新されるボタンクリックイベントの実装です。

using System.Windows;
using System.Windows.Controls;

namespace FirstExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void ClickMe_Click(object sender, RoutedEventArgs e) {
         TextMessage.Text = "Congratulations! you have created your first Silverlight Applicatoin";
      }
   }
}

UI要素を設計する方法はXAMLだけではありません。 XAMLでオブジェクトを宣言するか、コードで宣言/書き込みするかどうかはユーザー次第です。
XAMLはオプションですが、これにもかかわらず、 Silverlight デザインの中心です。
XAMLコーディングの目標は、ビジュアルデザイナーがユーザーインターフェイス要素を直接作成できるようにすることです。したがって、 Silverlight は、マークアップからユーザーインターフェイスのすべての視覚的側面を制御できるようにすることを目的としています。

Silverlight-プロジェクトの種類

Visual Studioで新しいプロジェクトを作成すると、ダイアログボックスの右ペインに4種類のプロジェクトが表示されます。彼らは-

Silverlightアプリケーション
Silverlightクラスライブラリ
クラスライブラリ（ポータブル）
Silverlightナビゲーションアプリケーション

Silverlight新規アプリケーション

最初の2つ、 Silverlight Application および Silverlight Class Library は、簡単です。これらは、クラシックWindowsアプリケーションの世界のDLLの実行可能ファイルに類似しています。どちらも、Silverlightアプリケーションの展開方法によりDLLを構築します。
概念的には、Silverlightアプリケーションプロジェクトは実行可能なプログラムをビルドし、クラスライブラリプロジェクトは他のアプリケーションに組み込むように設計されたライブラリをビルドします。
複数のアプリケーションの構築を計画していて、共通コードを再利用したい場合は、クラスライブラリを構築できます。他の人がアプリケーションで使用するコントロールを販売することを計画している場合、再びライブラリを作成する必要があります。
他のプロジェクトのタイプは少しわかりにくいので、この章で後ほど詳しく説明します。

Silverlight Webアプリケーション

SilverlightアプリケーションはWebからダウンロードされるため、通常、Silverlightプロジェクトに関連付けられたWebプロジェクトがあります。これらのプロジェクト間の関係を管理するために設計されたVisual Studioの機能がいくつかあります。

Silverlightアプリケーションプロジェクトの簡単な例をもう一度見てみましょう。

ステップ1 *- *Visual Studio を開きます。 [*ファイル]メニューをクリックし、[新規作成]をポイントして、[プロジェクト]をクリックします。

Webページの作成

ステップ2 *-*新しいプロジェクト*ダイアログボックスが開きます。 *テンプレート*で、 Visual C＃を選択し、 *Silverlight をクリックします。右側のペインで、Silverlightアプリケーションを選択します。

Silverlightアプリケーション

プロジェクトを保存するには、プロジェクト名とハードドライブ上の場所を入力します。

Silverlightプロジェクト自体は、Silverlightコンテンツを構築するだけであり、そのコンテンツは、Webアプリケーション全体を構成する多くの資産の1つに過ぎません。

*OK* をクリックしてください。

ステップ3 *-[Silverlightアプリケーションをホストする]チェックボックスをオンにします。デフォルトはASP.NET Webアプリケーションプロジェクトです。

新しいSilverlightアプリケーション

ステップ4 *-MS-Visual Studioは、SilverlightプロジェクトとASP.NET Webアプリケーションの2つのプロジェクトを作成しました。次に、ASP.NET Webアプリケーションが必要です。以下に示すように、これは[ソリューションエクスプローラー]ウィンドウで確認できます。

ソリューションエクスプローラー

HTTPを介してコンテンツを提供できるものは何でも実行できますが、これは Visual Studio であり、ASP.NET Webテクノロジーを理解しているため、それが私たちに与えるものです。

Silverlightが特定のサーバー側テクノロジに依存しないことを示すために、この .aspx ファイルを削除して、プレーンな静的HTMLファイルのみを残します。

ステップ5 *-FirstExampleTestpage.aspxを右クリックします。オプションのリストから、[削除]をクリックします。

FirstExampleTestpage aspx

ステップ6 *- *FirstExampleTestPagel を Start ページとして設定します。

FirstExampleTestpage html

*MainPage.xaml* ファイルは、Silverlightコンテンツのユーザーインターフェイスを定義します。 XAMLコードを直接記述することも、 *Toolbox* を使用してさまざまなUI要素をドラッグアンドドロップすることもできます。

ステップ7 *-以下に示すのは *MainPage.xaml の単純なコードで、 Button と TextBlock が StackPanel 内で定義されています。

<UserControl x:Class = "FirstExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <StackPanel>
         <TextBlock x:Name = "TextMessage" Text = "Hello World!"
            Margin = "5"> </TextBlock>
         <Button x:Name = "ClickMe" Click = "ClickMe_Click" Content = "Click
            Me!"  Margin = "5"> </Button>
      </StackPanel>
   </Grid>

</UserControl>

ステップ8 *-この例では、 *ClickMe_Click という名前のイベント処理メソッドを作成済みであることを前提としています。 MainPage.xaml.cs ファイルでは次のようになります。

using System.Windows;
using System.Windows.Controls;

namespace FirstExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void ClickMe_Click(object sender, RoutedEventArgs e) {
         TextMessage.Text = "Congratulations! you have created your
            first Silverlight Applicatoin";
      }
   }
}

ステップ9 *-インストールされている任意のブラウザーでSilverlightアプリケーションを実行できます。

Silverlightアプリケーションの実行

ステップ10 *-上記のコードをコンパイルして実行すると、次のWebページが表示されます。

コンパイル済み実行済み

Silverlightナビゲーションアプリケーション

Silverlightナビゲーションアプリケーションテンプレートは、通常のSilverlightアプリと同様のプロジェクトを構築します。 2つのプロジェクトタイプについて根本的な違いはありません。ナビゲーションテンプレートには、自分で簡単に追加できるコードがいくつか含まれています。名前が示すように、Silverlightアプリケーション内でのWebのようなナビゲーションをサポートしています。

ナビゲーションアプリケーションを作成しましょう。

ステップ1 *-*新しいプロジェクト*ダイアログボックスの右ペインから *Silverlight Navigation Application を選択します。

Silverlightナビゲーションアプリケーション

ステップ2 *-Silverlight Webアプリケーションの設定に従ってください。

Silverlight Webアプリケーション

ステップ3 *- *OK ボタンをクリックします。以下に示すウィンドウが開きます。

Silverlight Navigation App.Web

これらには通常、関連するWebプロジェクトがあるため、そのうちの1つがあります。前に説明したように2つのプロジェクトを作成しますが、ご覧のとおり、デフォルトのユーザーインターフェイスは少し空白が少なくなっています。

ステップ4 *-ナビゲーションバーを含むアプリケーションクロームを提供します。ソリューションには、いくつかの追加ファイルが含まれています。この *Styles ファイルは、 Navigation バーのルックアンドフィールを定義します。この Views フォルダーには、数ページとエラーを表示するウィンドウがあります。

ナビゲーションバー

ご覧のとおり、アプリケーションを実行すると、いくつかのプレースホルダーコンテンツを含むホームページが表示されます。

アプリケーション名

ステップ5 *-[バージョン情報]ボタンをクリックすると、[バージョン情報]ページに移動します。

ページについて

重要な部分は、ブラウザの[戻る]ボタンと[進む]ボタンを使用して手順をたどることができることです。

通常、これを行うと、Webブラウザーは1つのWebページから別のWebページに移動しますが、ここでは移動しません。 Silverlightアプリケーションは実際にはアンロードしません。実行を続け、異なるコンテンツを表示するだけです。

したがって、ブラウザの観点から見ると、実際にはすべてが1つのWebページにあります。 Silverlightは、ナビゲーションボタンでいくつかのトリックを実行して、ナビゲーション中にWebページがアンロードされないようにします。

Silverlight-固定レイアウト

コントロールのレイアウトは、アプリケーションの操作性にとって非常に重要かつ重要です。アプリケーションでGUI要素のグループを配置するために使用されます。レイアウトパネルを選択する際に考慮すべき重要な事項がいくつかあります。彼らは-

子要素の位置。
子要素のサイズ。
重なり合っている子要素を互いの上に重ねます。

アプリケーションが異なる画面解像度で使用されている場合、コントロールの固定ピクセル配置は機能しません。 XAMLは、GUI要素を適切な方法で配置するための豊富な組み込みレイアウトパネルセットを提供します。

まず、*単純な固定*レイアウトを見てみましょう。次に、Silverlightがサポートするように設計した*動的*レイアウトシナリオを見ていきます。すべてのユーザーインターフェイス要素に浸透するレイアウト関連のプロパティと概念が表示されます。

固定レイアウト

最も簡単な種類のレイアウトは、 Canvas 要素によって提供されます。 Canvas パネルは、左、右、上、下など、Canvasの任意の辺に相対的な座標を使用して子要素を明示的に配置できる基本レイアウトパネルです。

固定レイアウト

通常、 Canvas は2Dグラフィック要素（楕円、長方形など）に使用されます。 XAMLアプリケーションのサイズ変更、ローカライズ、またはスケーリングを行う際に絶対座標を指定すると問題が発生するため、UI要素には使用されません。

以下に、 Canvas クラスで一般的に使用される properties を示します。

以下に、Canvasの最も一般的に使用されるプロパティを示します。

Sr. No.	Property & Description
1	Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。（Panelから継承）
2	Children このPanelの子要素のUIElementCollectionを取得します。（Panelから継承されます。）
3	Height 要素の推奨される高さを取得または設定します。（FrameworkElementから継承されます。）
4	ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。
5	ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。
6	LogicalChildren このPanel要素の論理子要素を反復処理できる列挙子を取得します。（Panelから継承されます。）
7	LogicalOrientation パネルが1次元のみのレイアウトをサポートする場合、パネルの方向。（Panelから継承されます。）
8	LeftProperty Canvas.Left XAML添付プロパティを識別します。
9	Margin 要素の外側の余白を取得または設定します。（FrameworkElementから継承されます。）
10	Name 要素の識別名を取得または設定します。この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。（FrameworkElementから継承されます。）
11	Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。
12	Parent この要素の論理的な親要素を取得します。（FrameworkElementから継承されます。）
13	Resources ローカルに定義されたリソースディクショナリを取得または設定します。（FrameworkElementから継承されます。）
14	Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。（FrameworkElementから継承されます。）
15	TopProperty Canvas.Top XAML添付プロパティを識別します。
16	Width 要素の幅を取得または設定します。（FrameworkElementから継承されます。）
17	ZIndexProperty Canvas.ZIndex XAML添付プロパティを識別します。

以下に、 Canvas で一般的に使用される methods を示します。

Sr. No.	Method & Description
1	GetLeft ターゲット要素のCanvas.Left XAML添付プロパティの値を取得します。
2	GetTop ターゲット要素のCanvas.Top XAML添付プロパティの値を取得します。
3	GetZIndex ターゲット要素のCanvas.ZIndex XAML添付プロパティの値を取得します。
4	SetLeft ターゲット要素のCanvas.Left XAML添付プロパティの値を設定します。
5	SetTop ターゲット要素のCanvas.Top XAML添付プロパティの値を設定します。
6	SetZIndex ターゲット要素のCanvas.ZIndex XAML添付プロパティの値を設定します。

次の例は、子要素を Canvas に追加する方法を示しています。以下は、異なるオフセットプロパティでCanvas内にEllipseが作成されるXAML実装です。

<UserControl x:Class = "FirstExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <Canvas Width = "380" Height = "280" >
         <Ellipse Canvas.Left = "30" Canvas.Top = "30"
            Fill = "Gray" Width = "200" Height = "120"/>
      </Canvas>
   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

子要素キャンバスの追加

Silverlight-動的レイアウト

*Canvas* は、Silverlightのすべてのレイアウトパネルの中で最も面白くありません。 他のパネルでは、*ダイナミックレイアウト*が有効になります。つまり、表示されるアイテムの数が変化したり、表示される情報のサイズが変わったり、ユーザーがブラウザーのサイズを変更したためにアプリケーションで使用できるスペースの量が変化したりすると、レイアウトが適応します。

Silverlightは、動的レイアウト戦略を備えた2つのパネルを提供します。

StackPanel -要素を垂直または水平スタックに配置します。
Grid -柔軟なグリッドのような、またはテーブルのようなレイアウトシステムを提供します。

スタックパネル

スタックパネルは、XAMLのシンプルで便利なレイアウトパネルです。 Stack Panel では、子要素は、方向プロパティに基づいて水平または垂直に1行に配置できます。あらゆる種類のリストを作成する必要がある場合によく使用されます。 ItemsControlはスタックパネルを使用します。 Menu、ListBox および ComboBox は、デフォルトの内部レイアウトパネルです。

以下に、 StackPanel で一般的に使用される properties を示します。

StackPanelの最も一般的に使用されるプロパティを以下に示します。

Sr. No.	Property & Description
1	Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。（Panelから継承）
2	Children このPanelの子要素のUIElementCollectionを取得します。（Panelから継承されます。）
3	Height 要素の推奨される高さを取得または設定します。（FrameworkElementから継承されます。）
4	ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。
5	ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。
6	LogicalChildren このPanel要素の論理子要素を反復処理できる列挙子を取得します。（Panelから継承されます。）
7	LogicalOrientation パネルが1次元のみのレイアウトをサポートする場合、パネルの方向。（Panelから継承されます。）
8	Margin 要素の外側の余白を取得または設定します。（FrameworkElementから継承されます。）
9	Name 要素の識別名を取得または設定します。この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。（FrameworkElementから継承されます。）
10	Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。
11	Parent この要素の論理的な親要素を取得します。（FrameworkElementから継承されます。）
12	Resources ローカルに定義されたリソースディクショナリを取得または設定します。（FrameworkElementから継承されます。）
13	Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。（FrameworkElementから継承されます。）
14	Width 要素の幅を取得または設定します。（FrameworkElementから継承されます。）

次の例は、子要素を StackPanel に追加する方法を示しています。以下に、いくつかのプロパティを持つStackPanel内に*ボタン*が作成されるXAML実装を示します。

<UserControl x:Class = "DynamicLayout.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <StackPanel>
         <Button x:Name = "button" Content = "Button" Margin = "10"/>
         <Button x:Name = "button1" Content = "Button" Margin = "10"/>
         <Button x:Name = "button2" Content = "Button" Margin = "10"/>
         <Button x:Name = "button3" Content = "Button" Margin = "10"/>
      </StackPanel>
   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

動的レイアウトに準拠

StackPanelは、各要素がスタックの方向に必要なだけのスペースを持つように配置しようとします。

ブラウザのサイズを変更すると、ボタンの幅も変更されていることがわかります。

動的レイアウトのサイズ変更に準拠

Grid

グリッドパネルは、行と列で構成される柔軟な領域を提供します。 Grid では、子要素を表形式で配置できます。 Grid.Row および Grid.Column プロパティを使用して、特定の行および列に要素を追加できます。デフォルトでは、 Grid パネルは1行1列で作成されます。複数の行と列は、 RowDefinitions および ColumnDefinitions プロパティによって作成されます。行の高さと列の幅は、次の3つの方法で定義することができます-

固定値-固定サイズの論理ユニット（1/96インチ）を割り当てます。
自動-特定の行/列のコントロールに必要なスペースが必要です。
スター（）*-*自動*および*固定サイズ*がいっぱいになると、残りのスペースが使用されます。

以下に、 Grid クラスで一般的に使用される properties を示します。

以下に、グリッドの最も一般的に使用されるプロパティを示します。

Sr. No.	Property & Description
1	Background パネルのコンテンツ領域を塗りつぶすブラシを取得または設定します。（Panelから継承）
2	Children このPanelの子要素のUIElementCollectionを取得します。（Panelから継承されます。）
3	ColumnDefinitions Gridのこのインスタンスで定義されたColumnDefinitionオブジェクトのリストを取得します。
4	Height 要素の推奨される高さを取得または設定します。（FrameworkElementから継承されます。）
5	ItemHeight WrapPanelに含まれるすべての項目の高さを指定する値を取得または設定します。
6	ItemWidth WrapPanelに含まれるすべての項目の幅を指定する値を取得または設定します。
7	Margin 要素の外側の余白を取得または設定します。（FrameworkElementから継承されます。）
8	Name 要素の識別名を取得または設定します。この名前は、イベントハンドラコードなどの分離コードがXAMLプロセッサによる処理中に構築された後にマークアップ要素を参照できるように、参照を提供します。（FrameworkElementから継承されます。）
9	Orientation 子コンテンツが配置される次元を指定する値を取得または設定します。
10	Parent この要素の論理的な親要素を取得します。（FrameworkElementから継承されます。）
11	Resources ローカルに定義されたリソースディクショナリを取得または設定します。（FrameworkElementから継承されます。）
12	RowDefinitions Gridのこのインスタンスで定義されたRowDefinitionオブジェクトのリストを取得します。
13	Style この要素がレンダリングされるときに使用されるスタイルを取得または設定します。（FrameworkElementから継承されます。）
14	Width 要素の幅を取得または設定します。（FrameworkElementから継承されます。）

以下に、 Grid クラスで一般的に使用される methods を示します。

以下に、グリッドで最も一般的に使用される方法を示します。

Sr. No.	Method & Description
1	GetColumn 指定されたFrameworkElementからGrid.Column XAML添付プロパティの値を取得します。
2	GetColumnSpan 指定されたFrameworkElementからGrid.ColumnSpan XAML添付プロパティの値を取得します。
3	GetRow 指定されたFrameworkElementからGrid.Row XAML添付プロパティの値を取得します。
4	SetColumn 指定されたFrameworkElementのGrid.Column XAML添付プロパティの値を設定します。
5	SetRow 指定されたFrameworkElementのGrid.Row XAML添付プロパティの値を設定します。
6	SetRowSpan 指定されたFrameworkElementのGrid.RowSpan XAML添付プロパティの値を設定します。

次の例は、子要素をグリッドに追加して表形式で指定する方法を示しています。以下に、いくつかのUI要素が追加されたXAML実装を示します。

<UserControl x:Class = "DynamicLayout.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "130"/>
         <ColumnDefinition Width = "1*"/>
         <ColumnDefinition Width = "2*"/>
      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "50"/>
      </Grid.RowDefinitions>

      <TextBlock Grid.Column = "0" Grid.Row = "0"
         Text = "Content that no longer fits, not even close here"
         TextWrapping = "Wrap"/>

      <Button Grid.Column = "1" Grid.Row = "0" Content = "OK"/>
      <Ellipse Grid.Column = "1" Grid.Row = "1"  Fill = "Aqua"/>
      <Rectangle Grid.Column = "2" Grid.Row = "1" Fill = "Orchid" RadiusX = "20" RadiusY = "20"/>

   </Grid>

</UserControl>

最初の列は固定サイズに設定されます。この列の要素にはその幅があります。 Grid.Column および Grid.Row プロパティは、これらのアイテムが含まれる行と列を指定します。これらは0ベースのプロパティです。

2列目または3列目の幅は 1 および *2 です。これは、固定幅および自動幅の列がスペースを取った後に残ったスペースを共有することを意味します。ここでの *1 と 2 の重要性は、 2 列が *1 *列の2倍のスペースを取得することです。

上記のコードを実行すると、次の出力が表示されます。

ダイナミックレイアウトグリッド

アプリケーションのサイズを変更すると、これらの2つの列のコンテンツのサイズが一致するように変更されます。ちなみに、星形の行や列の絶対値は重要ではありません。重要なのは比率だけです。

動的レイアウトグリッドのサイズ変更

制約対制約のないレイアウト

Silverlightのレイアウトは、常に2つのモードのいずれかで発生します。ConstrainedまたはUnconstrainedのいずれかです。制約付きレイアウトは、コンテナが幅または高さを課すレイアウトです。たとえば、通常CSSを使用するWebブラウザーは、Silverlightプラグインの全体的なサイズを常に決定します。

いくつかの重要な機能は-

最上位要素のレイアウトは、水平および垂直の両方に制約されます。生成するレイアウトが何であれ、常にブラウザによって課されるサイズの結果になる必要があります。
一部の要素は Unconstrained Layoutになります。これは、要素が独自のサイズを自由に選択できることを意味します。たとえば、垂直 StackPanel 内の要素は垂直に制約されていません。
StackPanelは、必要な高さを与えます。実際、十分なスペースがない場合でもこれを行います。要素に必要な高さがあることを伝え、適合しないものはすべて切り取ります。
ほとんどのSilverlightユーザーインターフェイスには、これら2つのレイアウトスタイルが混在しています。親が制約を課すかどうかに関係なく、 StackPanel は常にスタッキングの方向に Unconstrained レイアウトを実行します。高さまたは幅が Auto に設定されている場合、グリッドの行または列にも同じことが当てはまります。

水平方向の幅を固定するコンテナ内にある要素があるとします。デフォルトでは、スペースを埋めるために要素が引き伸ばされます。配置を左、右、または中央に設定すると、制約が削除されます。

Constrained Unconstrained

要素は、必要な幅のみを取ります。もちろん、幅または高さを固定した制約を導入できます。

制約のない要素のサイズは通常、コンテンツによって決定されるため、制約のないレイアウトは「コンテンツに合わせたサイズ」と呼ばれることもあります。 *コンテンツのサイズは、Silverlightレイアウトの重要なアイデアです。表示されている情報にレイアウトが適応できるようにするものです。

Sr. No.

Controls & Description

1

GridSplitter

制約は、含まれているブラウザ、またはデザインの固定寸法から発生します。ただし、ユーザーに制約を課すと便利な場合があります。

2

ScrollViewer

一部のユーザーインターフェイスでは、使用可能なスペースに収まらないほど多くの情報を表示する必要があります。これに対する一般的な解決策の1つは、スクロール可能な領域を提供することです。 Silverlightは、ScrollViewerでこれを非常に簡単にします。

3

Border

ユーザーインターフェイスをレイアウトするときに留意すべきもう1つの有用な要素は、Borderです。

全画面モード

Silverlightプラグインは、画面全体を引き継ぐことができます。ヘルパークラスに設定して、フルスクリーンモードに移行できるプロパティがあります。ただし、セキュリティのためにいくつかの制約があります。 Webサイトが自由に画面を引き継ぐことを防ぎ、ユーザーのパスワードを要求するプロンプトを偽造するなどの悪事を行うため。

全画面モードに入るには、アプリケーションオブジェクトからHost.Contentプロパティを取得し、そのIsFullScreenプロパティをtrueに設定する必要があります。

プロパティを切り替える簡単な例を見てみましょう。これにより、全画面表示と通常表示の間で前後に切り替わります。

<UserControl x:Class = "FullScreenExample.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:DesignHeight = "300" d:DesignWidth = "400">

   <Border BorderBrush = "Gray" BorderThickness = "4" CornerRadius = "30" Padding = "20">

      <Border.Background>
         <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1">
            <GradientStop Offset = "0" Color = "Wheat"/>
            <GradientStop Offset = "1" Color = "BurlyWood"/>
         </LinearGradientBrush>
      </Border.Background>

      <Grid x:Name = "LayoutRoot">
         <Button x:Name = "fullScreenButton" HorizontalAlignment = "Center"
            VerticalAlignment = "Center" FontSize = "30" Width = "300"
            Height = "100" Content = "Go Full Screen" Click = "Button_Click"/>
      </Grid>

   </Border>

</UserControl>

以下は、フルスクリーンから通常への復帰を開始するC＃のコードです。* Host.Content オブジェクトの *FullScreenChanged イベントを処理することで、これがいつ起こるかを知ることができます。

using System;
using System.Windows;
using System.Windows.Controls;

namespace FullScreenExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
         App.Current.Host.Content.FullScreenChanged += Content_FullScreenChanged;
      }

      void Content_FullScreenChanged(object sender, EventArgs e) {

         if (Application.Current.Host.Content.IsFullScreen) {
            fullScreenButton.Content = "Return to Normal";
         } else {
            fullScreenButton.Content = "Go Full Screen";
         }
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         var content = Application.Current.Host.Content;
         content.IsFullScreen = !content.IsFullScreen;
      }

   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

フルスクリーンモード

ユーザーが[全画面表示]ボタンをクリックすると、全画面表示モードに切り替わります。

フルスクリーンボタン

ボタンのテキストが変更されていることに注意してください。現在、 Return to Normal と表示されています。もう一度クリックするか、Escapeキーを押すと、全画面モードから復帰します。

Silverlight-CSS

Silverlightコンテンツは常にWebページ内で実行されるため、オブジェクトタグは通常のCSSレイアウト規則に従います。プラグインが望ましいサイズをブラウザに戻す方法はないため、Silverlightコンテンツのサイズに関係なく、サイズと位置はWebページによって完全に決定されます。

デフォルトのSilverlightプロジェクトテンプレートは、オブジェクトタグにブラウザウィンドウ全体を与えるWebページにCSSを配置します。
デフォルトのXAMLのサイズは固定されているように見えますが、よく見ると、テンプレートがデザインの幅とデザインの高さのプロパティを設定していることがわかります。
これらは、Visual Studio、またはBlendに、デザイナーでユーザーインターフェイスをどのくらい大きく表示する必要があるかを伝えますが、実行時にサイズを変更できます。

ソリューションエクスプローラー*に、 *\ {プロジェクト名} TestPagel ファイルが表示されます。これは、次に示すように、Visual Studioで新しいSilverlightプロジェクトを作成するときに取得するデフォルトのHTMLです。

Silverlightプロジェクト

ここの上部のCSSは、HTMLと本文のスタイルを100％に設定しますが、これは少し奇妙に思えるかもしれません。

さまざまな設定を含む完全なhtmlファイルを次に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" >
   <head>
      <title>FirstExample</title>

      <style type = "text/css">
         html, body {
            height: 100%;
            overflow: auto;
         }

         body {
            padding: 0;
            margin: 0;
         }

         #silverlightControlHost {
            height: 100%;
            text-align:center;
         }
      </style>

      <script type = "text/javascript" src = "Silverlight.js"></script>

      <script type = "text/javascript">
         function onSilverlightError(sender, args) {
            var appSource = "";

            if (sender != null && sender != 0) {
               appSource = sender.getHost().Source;
            }

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
               return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
               errMsg += "File: " + args.xamlFile + "     \n";
               errMsg += "Line: " + args.lineNumber + "     \n";
               errMsg += "Position: " + args.charPosition + "     \n";
            } else if (errorType == "RuntimeError") {
               if (args.lineNumber != 0) {
                  errMsg += "Line: " + args.lineNumber + "     \n";
                  errMsg += "Position: " +  args.charPosition + "     \n";
               }

               errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
         }

      </script>

   </head>

   <body>

      <form id = "form1" runat = "server" style = "height:100%">
         <div id = "silverlightControlHost">

            <object data = "data:application/x-silverlight-2,"
               type = "application/xsilverlight-2" width = "100%" height = "100%">

               <param name = "source" value = "ClientBin/FirstExample.xap"/>
               <param name = "onError" value = "onSilverlightError"/>
               <param name = "background" value = "white"/>
               <param name = "minRuntimeVersion" value = "5.0.61118.0"/>
               <param name = "autoUpgrade" value = "true"/>

               <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
                  style = "textdecoration:none">
                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/>
               </a>

            </object>

            <iframe id = "_sl_historyFrame" style = "visibility:hidden;height:0px;
               width:0px;border:0px"></iframe>

         </div>

      </form>

   </body>

</html>

*silverlightControlHost* を見て、XAMLの既定のデザインの幅と高さと一致する、固定の高さ（300ピクセルなど）と幅400ピクセルの星を確認する必要があります。 アプリケーションの要件に応じてこれらの設定を変更することもできます。

重複するコンテンツ

デフォルトでは、SilverlightとHTMLコンテンツは画面上の同じスペースを共有できません。同じスペースを占めるように両方からコンテンツを作成すると、Silverlightコンテンツのみが表示されます。

これは、デフォルトでは、Silverlightがブラウザーに独自のプライベートウィンドウを要求し、その中にすべてのコンテンツをレンダリングするためです。ブラウザ内の子ウィンドウであるため、Webページの一部のように見えますが、コンテンツが重複することはありません。

これの主な理由はパフォーマンスです。画面上の独自のプライベート領域を取得することにより、SilverlightはレンダリングをWebブラウザーと調整する必要がありません。

ただし、コンテンツが重複していると便利な場合があります。支払うべきパフォーマンスの価格があります。 SilverlightとHTMLが画面上のスペースを共有する場合、アニメーションはそれほどスムーズに実行されないことがありますが、追加のレイアウトの柔軟性は価格に見合うかもしれません。重複するコンテンツを使用するには、ウィンドウレスモードを有効にする必要があります。

ウィンドウレスモードでは、Silverlightプラグインはブラウザーと同じターゲットウィンドウハンドラーにレンダリングされ、コンテンツが混ざり合います。
Zedインデックス、またはZインデックスは、コンテンツが重複している場合に重要です。 HTMLに関する限り、Silverlightコンテンツは単一のHTML要素であるため、HTML Zオーダーの正確な1箇所に表示されます。
これは、マウスの処理に影響を与えます。 SilverlightプラグインがHMTL Zオーダーの最上位にある場合、その境界ボックス内の任意の場所でのマウスアクティビティがプラグインに配信されます。
プラグインの一部の領域が透明で、背後にHTMLが表示されていても、クリックすることはできません。
ただし、一部のHTMLコンテンツを含むZインデックスを上に配置すると、Silverlightコンテンツとオーバーラップする場合でも、引き続きインタラクティブになります。

例

以下に示す簡単な例を見てください。この例では、コンテナを含むレイアウトがあり、3つのdivがすべて、このdivの内部でオーバーラップするように配置されています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" >
   <head>

      <title>HtmlOverlap</title>

      <style type = "text/css">
         #container {
            position: relative;
            height: 300px;
            font-size: small;
            text-align:justify;
         }

         #silverlightControlHost {
            position: absolute;
            width: 400px;
            height: 300px;
         }

         #underSilverlight {
            position: absolute;
            left: 4px;
            width: 196px;
         }

         #overSilverlight {
            position: relative;
            left: 204px;
            width: 196px;
         }

      </style>

      <script type = "text/javascript" src = "Silverlight.js"></script>

      <script type = "text/javascript">
         function onSilverlightError(sender, args) {
            var appSource = "";

            if (sender != null && sender != 0) {
               appSource = sender.getHost().Source;
            }

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
               return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " +
               appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
               errMsg += "File: " + args.xamlFile + "     \n";
               errMsg += "Line: " + args.lineNumber + "     \n";
               errMsg += "Position: " + args.charPosition + "     \n";
            } else if (errorType == "RuntimeError") {
               if (args.lineNumber != 0) {
                  errMsg += "Line: " + args.lineNumber + "     \n";
                  errMsg += "Position: " +  args.charPosition + "     \n";
               }

               errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
         }
      </script>

   </head>

   <body>
      <form id = "form1" runat = "server" style = "height:100%">

         <div id = 'container'>

            <div id = 'underSilverlight'>
               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.

               This is below. This is below. This is below. This is below. This is below.
            </div>

            <div id = "silverlightControlHost">

               <object data = "data:application/x-silverlight-2,"
                  type = "application/xsilverlight-2" width = "100%" height = "100%">

                  <param name = "source" value = "ClientBin/HtmlOverlap.xap"/>
                  <param name = "onError" value = "onSilverlightError"/>
                  <param name = "background" value = "transparent"/>
                  <param name = "windowless" value = "true"/>
                  <param name = "minRuntimeVersion" value = "4.0.50401.0"/>
                  <param name = "autoUpgrade" value = "true"/>

                  <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"
                     style = "text-decoration:none">

                  <img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
                     alt = "Get Microsoft Silverlight" style = "border-style:none"/> </a>

               </object>

               <iframe id = "_sl_historyFrame" style = "visibility:hidden; height:0px;
                  width:0px; border:0px"> </iframe>

            </div>

            <div id = 'overSilverlight'>
               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
                  This is on top. This is on top.

               This is on top. This is on top. This is on top. This is on top.
            </div>

         </div>

      </form>

   </body>

</html>

このdivは左に移動し、最初に来るためZオーダーの後ろになります。
次に、中央に、幅全体を埋めるSilverlightコンテンツがあります。
次に、この上に、右側にテキストを含むdivがあります-これは上にあります。

以下に、いくつかのプロパティとともに1つの四角形が追加されたXAMLファイルを示します。

<UserControl x:Class = "HtmlOverlap.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot">
      <Rectangle Margin = "0,120" Fill = "Aquamarine"/>
   </Grid>

</UserControl>

このアプリケーションを実行すると、2つの列が表示されます。1つは下に、もう1つは右上にあります。 Silverlightプラグインは、これらの両方と同じ領域にあり、Zオーダーでは、Silverlightコンテンツはこれら2つの中間にあります。

重複コンテンツ

ここで、半透明の緑色の塗りつぶしは、テキストの上にあるため、左側のテキストをわずかに色付けしていますが、テキストの背後にあるため、右側のテキストは色付けしていません。

右側のテキストを選択できます。左側のこのテキストでこれを試しても何も起こりません。これは、ブラウザーに関する限り、このスペース全体がSilverlightコントロールによって占有されているためです。 Zオーダーでテキストの上にあるため、入力を処理するSilverlightコントロール。

Silverlight-コントロール

すべてのコントロールには、マウスをその上に移動してボタンを押すとボタンが点灯する方法、リストボックスのスクロールおよび選択動作など、何らかのインタラクティブな動作があります。すべての場合において、コントロールは単純な可視性を超えています。見た目よりも複雑かもしれません。これらのコントロールは、親とコードの組み合わせです。開発者は、Silverlightを使用して、視覚的に充実したUIベースのアプリケーションを簡単に構築および作成できます。コントロールは、Silverlightを他の要素と区別します。

いくつかの重要な機能は-

他のUIフレームワークの従来のUI要素またはコントロールも、silverlightアプリケーションで強化されています。
ほとんどすべての標準のSilverlightコントロールは、 System.Windows.Controls の一部であるツールボックスにあります。
これらのコントロールは、XAMLマークアップ言語で作成することもできます。

Silverlightコントロールの完全な継承階層は次のとおりです-

Silverlight Controls

Silverlight-ボタン

*Button* クラスは、ボタンコントロールの最も基本的なタイプを表します。 Silverlightは、使い慣れた *Button* 、 *CheckBox* 、および *RadioButton* の3種類のボタンコントロールを認識します。 これらのコントロールはすべて、 *ButtonBase* から派生したコンテンツコントロールです。 Buttonクラスの階層継承は次のとおりです-

階層継承ボタン

以下に、ボタンの最も一般的に使用される*プロパティ*を示します。

Buttonの最も一般的に使用されるプロパティを以下に示します。

Sr. No.	Property & Description
1	Background コントロールの背景を提供するブラシを取得または設定します。（Controlから継承）
2	BorderBrush コントロールの境界線の塗りつぶしを記述するブラシを取得または設定します。（Controlから継承）
3	BorderThickness コントロールの境界線の太さを取得または設定します。（Controlから継承）
4	Content ContentControlのコンテンツを取得または設定します。（ContentControlから継承されます）
5	ClickMode デバイスの動作に関して、Clickイベントがいつ発生するかを示す値を取得または設定します。（ButtonBaseから継承）
6	ContentTemplate ContentControlのコンテンツを表示するために使用されるデータテンプレートを取得または設定します。（ContentControlから継承されます）
7	FontFamily コントロール内のテキストの表示に使用されるフォントを取得または設定します。（Controlから継承）
8	FontSize このコントロール内のテキストのサイズを取得または設定します。（Controlから継承）
9	FontStyle テキストがレンダリングされるスタイルを取得または設定します。（Controlから継承）
10	FontWeight 指定したフォントの太さを取得または設定します。（Controlから継承）
11	Foreground 前景色を説明するブラシを取得または設定します。（Controlから継承）
12	Height FrameworkElementの推奨される高さを取得または設定します。（FrameworkElementから継承されます）
13	HorizontalAlignment FrameworkElementがパネルやアイテムコントロールなどのレイアウトの親で構成されるときにFrameworkElementに適用される水平方向の配置特性を取得または設定します。（FrameworkElementから継承されます）
14	IsEnabled ユーザーがコントロールを操作できるかどうかを示す値を取得または設定します。（Controlから継承）
15	IsPressed ButtonBaseが現在押された状態にあるかどうかを示す値を取得します。（ButtonBaseから継承）
16	Margin FrameworkElementの外側のマージンを取得または設定します。（FrameworkElementから継承されます）
17	Name オブジェクトの識別名を取得または設定します。 XAMLプロセッサがXAMLマークアップからオブジェクトツリーを作成するとき、ランタイムコードはこの名前でXAML宣言されたオブジェクトを参照できます。（FrameworkElementから継承されます）
18	Opacity オブジェクトの不透明度を取得または設定します。（UIElementから継承）
19	Resources ローカルに定義されたリソースディクショナリを取得します。 XAMLでは、XAMLの暗黙的なコレクション構文を使用して、frameworkElement.Resourcesプロパティ要素の子オブジェクト要素としてリソース項目を確立できます。（FrameworkElementから継承されます）
20	Style レイアウトおよびレンダリング中にこのオブジェクトに適用されるインスタンススタイルを取得または設定します。（FrameworkElementから継承されます）
21	Template コントロールテンプレートを取得または設定します。コントロールテンプレートは、UIのコントロールの視覚的な外観を定義し、XAMLマークアップで定義されます。（Controlから継承）
22	VerticalAlignment FrameworkElementがパネルや項目コントロールなどの親オブジェクトで構成されるときにFrameworkElementに適用される垂直方向の配置特性を取得または設定します。（FrameworkElementから継承されます）
23	Visibility UIElementの可視性を取得または設定します。表示されないUIElementはレンダリングされず、目的のサイズをレイアウトに伝えません。（UIElementから継承）
24	Width FrameworkElementの幅を取得または設定します。（FrameworkElementから継承されます）

以下に示すのは、Buttonの一般的に使用される*メソッド*です。

以下に示すのは、最も一般的に使用されるButtonのメソッドです。

Sr. No.	Method & Description
1	ClearValue 依存関係プロパティのローカル値をクリアします。（DependencyObjectから継承）
2	FindName 指定された識別子名を持つオブジェクトを取得します。（FrameworkElementから継承されます）
3	OnApplyTemplate アプリケーションコードまたは内部プロセス（再構築レイアウトパスなど）がApplyTemplateを呼び出すたびに呼び出されます。最も簡単に言えば、これは、UI要素がアプリに表示される直前にメソッドが呼び出されることを意味します。このメソッドをオーバーライドして、クラスのデフォルトのテンプレート後ロジックに影響を与えます。（FrameworkElementから継承されます）
4	OnContentChanged Contentプロパティの値が変更されたときに呼び出されます。（ContentControlから継承されます）
5	OnDragEnter DragEnterイベントが発生する前に呼び出されます。（Controlから継承）
6	OnDragLeave DragLeaveイベントが発生する前に呼び出されます。（Controlから継承）
7	OnDragOver DragOverイベントが発生する前に呼び出されます。（Controlから継承）
8	OnDrop Dropイベントが発生する前に呼び出されます。（Controlから継承）
9	OnGotFocus GotFocusイベントが発生する前に呼び出されます。（Controlから継承）
10	OnKeyDown KeyDownイベントが発生する前に呼び出されます。（Controlから継承）
11	OnKeyUp KeyUpイベントが発生する前に呼び出されます。（Controlから継承）
12	OnLostFocus LostFocusイベントが発生する前に呼び出されます。（Controlから継承）
13	SetBinding 提供されたバインディングオブジェクトを使用して、FrameworkElementにバインディングをアタッチします。（FrameworkElementから継承されます）

以下に一般的に使用されるButtonの*イベント*を示します。

以下は、Buttonの最も一般的に使用されるイベントです。

Sr. No.	Event & Description
1	Click ボタンコントロールがクリックされたときに発生します。（ButtonBaseから継承）
2	DataContextChanged FrameworkElement.DataContextプロパティの値が変更されたときに発生します。（FrameworkElementから継承されます）
3	DragEnter 入力システムが、この要素をターゲットとして基になるドラッグイベントを報告したときに発生します。（UIElementから継承）
4	DragLeave 入力システムが、この要素を起点として基本的なドラッグイベントを報告したときに発生します。（UIElementから継承）
5	DragOver 入力システムが潜在的なドロップターゲットとしてこの要素を持つ基本的なドラッグイベントを報告するときに発生します。（UIElementから継承）
6	DragStarting ドラッグ操作が開始されたときに発生します。（UIElementから継承）
7	GotFocus UIElementがフォーカスを受け取ったときに発生します。（UIElementから継承）
8	Holding この要素のヒットテスト領域上で未処理のホールド操作が発生すると発生します。（UIElementから継承）
9	IsEnabledChanged IsEnabledプロパティが変更されたときに発生します。（Controlから継承）
10	KeyDown UIElementにフォーカスがあるときにキーボードキーが押されると発生します。（UIElementから継承）
11	KeyUp UIElementにフォーカスがあるときにキーボードキーが離されると発生します。（UIElementから継承）
12	LostFocus UIElementがフォーカスを失ったときに発生します。（UIElementから継承）
13	SizeChanged ActualHeightまたはActualWidthプロパティがFrameworkElementの値を変更したときに発生します。（FrameworkElementから継承されます）

Sr. No.	Buttons & Description
1	HyperlinkButton HyperlinkButtonは、標準のボタンの背景を描画しません。代わりに、指定したコンテンツを単にレンダリングします。
2	ToggleButton & RepeatButton RepeatButtonコントロールは、ボタンが押されている限り、Clickイベントを継続的に発生させます。 ToggleButtonコントロールは、2つの状態（クリックまたは非クリック）を持つボタンを表します。
3	CheckBox ユーザーが選択（チェック）または選択解除（チェック解除）できるコントロール。アプリケーションに適用する設定のリストなど、ユーザーが選択できるオプションのリストを提供します。
4	RadioButton RadioButtonは、ユーザーがオプションのグループから単一のオプションを選択できるボタンです。

Silverlight-コンテンツモデル

ボタンは、モデルコンテンツにフォームのコンテンツを提供します。モデルは、コントロールに多く現れます。考え方は簡単です。テキストだけでなく、あらゆるコンテンツを受け入れます。本当にエキゾチックなボタンを作成したい場合は、テキストボックスやボタンなどの他のコンテンツコントロールを内部に配置することもできます（これらの中に静止要素をネストします）。そのようなインターフェースが非常に理にかなっていることは疑わしいですが、可能です。

ボタン、内部ボタン、その他のコンテンツコントロールの簡単な例を見てみましょう。

<UserControl x:Class = "ContentModel.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Button Margin = "3" Height = "70" Width = "215">
         <Grid Margin = "5">
            <Polygon Points = "100,25 125,0 200,25 125,50" Fill = "LightSteelBlue"/>
            <Polygon Points = "100,25 75,0 0,25 75,50" Fill = "LightGray"/>
         </Grid>
      </Button>

   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次のボタンが表示されます。

コンテンツコントロール

RangeControl

スクロールバーとスライダーのコントロールは密接に関連しています。どちらも、ユーザーが特定の範囲から入力値を選択できるようにします。従来、これらのコントロールはさまざまなものを意味します。通常、スクロールバーは陰嚢領域に位置を設定するために使用されますが、スライダーは値または設定を指定するために使用されます。これらは単なる慣習です。コントロールには同様の動作とAPIがあります。

範囲コントロールは使いやすいです。スライダーで表現したい値の範囲を示すために、最小値と最大値を指定します。 Value プロパティは、ドラッグの使用が変わると変わります。

スライダー*クラスの階層的な継承は次のとおりです-

スライダーの継承

以下に、 Slider で一般的に使用される properties を示します。

Sliderの最も一般的に使用されるプロパティを以下に示します。

Sr. No.	Property & Description
1	Header コントロールのヘッダーのコンテンツを取得または設定します。
2	HeaderProperty Header依存プロパティを識別します。
3	HeaderTemplate コントロールのヘッダーのコンテンツを表示するために使用されるDataTemplateを取得または設定します。
4	HeaderTemplateProperty HeaderTemplate依存プロパティを識別します。
5	IntermediateValue 値がティック値またはステップ値のいずれかにスナップされる前に、ユーザーが操作している間にSliderの値を取得または設定します。 SnapsToプロパティは、スライダーの値を指定します。
6	IntermediateValueProperty IntermediateValue依存プロパティを識別します。
7	IsDirectionReversed 値が増加する方向を示す値を取得または設定します。
8	IsDirectionReversedProperty IsDirectionReversed依存プロパティを識別します。
9	IsThumbToolTipEnabled スライダーの値がSliderのThumbコンポーネントのツールヒントに表示されるかどうかを決定する値を取得または設定します。
10	IsThumbToolTipEnabledProperty IsThumbToolTipEnabled依存プロパティを識別します。
11	Orientation スライダーの方向を取得または設定します。
12	OrientationProperty Orientation依存プロパティを識別します。
13	StepFrequency ステップを作成する値範囲の値部分を取得または設定します。
14	StepFrequencyProperty StepFrequency依存プロパティを識別します。
15	ThumbToolTipValueConverter Sliderの範囲値をツールヒントコンテンツに変換するコンバーターロジックを取得または設定します。
16	ThumbToolTipValueConverterProperty ThumbToolTipValueConverter依存プロパティを識別します。
17	TickFrequency 目盛りを作成する値の範囲の増分を取得または設定します。
18	TickFrequencyProperty TickFrequency依存プロパティを識別します。
19	TickPlacement トラックに対して目盛りを描画する場所を示す値を取得または設定します。
20	TickPlacementProperty TickPlacement依存プロパティを識別します。

以下は、 Slider クラスで一般的に使用される events です。

Sliderで最も一般的に使用されるイベントを以下に示します。

Sr. No.	Event & Description
1	ManipulationCompleted UIElementの操作が完了したときに発生します。（UIElementから継承）
2	ManipulationDelta 入力デバイスが操作中に位置を変更すると発生します。（UIElementから継承）
3	ManipulationInertiaStarting 入力デバイスが操作中にUIElementオブジェクトとの接触を失い、慣性が始まると発生します。（UIElementから継承）
4	ManipulationStarted 入力デバイスがUIElementで操作を開始すると発生します。（UIElementから継承）
5	ManipulationStarting 操作プロセッサが最初に作成されたときに発生します。（UIElementから継承）
6	ValueChanged 範囲の値が変更されたときに発生します。（RangeBaseから継承）

以下は、スライダークラスで一般的に使用される*メソッドです。

Sliderで最も一般的に使用される方法を以下に示します。

Sr. No.	Method & Description
1	OnManipulationCompleted ManipulationCompletedイベントが発生する前に呼び出されます。（Controlから継承）
2	OnManipulationDelta ManipulationDeltaイベントが発生する前に呼び出されます。（Controlから継承）
3	OnManipulationInertiaStarting ManipulationInertiaStartingイベントが発生する前に呼び出されます。（Controlから継承）
4	OnManipulationStarted ManipulationStartedイベントが発生する前に呼び出されます。（Controlから継承）
5	OnManipulationStarting ManipulationStartingイベントが発生する前に呼び出されます。（Controlから継承）
6	OnMaximumChanged Maximumプロパティが変更されたときに呼び出されます。（RangeBaseから継承）
7	OnMinimumChanged Minimumプロパティが変更されたときに呼び出されます。（RangeBaseから継承）
8	OnValueChanged ValueChangedルーティングイベントを発生させます。（RangeBaseから継承）
9	SetBinding 提供されたバインディングオブジェクトを使用して、FrameworkElementにバインディングをアタッチします。（FrameworkElementから継承されます）
10	SetValue DependencyObjectの依存関係プロパティのローカル値を設定します。（DependencyObjectから継承）

例

スライダーと楕円が追加され、スライダーが楕円の幅を制御する簡単な例を見てみましょう。

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

   <Grid x:Name = "LayoutRoot">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition/>
      </Grid.RowDefinitions>

      <Slider Minimum = "1" Maximum = "400" Value = "1"
         ValueChanged = "Slider_ValueChanged"/>

      <Ellipse Grid.Row = "1" Fill = "Aqua" Width = "1" x:Name = "myEllipse"/>

   </Grid>

</UserControl>

以下に示すのは、C＃の value changed event 実装です。

using System.Windows;
using System.Windows.Controls;

namespace SliderExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void Slider_ValueChanged(object sender,
         RoutedPropertyChangedEventArgs<double> e) {

            if (myEllipse != null) {
               myEllipse.Width = e.NewValue;
            }
      }
   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。ご覧のとおり、スライダーを左から右に動かすと、楕円の幅が広がります。

スライダーと楕円を追加

Silverlight-リストボックス

リストボックスは、アイテムを選択するためにユーザーにアイテムのリストを提供するコントロールです。ユーザーは、事前定義されたアイテムのリストから一度に1つ以上のアイテムを選択できます。 ListBox では、ユーザーの操作なしで、複数のオプションが常にユーザーに表示されます。

リストボックスは、スクロール可能なアイテムのリストを表示します。ユーザーがアイテムを選択すると、選択したアイテムの外観が変わり、選択を示します。コンテンツモデルとボタンのより広範な形式をサポートします。ボタンとリストボックスの主な違いは、ボタンには1つのコンテンツが含まれるのに対して、リストボックスではリスト内のすべてのアイテムが許可されることです。

ListBoxクラスの階層的な継承は次のとおりです-

継承リストボックス

以下は、 ListBox クラスで一般的に使用される Properties です。

以下は、ListBoxの最も一般的に使用されるプロパティです。

Sr. No.	Property & Description
1	Background コントロールの背景を提供するブラシを取得または設定します。（Controlから継承）
2	BorderThickness コントロールの境界線の太さを取得または設定します。（Controlから継承）
3	FontFamily コントロール内のテキストの表示に使用されるフォントを取得または設定します。（Controlから継承）
4	FontSize このコントロール内のテキストのサイズを取得または設定します。（Controlから継承）
5	FontStyle テキストがレンダリングされるスタイルを取得または設定します。（Controlから継承）
6	FontWeight 指定したフォントの太さを取得または設定します。（Controlから継承）
7	Foreground 前景色を説明するブラシを取得または設定します。（Controlから継承）
8	GroupStyle グループの各レベルの外観を定義するGroupStyleオブジェクトのコレクションを取得します。（ItemsControlから継承）
9	Height FrameworkElementの推奨される高さを取得または設定します。（FrameworkElementから継承されます）
10	HorizontalAlignment FrameworkElementがパネルやアイテムコントロールなどのレイアウトの親で構成されるときにFrameworkElementに適用される水平方向の配置特性を取得または設定します。（FrameworkElementから継承されます）
11	IsEnabled ユーザーがコントロールを操作できるかどうかを示す値を取得または設定します。（Controlから継承）
12	Item コントロールのコンテンツを生成するために使用されるコレクションを取得します。（ItemsControlから継承）
13	ItemsSource ItemsControlのコンテンツの生成に使用されるオブジェクトソースを取得または設定します。（ItemsControlから継承）
14	Margin FrameworkElementの外側のマージンを取得または設定します。（FrameworkElementから継承されます）
15	Name オブジェクトの識別名を取得または設定します。 XAMLプロセッサがXAMLマークアップからオブジェクトツリーを作成するとき、ランタイムコードはこの名前でXAMLで宣言されたオブジェクトを参照できます。（FrameworkElementから継承されます）
16	Opacity オブジェクトの不透明度を取得または設定します。（UIElementから継承）
17	SelectedIndex 選択された項目のインデックスを取得または設定します。（セレクターから継承）
18	SelectedItem 選択した項目を取得または設定します。（セレクターから継承）
19	SelectedValue SelectedValuePathを使用して取得した、選択された項目の値を取得または設定します。（セレクターから継承）
20	Style レイアウトおよびレンダリング中にこのオブジェクトに適用されるインスタンススタイルを取得または設定します。（FrameworkElementから継承されます）
21	VerticalAlignment FrameworkElementがパネルや項目コントロールなどの親オブジェクトで構成されるときにFrameworkElementに適用される垂直方向の配置特性を取得または設定します。（FrameworkElementから継承されます）
22	Width FrameworkElementの幅を取得または設定します。（FrameworkElementから継承されます）

以下は、 ListBox で最も一般的に使用される*イベント*です。

以下は、ListBoxで最も一般的に使用されるイベントです。

Sr. No.	Event & Description
1	DragEnter 入力システムが、この要素をターゲットとして基になるドラッグイベントを報告したときに発生します。（UIElementから継承）
2	DragLeave 入力システムが、この要素を起点として基本的なドラッグイベントを報告したときに発生します。（UIElementから継承）
3	DragOver 入力システムが潜在的なドロップターゲットとしてこの要素を持つ基本的なドラッグイベントを報告するときに発生します。（UIElementから継承）
4	DragStarting ドラッグ操作が開始されたときに発生します。（UIElementから継承）
5	Drop 入力システムが、この要素をドロップターゲットとして基になるドロップイベントを報告したときに発生します。（UIElementから継承）
6	DropCompleted ドラッグアンドドロップ操作が終了したときに発生します。（UIElementから継承）
7	GotFocus UIElementがフォーカスを受け取ったときに発生します。（UIElementから継承）
8	IsEnabledChanged IsEnabledプロパティが変更されたときに発生します。（Controlから継承）
9	KeyDown UIElementにフォーカスがあるときにキーボードキーが押されると発生します。（UIElementから継承）
10	KeyUp UIElementにフォーカスがあるときにキーボードキーが離されると発生します。（UIElementから継承）
11	LostFocus UIElementがフォーカスを失ったときに発生します。（UIElementから継承）
12	SelectionChanged 現在選択されている項目が変更されたときに発生します。（セレクターから継承）
13	SizeChanged ActualHeightまたはActualWidthプロパティがFrameworkElementの値を変更したときに発生します。（FrameworkElementから継承されます）

以下は、 ListBox で最も一般的に使用される Methods です。

以下は、ListBoxの最も一般的に使用されるメソッドです。

Sr. No.	Method & Description
1	Arrange 子オブジェクトを配置し、UIElementのサイズを決定します。子要素のカスタムレイアウトを実装する親オブジェクトは、レイアウトオーバーライド実装からこのメソッドを呼び出して、再帰的なレイアウト更新を形成する必要があります。（UIElementから継承）
2	FindName 指定された識別子名を持つオブジェクトを取得します。（FrameworkElementから継承されます）
3	Focus コントロールにフォーカスを設定しようとします。（Controlから継承）
4	GetValue DependencyObjectから依存関係プロパティの現在の有効値を返します。（DependencyObjectから継承）
5	IndexFromContainer 指定され生成されたコンテナを持つアイテムのインデックスを返します。（ItemsControlから継承）
6	OnDragEnter DragEnterイベントが発生する前に呼び出されます。（Controlから継承）
7	OnDragLeave DragLeaveイベントが発生する前に呼び出されます。（Controlから継承）
8	OnDragOver DragOverイベントが発生する前に呼び出されます。（Controlから継承）
9	OnDrop Dropイベントが発生する前に呼び出されます。（Controlから継承）
10	OnKeyDown KeyDownイベントが発生する前に呼び出されます。（Controlから継承）
11	OnKeyUp KeyUpイベントが発生する前に呼び出されます。（Controlから継承）
12	OnLostFocus LostFocusイベントが発生する前に呼び出されます。（Controlから継承）
13	ReadLocalValue ローカル値が設定されている場合、依存関係プロパティのローカル値を返します。（DependencyObjectから継承）
14	SetBinding 提供されたバインディングオブジェクトを使用して、FrameworkElementにバインディングをアタッチします。（FrameworkElementから継承されます）
15	SetValue DependencyObjectの依存関係プロパティのローカル値を設定します。（DependencyObjectから継承）

*ListBox* にさまざまなUI要素が追加されている簡単な例を見てみましょう。

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

   <Grid x:Name = "LayoutRoot">

      <ListBox x:Name = "myList">

         <TextBlock Text = "First item"/>
         <Button Content = "Second item"/>
         <Path Fill = "Blue" Data = "M4,0 l-4,10 8,0z M15,0 l-4,10 8,0z M26,0 l4,10 8,0z"
            Margin = "10"/>

         <StackPanel Orientation = "Horizontal">
            <Ellipse Fill = "Red" Height = "30" Width = "100"/>
            <TextBlock Text = "Name: "/>
            <TextBox Width = "200"/>
         </StackPanel>

         <TextBlock Text = "More..."/>

      </ListBox>

   </Grid>

</UserControl>

以下にC＃の実装を示します。

using System.Windows.Controls;

namespace ListBoxExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();

         myList.Items.Add("String entry");
         myList.Items.Add(new Button { Content = "Content entry" });
      }
   }
}

上記のコードをコンパイルして実行すると、グラフィックテキストとテキストを入力できる編集可能なフィールドが混在したリストボックスが表示されます。

リストボックスにUI要素を追加

Sr. No.	Controls & Description
1	Calendar & DatePicker Calendar＆DatePickerは、ユーザーが視覚的なカレンダー表示を使用して日付を選択できるようにするコントロールを表します。マウスまたはキーボードを使用した基本的なナビゲーションを提供します。
2	TabControl アイテムを個別のタブに配置し、ユーザーが一度に1つのタブのみを表示できるようにするコンテナー。ユーザーは、タブヘッダーをクリックして、さまざまなビューから選択できます。
3	Popup このクラスは、アプリケーションウィンドウの境界内で、既存のコンテンツの上にコンテンツを表示します。他のコンテンツに一時的に表示されます。
4	ToolTip ツールチップは、GUIの要素の情報を表示するポップアップウィンドウを作成するコントロールを表します。 Silverlightでは、任意のコントロールにツールチップを添付できます。

Silverlight-テンプレート

テンプレート*は、コントロールの全体的な外観と外観を記述します。各コントロールには、関連付けられたデフォルトのテンプレートがあり、そのコントロールに外観を与えます。

WPFアプリケーションでは、コントロールの視覚的な動作と視覚的な外観をカスタマイズするときに、独自のテンプレートを簡単に作成できます。

いくつかの重要な機能は-

 *すべてのUI要素には、ある種の外観と動作があります。* ボタン*には外観と動作があります。
* *Click* イベントまたは *mouse hover* イベントは、クリックおよびホバーに応答して起動される動作であり、 *Control* テンプレートで変更できるボタンのデフォルトの外観があります。

テンプレートでボタンが定義されている簡単な例をもう一度見てみましょう。

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

   <Grid x:Name = "LayoutRoot" HorizontalAlignment = "Center"
      VerticalAlignment = "Center">

      <Button Height = "100" Width = "100" Content = "Click!"
         HorizontalContentAlignment = "Left" Click = "button_Click">

         <Button.Template>
            <ControlTemplate TargetType = "Button">

               <Grid>

                  <Ellipse Fill = "Gray" Stroke = "Black"
                     StrokeThickness = "3" Margin = "-64,0,0,0"/>

                  <ContentPresenter HorizontalAlignment = "{TemplateBinding
                     HorizontalContentAlignment}" VerticalAlignment = "Center"
                     Content = "{TemplateBinding Content}"/>
               </Grid>

            </ControlTemplate>

         </Button.Template>

      </Button>

   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

ボタンをクリック

テンプレートの接続

テンプレート化するコントロール機能はすべて、テンプレートバインディングを使用しています。一部の側面はもう少し複雑です。たとえば、フォームのコンテンツモデルがある場合は常に、テンプレートバインディングだけではボタンに表示されるものでは不十分です。上記の例に示すように、コンテンツプレゼンターも使用する必要があります。

Silverlight-視覚状態

アプリケーションのどのビットが入力に応答する可能性が高いかをユーザーが確認できると便利です。ある程度までは、ボタンをボタンのように見せることでこれを実現できます。何かがクリック可能に見える場合は、おそらくそうです。

ただし、現代のユーザーインターフェイス設計の慣習では、ユーザーインターフェイス要素は、マウスが親の上に移動したときに親を変更することで応答する意欲を示す必要があります。

たとえば、組み込みのボタンコントロールは、マウスが上に移動すると背景がわずかに変化し、対話型であることを示唆し、クリックすると親がさらに変化して選択されたように見えます。ほとんどすべてのコントロールがこれを行う必要があり、デザイナーはアニメーションを作成および編集してそれを実現する方法が必要です。

州および州グループ

実際の視覚状態の例を見てみましょう。チェックボックスを検討してください。チェックされていないか、チェックされている場合があり、選択した場合は、3番目の不確定状態をサポートできます。コントロールは、3つのケースすべてで異なって見える必要があります。したがって、3つの視覚状態があります。

州グループチェックボックス

ユーザー入力に応答する準備ができていることを示すため、マウスが上に移動するとチェックボックスの外観がわずかに変化し、マウスをそこに保持するとさらに変化します。チェックボックスが無効になっている場合、4番目の状態を考慮する必要があります。見栄えがよく、ユーザー入力に応答しないことを通知します。

チェックボックスの変更

したがって、ここには別の4つの状態があります。常に、チェックボックスの視覚状態は、標準、マウスオーバー、チェック済み、または*無効*のいずれかでなければなりません。同時に、 checked、unchecked 、または indeterminate のいずれかでなければなりません。

ビジュアルステートマネージャー

テンプレートはコントロールの外観を定義するため、テンプレートは各視覚状態に何が起こるかを定義する必要があります。これまでに見てきたテンプレートには、そのような情報は含まれていません。その結果、現在の状態に関係なく、コントロールの外観は静的なままです。

テンプレートに視覚的な状態を追加するには、最初にプロパティ要素を追加します。

視覚的な状態処理のためにできる最も簡単なことは、コントロールが特定の状態になったときに実行されるアニメーションを定義することです。
コントロールは、状態を変更するたびに視覚状態マネージャークラスに通知します。
次に、視覚状態マネージャーはテンプレートのこのセクションを調べて、実行するアニメーションを見つけます。
したがって、チェックボックスがマウスオーバーステートに入ると、このアニメーションが実行され、テンプレートの一部の色が変更されます。

視覚的な状態メカニズムを使用して、状態の変化を反映するチェックボックスのカスタムテンプレートを作成することにより、簡単な例を見てみましょう。

以下に示すのは、 visual state のチェックボックスのカスタムテンプレートのXAMLコードです。

<UserControl
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class = "CheckboxVisualState.Page"
   Width = "640" Height="480"
   xmlns:vsm = "clrnamespace:System.Windows;assembly = System.Windows"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">

   <UserControl.Resources>
      <ControlTemplate x:Key = "CheckBoxControlTemplate1" TargetType = "CheckBox">

         <Grid>

            <vsm:VisualStateManager.VisualStateGroups>

               <vsm:VisualStateGroup x:Name = "FocusStates">
                  <vsm:VisualState x:Name = "ContentFocused"/>
                  <vsm:VisualState x:Name = "Focused"/>
                  <vsm:VisualState x:Name = "Unfocused"/>
               </vsm:VisualStateGroup>

               <vsm:VisualStateGroup x:Name = "CommonStates">

                  <vsm:VisualStateGroup.Transitions>
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/>
                  </vsm:VisualStateGroup.Transitions>

                  <vsm:VisualState x:Name = "MouseOver">

                     <Storyboard>

                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00"
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background"
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)">

                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFFF0000"/>
                        </ColorAnimationUsingKeyFrames>

                     </Storyboard>

                  </vsm:VisualState>

                  <vsm:VisualState x:Name = "Pressed">

                     <Storyboard>

                        <ColorAnimationUsingKeyFrames BeginTime = "00:00:00"
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "background"
                           Storyboard.TargetProperty = "(Shape.Fill).
                           (SolidColorBrush.Color)">

                              <SplineColorKeyFrame KeyTime = "00:00:00" Value = "#FFCEFF00"/>
                        </ColorAnimationUsingKeyFrames>

                     </Storyboard>

                  </vsm:VisualState>

                  <vsm:VisualState x:Name = "Disabled"/>
                  <vsm:VisualState x:Name = "Normal"/>

               </vsm:VisualStateGroup>

               <vsm:VisualStateGroup x:Name = "CheckStates">

                  <vsm:VisualStateGroup.Transitions>
                     <vsm:VisualTransition GeneratedDuration = "00:00:00.5000000"/>
                  </vsm:VisualStateGroup.Transitions>

                  <vsm:VisualState x:Name = "Checked">

                     <Storyboard>

                        <DoubleAnimationUsingKeyFrames BeginTime = "00:00:00"
                           Duration = "00:00:00.0010000" Storyboard.TargetName = "checkPath"
                           Storyboard.TargetProperty = "(UIElement.Opacity)">

                              <SplineDoubleKeyFrame KeyTime = "00:00:00" Value = "1"/>
                        </DoubleAnimationUsingKeyFrames>

                     </Storyboard>

                  </vsm:VisualState>

                  <vsm:VisualState x:Name = "Unchecked"/>
                  <vsm:VisualState x:Name = "Indeterminate"/>

               </vsm:VisualStateGroup>

            </vsm:VisualStateManager.VisualStateGroups>

            <Grid.ColumnDefinitions>

               <ColumnDefinition Width = "Auto"/>
                  <ColumnDefinition Width = "3.61782296696066"/>
               <ColumnDefinition Width = "Auto"/>

            </Grid.ColumnDefinitions>

            <Canvas Height = "50" HorizontalAlignment = "Left" VerticalAlignment = "Top"
               Width = "50">

               <Rectangle Height = "33.746" x:Name = "background" Width = "33.746"
                  Canvas.Left = "8.452" Canvas.Top = "7.88" Fill = "#FFFFFFFF"
                  Stroke = "#FF000000"
                  RadiusX = "5.507" RadiusY = "5.507"/>

               <Path Height = "40.25" x:Name = "checkPath" Width = "39.75" Opacity = "0"
                  Canvas.Left = "5.959" Canvas.Top = "7.903" Stretch = "Fill"
                  Stroke = "#FF1F9300" StrokeThickness = "3"
                  Data = "M1.5,1.5 C15.495283,8.7014561 27.056604,18.720875 33.75,33.75
                  M36,3.75 C22.004717,10.951456 10.443395,20.970875 3.7499986,36"/>

            </Canvas>

            <ContentPresenter HorizontalAlignment = "Left"
               Margin = "{TemplateBinding Padding}"
               VerticalAlignment = "{TemplateBinding VerticalContentAlignment}"
               Grid.Column = "2" Grid.ColumnSpan = "1" d:LayoutOverrides = "Height"/>

         </Grid>

      </ControlTemplate>

   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot" Background = "White" >
      <CheckBox HorizontalAlignment = "Left"
         Margin = "52.5410003662109,53.5970001220703,0,0" VerticalAlignment = "Top"
         Template = "{StaticResource CheckBoxControlTemplate1}"
         Content = "CheckBox"/>
   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次のWebページが表示されます。このページには、 checkbox が1つ含まれています。

テンプレートチェックボックス

カーソルがチェックボックス領域に入ると、カーソルは状態を変更します。

状態の変更

チェックボックス*をクリックすると、次の状態が表示されます。

状態の変更を実行

理解を深めるために、上記の例を実行することをお勧めします。

Silverlight-データバインディング

データバインディングは、Silverlightアプリケーションのメカニズムであり、Windowsランタイムアプリが部分クラスを使用してデータを表示および操作するシンプルで簡単な方法を提供します。データの管理は、このメカニズムでデータが表示される方法から完全に分離されています。データバインディングにより、UI要素とユーザーインターフェイス上のデータオブジェクト間のデータフローが可能になります。バインディングが確立され、データまたはビジネスモデルが変更されると、更新がUI要素に自動的に反映され、その逆も同様です。標準のデータソースではなく、ページ上の別の要素にバインドすることもできます。

データバインディングには、次の2つのタイプがあります-

一方向のデータバインディング
双方向のデータバインディング

一方向データバインディング

一方向のデータバインディングでは、データはソース（データを保持するオブジェクト）からターゲット（データを表示するオブジェクト）にバインドされます。

一方向のデータバインディングの簡単な例を見てみましょう。

以下は、2つのラベル、2つのテキストボックス、1つのボタンがいくつかのプロパティで作成されたXAMLコードです。

<UserControl x:Class = "DataBinding.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "Auto"/>
         <ColumnDefinition Width = "200"/>
      </Grid.ColumnDefinitions>

      <TextBlock Name = "nameLabel" Margin = "2">Name:</TextBlock>
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
         Text = "{Binding Name, Mode=OneWay}"/>

      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">Age:</TextBlock>

      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin="2"
         Text = "{Binding Age, Mode = OneWay}"/>

      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
         <Button Content = "_Show..." Click = "Button_Click"/>
      </StackPanel>

   </Grid>

</UserControl>

私たちは次のことを観察します-

両方のテキストボックスのテキストプロパティは、「 Name 」および「 Age 」にバインドされます。これらは、以下に示す Person クラスのクラス変数です。
Person クラスには、 Name と Age という2つの変数のみがあり、そのオブジェクトは MainPage クラスで初期化されます。
XAMLコードでは、プロパティ Name およびAgeにバインドしていますが、どのプロパティがオブジェクトに属するかは選択していません。
簡単な方法は、以下に示すように、 MainPage コンストラクターのC＃コードでプロパティをバインドしている DataContext にオブジェクトを割り当てることです。

using System.Windows;
using System.Windows.Controls;

namespace DataBinding {

   public partial class MainPage : UserControl {
      Person person = new Person { Name = "Salman", Age = 26 };

      public MainPage() {
         InitializeComponent();
         this.DataContext = person;
      }

      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age;
         MessageBox.Show(message);
      }
   }

   public class Person {
      private string nameValue;

      public string Name {
         get { return nameValue; }
         set { nameValue = value; }
      }

      private double ageValue;

      public double Age {
         get { return ageValue; }

         set {
            if (value != ageValue) {
               ageValue = value;
            }
         }
      }
   }
}

このアプリケーションを実行すると、Webページで、そのPersonオブジェクトのNameとAgeに正常にバインドされたことをすぐに確認できます。

Object to DataContext

表示*ボタンを押すと、メッセージボックスに名前と年齢が表示されます。

メッセージの表示

上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。

名前と年齢の変更

ここで、*表示*ボタンをクリックすると、同じメッセージが再び表示されます。

メッセージの表示

これは、 data-binding モードがXAMLコードでonewayに設定されているためです。更新されたメッセージを表示するには、双方向のデータバインディングを理解する必要があります。

双方向のデータバインディング

双方向バインディング*では、ユーザーはユーザーインターフェイスを介してデータを変更し、そのデータをソースで更新できます。ユーザーがビューを見ているときにソースが変更された場合、ビューを更新する必要があります。

同じ例を見てみましょうが、以下に示すように、XAMLコードでバインディングモードを一方向から双方向に変更するだけです。

<UserControl x:Class = "DataBinding.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "*"/>
      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>
         <ColumnDefinition Width = "Auto"/>
         <ColumnDefinition Width = "200"/>
      </Grid.ColumnDefinitions>

      <TextBlock Name = "nameLabel" Margin = "2">_Name:</TextBlock>

      <TextBox Name = "nameText" Grid.Column = "1" Margin = "2"
         Text = "{Binding Name, Mode=TwoWay}"/>

      <TextBlock Name = "ageLabel" Margin = "2" Grid.Row = "1">_Age:</TextBlock>

      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "2"
         Text = "{Binding Age, Mode = TwoWay}"/>

      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2">
         <Button Content = "_Show..." Click = "Button_Click"/>
      </StackPanel>

   </Grid>

</UserControl>

このアプリケーションを再度実行すると、同じ出力が表示されます。

Object to DataContext

上記のダイアログボックスで*名前*と*年齢*を変更してみましょう。

名前と年齢の変更

ここで、*表示*ボタンをクリックすると、更新されたメッセージが表示されます。

名前と年齢の値を変更

Silverlight-ブラウザー統合

この章では、ブラウザー統合サポートを使用して、SilverlightアプリケーションがWebページと連携して動作する方法を説明します。

次の2つの方法で、ブラウザーとSilverlightの統合を検討できます-

ブラウザで実行されているJavaScriptコードは、Silverlightアプリケーション内の機能にアクセスできます。
Silverlightには、オブジェクトのJavaScriptラッパーを提供する機能があります。 Silverlightプラグイン内で実行される .NET コードは、JavaScriptオブジェクトのSilverlight .NET ラッパーにより、HTML DOMおよびその他のブラウザースクリプト機能にアクセスできます。

ブラウザベースのソフトウェアアプリケーションがクライアントに情報を永続的に保存する方法を確認します。

SilverlightとHTML

HTMLの世界に関する限り、Silverlightコンテンツはただの要素です。これはレイアウトにも当てはまります。 Silverlightプラグイン全体とそのすべてのコンテンツは、1つのオブジェクト要素のように見えます。

あなたはそれを覚えておく必要があります-

SilverlightはHTMLの代わりではなく、それを補完するように設計されています。したがって、DOMの別の要素にのみアクセスできることが重要です。
適切な場所でSilverlightを使用できます。
主にHTMLを使用するページでは、ブラウザーの世界とのSilverlightの統合は、通常のHTMLレイアウトに従って、単にDOM要素として存在するだけではありません。

DOMへのアクセス

Silverlightコンテンツは、Webページに完全に参加できる必要があります。したがって、HTML DOMにアクセスできるはずです。 Silverlightは、ブラウザースクリプトオブジェクトをシステム内の* Scriptオブジェクト*クラスであるDot Netオブジェクトとしてラップするブリッジオブジェクトを提供します。ブラウザーの名前空間には、ブラウザースクリプトオブジェクトのプロパティの読み取りと書き込み、および関数の割り当てを可能にするメソッドが用意されています。

そもそもScriptオブジェクトを保持する方法が必要です。 Silverlightは、スクリプトオブジェクトなどの機能のさまざまなページにアクセスできるHTMLページクラスを提供します。

いくつかの属性を持つオブジェクトを作成する簡単なスクリプトがある簡単な例を見てみましょう。それらのいくつかは単なる値であり、それらのいくつかは関数です。

<script type = "text/javascript">
   myJsObject = {
      answer: 42,
      message: "Hello, world",
      modifyHeading: function(title)
         { document.getElementById('heading').innerHTML = title; },
      performReallyComplexCalculation: function(x, y) { return x + y; }
   };

</script>

以下に、ボタンが追加されたXAMLコードを示します。

<UserControl x:Class = "DomAccess.Page"
   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">
      <Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30"
         Click = "useDomButton_Click"/>
   </Grid>

</UserControl>

これは、HTMLファイルで作成されるスクリプトが呼び出されるボタンクリック実装です。

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;
using System.Windows.Browser;

using System.Diagnostics;

namespace DomAccess {

   public partial class Page : UserControl {

      public Page() {
         InitializeComponent();
      }

      private void useDomButton_Click(object sender, RoutedEventArgs e) {
         ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;
         string[] propertyNames = { "answer", "message", "modifyHeading",
            "performReallyComplexCalculation" };

         foreach (string propertyName in propertyNames) {
            object value = myJsObject.GetProperty(propertyName);
            Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType());
         }

         object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);
         HtmlElement h1 = HtmlPage.Document.GetElementById("heading");
         h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)");
         h1.SetStyleAttribute("height", "200px");
      }
   }
}

以下に完全なHTMLファイルを示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" >
   <!-- saved from url = (0014)about:internet -->

   <head>
      <title>DomAccess</title>

      <script type = "text/javascript">

         myJsObject = {
            answer: 42,
            message: "Hello, world",
            modifyHeading: function(title) {
               document.getElementById('heading').innerHTML = title; },
            performReallyComplexCalculation: function(x, y) { return x + y; }
         };

      </script>

      <style type = "text/css">

         html, body {
            height: 100%;
            overflow: auto;
         }

         body {
            padding: 0;
            margin: 0;
         }

         #silverlightControlHost {
            height: 100%;
         }

      </style>

      <script type = "text/javascript" src = "Silverlight.js"></script>

      <script type = "text/javascript">

         function onSilverlightError(sender, args) {
            var appSource = "";

            if (sender != null && sender != 0) {
               appSource = sender.getHost().Source;
            }

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            var errMsg = "Unhandled Error in Silverlight 2 Application " +
               appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
               errMsg += "File: " + args.xamlFile + "     \n";
               errMsg += "Line: " + args.lineNumber + "     \n";
               errMsg += "Position: " + args.charPosition + "     \n";
            } else if (errorType == "RuntimeError") {

               if (args.lineNumber != 0) {
                  errMsg += "Line: " + args.lineNumber + "     \n";
                  errMsg += "Position: " +  args.charPosition + "     \n";
               }

               errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
         }

      </script>

   </head>

   <body>

      <!-- Runtime errors from Silverlight will be displayed here.
         This will contain debugging information and should be removed or hidden when
         debugging is completed -->

      <div id = 'errorLocation' style = "font-size: small;color: Gray;"></div>

      <h1 id = 'heading'></h1>

      <div id = "silverlightControlHost">

         <object data = "data:application/x-silverlight-2,"
            type = "application/x-silverlight-2" width = "100%" height = "100%">

            <param name = "source" value = "ClientBin/DomAccess.xap"/>
            <param name = "onerror" value = "onSilverlightError"/>
            <param name = "background" value = "white"/>
            <param name = "minRuntimeVersion" value = "2.0.30923.0"/>
            <param name = "autoUpgrade" value = "true"/>

            <a href = "http://go.microsoft.com/fwlink/?LinkID=124807"
               style = "text-decoration: none;">
               <img src = "http://go.microsoft.com/fwlink/?LinkId=108181"
               alt = "Get Microsoft Silverlight" style = "border-style: none"/>
            </a>

         </object>

         <iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe>

      </div>

   </body>

</html>

上記のコードをコンパイルして実行すると、出力ファイルにすべての値が表示され、HTMLファイルから取得されます。

DOMへのアクセス

Silverlight-ブラウザー外アプリケーション

次に、エンドユーザーのマシンにインストールして、通常のWindowsアプリケーションのようにWebブラウザーの外部で実行できるアプリケーションのSilverlightサポートを検討します。アプリケーションをブラウザー外で実行できるようにしたい主な理由は3つあります-

インタラクション
オフライン
高信頼

インタラクション

より良い相互作用設計が可能になる場合があります。 Webのナビゲーションモデルは、一部のアプリケーションには特に適していません。たとえば、アドレスバーと[戻る]ボタンは、スペースの無駄で無駄な場合があります。

ここでのSilverlightの重要性は以下のとおりです-

Webアプリケーションは、Silverlight、Flash、AJAXなどのクライアント側のテクノロジーを使用して、単一のページを継続的に更新し、おそらく他のページに移動する必要をなくすことができます。
一部のアプリケーションでは、ユーザーはブラウザが単一ページと見なすものに何分も、あるいは何時間も費やすことができます。
この種のアプリケーションの場合、[戻る]ボタンを押すと、アプリケーションを終了するというかなり驚くべき効果があります。アプリケーションに入る前のページに戻ってしまうためです。
明らかに、Webに似ていないアプリケーションは、ブラウザーのChromeを削除するため、ブラウザーを実行することでより適切に処理されます。一般的に、ブラウザが不足する理由はユーザビリティだけではありません。

オフライン

この機能を使用するもう1つの理由は、オフライン実行を有効にすることです。ブラウザ外操作用にSilverlightアプリケーションをインストールすると、ローカルマシンのユーザーごとのリポジトリにコピーされ、Windowsの[スタート]メニューなど、アプリケーションを起動するための通常のオペレーティングシステムメカニズムを通じて利用可能になります。

ユーザーがインターネットに接続していない場合でも、アプリケーションは利用可能になります。
明らかに、これは完全にサーバー側の情報に依存しないアプリケーションにのみ役立ちます。
たとえば、小包配達サービス用の自動追跡アプリケーションは、ネットワーク接続なしではあまり役に立ちません。
一部のアプリケーションでは、時々接続障害が発生しても作業を継続できることが非常に役立ちます。

高信頼

Silverlightのバージョン4では、信頼できるアプリケーションのサポートが追加されました。通常、Silverlightのセキュリティサンドボックスは、ユーザーのファイルへのアクセスなど、特定の特権操作をブロックします。

ただし、ブラウザ外のアプリケーションは昇格を要求する場合があります。ユーザーがその要求を許可すると、アプリケーションは、COMオートメーションの使用やウィンドウ枠のカスタマイズなど、通常のWindowsアプリケーションが実行できるより多くの種類の作業を実行できます。

ブラウザー内で実行されるアプリケーションは決して信頼されないため、これらの機能を使用する場合はブラウザー外のアプリケーションを作成する必要があります。

OOBを有効にする

ブラウザー外実行アプリケーションを作成するにはどうすればよいですか？これはとても簡単だ。 Silverlightのプロジェクトプロパティの1つの設定を変更する必要があり、 AppManifest.xaml に適切な設定を追加するだけです。

仕組みを見てみましょう。

マニフェストがブラウザー外実行がサポートされていることを示している場合、これは最初の影響はありません。アプリケーションは通常どおりブラウザで実行されます。 ただし、ユーザーが右クリックすると、標準のSilverlight ContextMenu *は、コンピューターにアプリケーションをインストールするための追加のアイテムを提供します。

ContextMenu

ユーザーがその項目を選択すると、確認を求めるダイアログボックスが表示されます。また、[スタート]メニュー、デスクトップ、またはその両方からアプリケーションにアクセスできるかどうかを尋ねます。

[スタートメニュー]

コンテキストメニューに依存する必要はありません。 APIがあるので、ユーザーがクリックしてアプリケーションをインストールできるボタンを提供することもできます。APIを呼び出すと、インストールを開始できます。
プログラムでインストールを開始しても、ユーザーにはダイアログボックスが表示されます。ユーザーの同意なしにアプリをインストールすることはできません。

Silverlightアプリケーション

これは非常にシンプルなSilverlightアプリケーションです。 XAMLコードは次のとおりです。

<UserControl x:Class = "SimpleOob.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Border BorderBrush = "Blue" BorderThickness = "4" CornerRadius = "20" >

         <Border.Background>

            <LinearGradientBrush StartPoint = "0,0" EndPoint = "0,1">
               <GradientStop Offset = "0.0" Color = "White"/>
               <GradientStop Offset = "0.15" Color = "#cef"/>
               <GradientStop Offset = "1.0" Color = "White"/>
            </LinearGradientBrush>

         </Border.Background>

         <TextBlock HorizontalAlignment = "Center" VerticalAlignment = "Center"
            Text = "Silverlight Application" TextOptions.TextHintingMode = "Animated"
            TextAlignment = "Center" TextWrapping = "Wrap"
            FontSize = "72" FontFamily = "Trebuchet MS" >

               <TextBlock.Effect>
                  <DropShadowEffect Color = "#888"/>
               </TextBlock.Effect>

         </TextBlock>

      </Border>

   </Grid>

</UserControl>

ステップ1 *-ブラウザー外実行を有効にするには、プロジェクトの*プロパティ*に移動し、Silverlightタブをクリックします。必要なのは、「ブラウザから実行中のアプリケーションを有効にする」チェックボックスをオンにすることだけです。

実行中のアプリケーションを有効化

このアプリケーションを実行すると、Webブラウザーがまったく表示されないことに気付くでしょう。

シンプルなSilverlightアプリケーション

実際、Visual Studioはユーザーに代わって決定を下しました。 out-of-browser 実行を有効にすると、デバッグ設定が不当に変更されました。

ステップ2 *-ここで、*ソリューションエクスプローラー*で、Silverlightプロジェクトが太字で表示され、スタートアッププロジェクトであることを示しています。

ソリューションエクスプローラーアプリケーション

以前はそうではありませんでした。それはWebプロジェクトでした。現時点では、このチェックボックスがエンドユーザーの状況をどのように変化させるかを示したいため、これは望ましくありません。

ステップ3 *-Webプロジェクトをスタートアッププロジェクトに戻します。

スタートアッププロジェクト

ステップ4 *-アプリケーションを再度実行すると、アプリケーションがブラウザに戻っていることがわかります。

アプリケーションプロジェクトの実行

ステップ5 *-Webページを右クリックします。コンテキストメニューに通常のSilverlightエントリがあり、インストールする追加アイテムがあります。

Silverlight Simple OOB App

ステップ6 *-2番目のオプションを選択すると、次のように[アプリケーションのインストール]ダイアログボックスが表示されます。

[スタートメニュー]

アプリケーションの元のWebサイトのルートURLが表示されていることに注意してください。 Visual Studioが提供するローカルデバッグWebサーバーを使用しているため、localhostと表示されます。

ステップ7 *- *OK をクリックすると、アプリケーションはブラウザとは別の独自のウィンドウで実行されます。

シンプルなSilverlightアプリケーション

このウィンドウが何らかの形で所有されている、またはブラウザに接続されていると考えるのは自然なことかもしれませんが、そうではありません。ブラウザを閉じると、このウィンドウは表示されたままになります。さらに重要なことは、このウィンドウを閉じてから、ブラウザをまったく使用せずにアプリケーションを再実行できることです。

ステップ8 *-*スタート*メニューで*検索*ダイアログボックスを開き、アプリケーション名の入力を開始すると、通常のWindowsアプリケーションと同じように表示されます。

検索ダイアログボックス

ステップ9 *-ブラウザをどこにでも表示せずに実行できます。

シンプルなSilverlightアプリケーション

アプリケーションをアンインストールするには

アプリケーションのデフォルトのコンテキストメニューを使用すると、簡単に実行できます。ユーザーは、他のアプリケーションと同じ方法でこれをアンインストールすることを合理的に期待できます。

アプリケーションのアンインストール

Webページを右クリックして[このアプリケーションを削除…]を選択して削除することもできます。

アプリケーションの削除

OOB設定

単一の設定を変更するだけでブラウザー外操作が可能になりますが、実際には、通常はそれ以上のことをする必要があります。 AppManifest.xaml ファイルには、 out-of-browser 操作に関連するいくつかの設定を含めることができます。これは通常、Visual Studioを使用して構成します。

お気づきかもしれませんが、[ブラウザ外で実行する]チェックボックスをオンにすると、Visual Studioは[ブラウザ外の設定]というラベルのボタンを有効にしました。

ブラウザ外設定

ボタンをクリックして見てみましょう。次のダイアログボックスが生成されます。

シンプルなブラウザ外アプリ

最初に設定できるのは、 Window Title として表示されるテキストです。
また、ウィンドウの寸法と位置を修正するオプションもありますが、現時点では自動のままにします。
このショートカット名は、*スタート*メニューに表示され、インストールされるとアプリのデスクトップリンクに表示されます。
また、コンテキストメニューとアプリケーションのインストールダイアログに表示されるテキストでもあります。
このアプリケーションの説明は、ショートカットにカーソルを合わせるとツールヒントに表示されます。
さまざまなサイズのアイコンを提供しています。これらはプロジェクトに組み込む必要があります。

アプリケーション、リソース、展開

この章では、アプリケーションとそれらが必要とするリソースの作成とデプロイに関する一般的な問題を見ていきます。

プラグインをロードする

Silverlightアプリケーションを実行するための最小要件は、Silverlightプラグインをロードするオブジェクトタグを含むWebページと、コンパイルされたSilverlightコンテンツ自体をホストすることです。

ご覧のとおり、 object タグで param タグを使用してコンテンツを指し示しました。

* HTML <Object>タグ*

コンテンツのダウンロード中に表示されるユーザーインターフェイス、エラー発生時に実行されるJavaScriptコード、Silverlightがインストールされていない場合に表示されるフォールバックコンテンツなどの機能を制御するために渡すことができる他のパラメーターがあります。

HTMLの<Object>

これは、Silverlightコンテンツを読み込むオブジェクトタグの例です。これは前に見たことがありますが、オブジェクトタグ自体の属性から始めて、いくつかのことをもう少し詳しく見ていきます。

タイプ属性

type属性には、これをSilverlight要素として識別するMIMEタイプが含まれています。これは、ブラウザが使用している埋め込みコンテンツの種類を認識する方法です。オブジェクトタグは驚くほど柔軟です。プラグイン専用ではありません。これを使用して、埋め込み画像、またはHTML、およびSilverlightやFlashなどのプラグインベースのコンテンツをホストできます。

Silverlightプラグインがインストールされている場合、これがロードされます。そうでない場合、標準形式の動作では、ブラウザはobjectタグ内のHTMLコンテンツを、objectタグとparamタグが存在しないかのようにレンダリングします。

<object data = "data:application/x-silverlight-2," type =  "application/x-silverlight-2"
   width = "100%" height = "100%">

   <param name = "source" value = "ClientBin/DataBinding.xap"/>
   <param name = "onError" value = "onSilverlightError"/>
   <param name = "background" value = "white"/>
   <param name = "minRuntimeVersion" value = "5.0.61118.0"/>
   <param name = "autoUpgrade" value = "true"/>

   <a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
      style = "textdecoration:none">

      <img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
         alt = "Get Microsoft Silverlight" style = "border-style:none"/>
   </a>

</object>

データ属性

次の属性であるデータは、少しわかりにくいです。末尾のコンマはそこにあることを意味します。いくつかの重要な機能は-

この属性は技術的には必要ありませんが、一部のWebブラウザーはプラグインのロード時に驚くべき動作をするため、追加することをお勧めします。
*オブジェクトタグ*は埋め込みコンテンツをホストするように設計されているため、ブラウザはバイナリ文字列、ビットマップファイル、ビデオ、またはオーディオストリーム、または何かを含むことを期待しています。
通常、データ属性にURLを挿入し、ブラウザがそのデータをダウンロードしてプラグインに渡すことを期待します。
データ属性はURIを取り、通常はJPEGファイルなどのいくつかのデータを指しますが、ここでは、少し変わったURIスキームを使用しています。

<param>タグ

オブジェクト内には、ソース param から始まるさまざまな param タグがあります。

<param name = "source" value = "ClientBin/DataBinding.xap"/>

Silverlightコンテンツのダウンロード元のプラグインを提供します。

JavaScriptエラーハンドラを提供する必要があります。これは、ダウンロードプロセスが失敗した場合に呼び出されます。また、Silverlightコードが実行されると、未処理の例外がスローされた場合にも呼び出されます。

<param name = "onError" value = "onSilverlightError"/>

したがって、それは単にロード障害のためではありません。コードに必要なSilverlightの最小バージョンも指定する必要があります。

Microsoftはユーザーに最新の状態を維持することを推奨しているため、マシンにSilverlightプラグインがインストールされると、Windows Updateを介して新しいバージョンが提供されますが、ユーザーが必要なバージョンよりも古いバージョンを実行する可能性は常にあります。

<param name = "minRuntimeVersion" value = "5.0.61118.0"/>
<param name = "autoUpgrade" value = "true"/>

この minRuntimeVersion パラメーターを使用すると、必要なバージョンを指定できます。インストールされているバージョンが古い場合、onErrorハンドラーが呼び出されます。

Silverlightは、エラー処理JavaScript関数に数値のエラーコードを渡します。プラグインが古いことを示すために、「 8001 」という明確なエラーコードがあります。

JavaScriptコードを記述して問題に対応することも、プラグインにアップグレードを依頼することもできます。

ここでは、 autoUpgrade パラメーターが ' True 'に設定されています。つまり、インストールされているプラグインが古い場合、Silverlightは、より新しいバージョンが必要であることをユーザーに伝えるメッセージを自動的に表示します。それら。

フォールバックHTMLコンテンツ

paramタグの後には、Silverlightがインストールされていない場合に使用される*フォールバックHTMLコンテンツ*があります。

*MIME* タイプが不明なオブジェクトタグの標準的なブラウザの動作は、オブジェクトタグとparamタグがまったく存在しないかのように動作することです。 そのため、このタグとそのコンテンツは、Silverlightプラグインを持たないシステムで表示されます。

<a href = "http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0"
   style = "text-decoration:none">
   <img src = "http://go.microsoft.com/fwlink/?LinkId=161376"
      alt = "Get Microsoft Silverlight" style = "border-style:none"/>
</a>

*go.microsoft.com* サイトへの2つのURL、ハイパーリンク、および画像に注目してください。

画像リンクは、SilverlightブランドとSilverlightをインストールするためのテキストを提供するビットマップに解決されます。ハイパーリンクのエンドポイントは適度にスマートです。サーバーは、ユーザーエージェントを検査して、リダイレクト先を決定します。

Silverlightインストール実行可能ファイルを返したり、ユーザーがサポートされていないプラットフォームを使用している場合は、Silverlightに関する情報を含むページにブラウザーを誘導します。

Silverlight.js

SilverlightコンテンツをロードするためのHTMLオブジェクトタグに代わるものがあります。 Microsoftは、 Silverlight.js というJavaScriptファイルを提供します。これにより、ブラウザースクリプトから読み込みプロセスを管理できます。

Visual Studioは、Webプロジェクトを作成して、新しく作成されたSilverlightプロジェクトをホストするときにコピーを追加します。 Silverlight SDKには、このファイルのコピーも含まれています。

*Silverlight.js* の主な利点は、Silverlightがインストールされていない場合により柔軟に対応できることです。

XAMLリソース

Silverlightは、XAMLで*オブジェクトリソース*を作成するためのメカニズムも提供します。通常、XAMLで修正された特定の種類のオブジェクトがあり、アプリケーションの複数の場所で使用できるようにしたい場合があります。テンプレートを複数の場所で使用することは非常に一般的です。

ボタンのカスタムルックを定義した場合、それを複数のボタンに適用することも、アプリケーションのすべてのボタンに適用することもできます。 XAMLリソースシステムは、これを行う方法を提供します。 *名前付きリソース*を定義し、それをXAMLの他の場所で使用できます。

テンプレートに加えて、ブラシやシェイプなどのグラフィカルリソースに対してこれを実行することも一般的です。アプリケーションで特定の配色を使用している場合、その配色の色とブラシをリソースとして定義できます。

*SolidColorBrush* リソースの簡単なアプリケーションを次に示します。

<UserControl x:Class = "XAMLResources.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:DesignHeight = "300" d:DesignWidth = "400">

   <UserControl.Resources>
      <SolidColorBrush x:Key = "brushResource" Color = "AliceBlue"/>
   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot" Background = "White">
      <StackPanel>
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}"/>
         <Rectangle Height = "50" Margin = "20" Fill = "{StaticResource brushResource}"/>
      </StackPanel>
   </Grid>

</UserControl>

上記のXAMLコードでは、両方の長方形に StaticResource があることがわかります。 brushResource の色は AliceBlue です。

上記のコードをコンパイルして実行すると、次の出力が表示されます。

XAMLリソース

App.xaml

すべてのSilverlightアプリケーションには、 App.xaml というファイルがあります。アプリケーション全体の情報が含まれています。たとえば、ユーザーインターフェイス要素と同様にResourcesプロパティがあります。

*App.xaml* ファイルで定義したリソースは、プロジェクト内のすべてのXAMLファイルで使用できます。 したがって、これらの種類のリソースで *MainPage.xaml* を散らかすのではなく、アプリケーションのスコープに移動できます。

<Application
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   x:Class = "XAMLResources.App" >

   <Application.Resources>
      <SolidColorBrush x:Key = "brushResource" Color = "AliceBlue"/>
   </Application.Resources>

</Application>

アプリケーションクラス

ほとんどのXAMLファイルと同様に、 App.xaml ファイルとそれに対応する*コードビハインド*ファイルはクラスを定義します。このApplicationクラスは、Silverlightアプリケーションへのエントリポイントです。 App.xaml は通常、アプリケーションスコープのリソースを扱います。そのコードビハインドファイルには、スタートアップおよびシャットダウン処理コードが含まれています。

Applicationクラスのインスタンスを作成した直後に、Silverlightは Application.Startup イベントを発生させます。
ここで、ユーザーインターフェイスを作成します。ユーザーインターフェイス要素を作成し、 Startup イベントでアプリケーションオブジェクトのRootVisualプロパティに割り当てると、Silverlightプラグインによって表示されるユーザーインターフェイスになります。

public partial class App : Application {

   public App() {
      this.Startup += this.Application_Startup;
      this.Exit += this.Application_Exit;
      this.UnhandledException += this.Application_UnhandledException;
      InitializeComponent();
   }

   private void Application_Startup(object sender, StartupEventArgs e) {
      this.RootVisual = new MainPage();
   }

   private void Application_Exit(object sender, EventArgs e) {}

   private void Application_UnhandledException(object sender,
      ApplicationUnhandledExceptionEventArgs e) {

      if (!System.Diagnostics.Debugger.IsAttached) {
         e.Handled = true;
         Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
      }

   }

   private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e) {
      try {
         string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;
         errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n");
         System.Windows.Browser.HtmlPage.Window.Eval("throw new Error
            (\"Unhandled Error in Silverlight Application " + errorMsg + "\");");
      } catch (Exception) {}
   }
}

注意点

*RootVisual* は変更できないことに注意してください。 一度だけ設定する必要があります。 アプリケーションの実行中にユーザーインターフェイスを変更する場合は、 *MainPage* を別のものに置き換えるのではなく、 *MainPage* のコンテンツを変更して変更する必要があります。

他のアプリケーションイベントは Exit で、これはユーザーインターフェイスが消えようとしているときに shutdown コードを実行する最後のチャンスです。 UnhandledException はコードが未処理の例外をスローした場合に発生します。

*UnhandledException* イベントのハンドラーを提供しない場合、またはそのハンドラーがイベントを処理済みとしてマークしない場合、 *UnhandledExceptions* はSilverlightアプリケーションを効果的にシャットダウンします。

画面のプラグイン領域が空白になり、スクリプトエラーがブラウザに報告されます。

Silverlight-ファイルアクセス

この章では、Silverlightアプリケーションがエンドユーザーのコンピューター上のファイルにアクセスする方法について説明します。 Silverlightでファイルにアクセスするには、主に3つの方法があります。選択は、ファイルを使用する必要がある理由と、信頼できるアプリケーションを作成しているかどうかによって異なります。

最も柔軟なオプションは、ファイルダイアログ*クラスを使用することです。 *Open および Save ファイルダイアログを使用すると、ユーザーが適切な権限を持っている限り、エンドユーザーが選択した任意のファイルにアクセスできます。ユーザーの同意がこのアプローチの中心です。ユーザーは、読み込むファイルを選択するか、保存するときに上書きするファイルを選択するか、場所とファイル名を選択する必要があります。
2番目のオプションは、 System.IO 名前空間でさまざまなクラスを使用することです。 Silverlightは、* FileStream、StreamWriter、FileInfo、Directory、、 *DirectoryInfo などのクラスを提供します。これらはすべて、ユーザーの関与を必要とせずにファイルを開いてアクセスするコードを作成できます。開発者にとってはより便利かもしれませんが、もちろん、ほとんどのユーザーは、Webページの一部として古いコードをダウンロードしてファイル内を検索することを望みません。
3番目のオプションは Isolated Storage で、これについては後で説明します。

ファイルを開くおよび保存ダイアログ

SaveFileDialog

*SaveFileDialog* クラスは、ファイルを保存する場所を選択するための標準オペレーティングシステムが提供するユーザーインターフェイスを示します。

いくつかの重要な機能は-

これを使用するには、 SaveFileDialog クラスのインスタンスを作成します。
ShowDialog を呼び出すと、それが表示され、戻りコードは、ユーザーがファイルを保存する場所を選択したか、ダイアログをキャンセルしたかを示します。
そこにある True との冗長な外観の比較について疑問に思うかもしれません。 ShowDialog が True 値を返す場合、ユーザーがファイルを選択したことを意味します。したがって、 OpenFile メソッドを呼び出して、 Stream を返します。
必要に応じて、ユーザーが選択した名前を見つけることができます。このダイアログには、 SafeFileName というプロパティがありますが、パスは含まれていません。いずれにせよ、データを書き込む唯一の方法は、ダイアログによって返される Stream を使用することです。開発者の観点から見ると、これは単なる* .NETストリーム*であるため、 StreamWriter にラップしてテキストを書き込むことができます。

OpenFileDialog

OpenFileDialogは、 SaveFileDialog と使用方法が似ています。明らかに、常に新しいファイルではなく既存のファイルを選択していますが、別の重要な違いがあります。

MultiSelect というプロパティがあります。これを True に設定すると、ユーザーは複数のファイルを選択できます。つまり、ダイアログにはもう少し複雑なAPIが必要です。
SaveFileDialog は一度に1つのファイルのみを処理しますが、 OpenFileDialog はより多くのファイルを処理できるため、 OpenFile メソッドを提供しません。コードを拡張する必要があります。ダイアログが*単一ファイル*モードまたは MultiSelect モードのどちらであるかに応じて、 File または Files プロパティを使用します。
ここで、以下の例では、シングルファイルモードです。したがって、 File を使用し、返される FileInfo オブジェクトで OpenRead を呼び出します。
multiselect モードでは、代わりに Files を使用し、 FileInfo オブジェクトのコレクションを返します。

FileStream

上記の*ファイルアクセス*への2番目のアプローチは、 FileStream クラス、または System.IO 名前空間の関連タイプを直接使用することです。ほとんどの場合、完全な .NET Framework を使用したファイルアクセスに似ているため、これについて言うことはあまりありません。

ただし、Silverlight固有のいくつかの工夫があります。

まず、このアプローチでは、ユーザーの介入なしにいつでもファイルにアクセスできます。また、ファイルアクティビティの明らかな視覚的表示なしで、信頼できるアプリケーションのみがこの手法を使用できます。信頼を高めるには、ブラウザを使い果たす必要があることを忘れないでください。 2番目の問題は、特定の特定のフォルダー内のファイルのみが使用可能であることです。 ユーザーのドキュメント、音楽、写真、またはビデオファイル*の下にあるファイルのみを読み書きできます。その理由の1つは、Silverlightが複数のプラットフォームで実行され、たとえばApple Macのファイルシステム構造がWindowsのファイルシステム構造と非常に異なるためです。そのため、クロスプラットフォームのファイルアクセスは、Silverlightがサポートするすべてのシステムで利用可能な限られたフォルダーのセットで機能する必要があります。
これらのフォルダーは異なるオペレーティングシステムの異なる場所にあり、それらの場所は通常ユーザーごとに異なるため、 Environment.GetFolderPath メソッドを使用して実行時に実際の場所を見つける必要があります。 開始点の下のディレクトリ構造を調べることができます。 System.IO 名前空間の *Directory および DirectoryInfo クラスを使用すると、ファイルとディレクトリを列挙できます。
```
*OpenFileDialog* でファイルを開き、 *SaveFileDialog* でテキストをファイルに保存できる簡単な例を考えてみましょう。
```

以下に示すのは、2つのボタンと*テキストボックス*が作成されるXAMLコードです。

<UserControl x:Class = "FileDialogs.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition Height = "265*"/>
      </Grid.RowDefinitions>

      <Button
         x:Name = "saveFileButton"
         Content = "Save"
         Width = "75" FontSize = "20"
         HorizontalAlignment = "Left" VerticalAlignment = "Top"
         Margin = "12,12" Click = "saveFileButton_Click"/>

      <Button
         x:Name = "openFileButton"
         Content = "Open"
         Width = "75" FontSize = "20"
         HorizontalAlignment = "Left" VerticalAlignment = "Top"
         Margin = "101,12,0,0" Click = "openFileButton_Click"/>

      <TextBox
         x:Name = "contentTextBox"
         Grid.Row = "1"
         Margin = "12" FontSize = "20"/>

   </Grid>

</UserControl>

以下に、ファイルを開いて保存するクリックイベント実装のC＃コードを示します。

using System;
using System.Diagnostics;
using System.IO;

using System.Windows;
using System.Windows.Controls;

namespace FileDialogs {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void saveFileButton_Click(object sender, RoutedEventArgs e) {
         var save = new SaveFileDialog();
         save.Filter = "Text Files (*.txt)|*.txt|All Files (*.*)|*.*";
         save.DefaultExt = ".txt";

         if (save.ShowDialog() == true) {
            Debug.WriteLine(save.SafeFileName);
            using (Stream saveStream = save.OpenFile())
            using (var w = new StreamWriter(saveStream)) {
               var fs = saveStream as FileStream;

               if (fs != null) {
                  w.Write(contentTextBox.Text);
               }
            }
         }
      }

      private void openFileButton_Click(object sender, RoutedEventArgs e) {
         var open = new OpenFileDialog();

         if (open.ShowDialog() == true) {
            using (Stream openStream = open.File.OpenRead()) {
               using (var read = new StreamReader(openStream)) {
                  contentTextBox.Text = read.ReadToEnd();
               }
            }
         }
      }
   }
}

上記のコードをコンパイルして実行すると、2つのボタンを含む次のWebページが表示されます。

*Open* ボタンをクリックして、 *OpenFileDialog* を開いてテキストファイルを選択します。

OpenFileDialog

テキストファイルを選択して[開く]をクリックすると、テキストボックスにテキストが表示されます。

OpenSaveTextFile

テキストをファイルに保存するには、テキストを更新します。

OpenSaveTextFile

[保存]ボタンをクリックして、変更を新しいテキストファイルまたは既存のファイルに保存します。

新しいテキストファイル

既存のテキストファイルへの変更を保存するには、 SaveFileDialog でテキストファイルを選択しますが、新しいファイルへの変更を保存する場合は、ファイル名を書き、 Save ボタンをクリックします。

SaveFileDialog

Silverlight-ビューモデル

この章では、Silverlightのソフトウェア開発における重要な手法である View Models を使用します。

* viewモデル*は重要な要素であり、ビューをモデルから分離することにより、分離表示と呼ばれる手法を導入します。
View Models は、分離されたプレゼンテーションの一方向を実現します。Silverlightのデータバインディングを利用して、ユーザーインターフェイスで必要なコードの量を削減する方法を説明します。

UI開発の課題

*View Models* は、ユーザーインターフェイスソフトウェアの開発時に頻繁に発生する特定の問題を解決するように設計されています。 おそらく最も重要なことは、特に自動化された単体テストでは、ユーザーインターフェイスコードを複雑にテストすることが難しい場合が多いことです。 コードの継続的な柔軟性と保守性に影響を与える可能性があるコード品質の問題もあります。

Visual Studioの設計ツールがあなたを導いてくれる最小の抵抗の道をたどると、コードビハインドにあまりにも多くのコードを入れることになってしまいます。
大量のアプリケーション機能がコードビハインドに追加されるのを見るのは非常に一般的です。
ビジネスロジックをユーザーインターフェイスクラスに入れることを実際に計画している開発者はほとんどいませんが、Visual Studioがイベントハンドラーを配置する場所であるため、物事を成し遂げるには非常に便利な場所になります。
クラスの責任が明確に定義され、合理的に狭い場合、ソフトウェアの開発と保守が容易になることは広く受け入れられています。
コードビハインドの仕事は、必要なユーザーインターフェイスを構成するオブジェクトと直接対話することです。
問題を引き起こす傾向があるアプリケーションの動作を決定するコードを配置するとすぐに。
アプリケーションロジックは、ユーザーインターフェイスに関係するコードに流れ込むだけでなく、一部の開発者は重要なアプリケーションの状態を保持するためにコントロールや他のユーザーインターフェイスオブジェクトに依存し始めます。
モデルは単にデータを保持し、ビューはフォーマットされた日付を保持し、コントローラー（ViewModel）は2つの間の連絡役として機能します。コントローラーは、ビューから入力を取得してモデルに配置したり、その逆を行ったりする場合があります。

MVC

分離プレゼンテーション

コードビハインドまたはXAMLにアプリケーションロジックを配置することによって生じる問題を回避するには、 separated presentation と呼ばれる手法を使用するのが最適です。ユーザーインターフェイスオブジェクトを直接操作するために最低限必要なXAMLとコードビハインドがあるため、ユーザーインターフェイスクラスには、以下の左側に示すように、複雑な対話動作、アプリケーションロジック、その他すべてのコードも含まれます。

分離プレゼンテーション

分離プレゼンテーションの重要な機能-

分離されたプレゼンテーションでは、ユーザーインターフェイスクラスがはるかに簡単です。もちろんXAMLがありますが、コードビハインドは実用的ではありません。
アプリケーションロジックは別のクラスに属します。これは、多くの場合 model と呼ばれます。
多くの開発者は、データバインディングを使用して、XAMLの要素をモデルのプロパティに直接接続しようとします。
問題は、*モデル*は、ユーザーがアプリケーションとどのように対話するかではなく、アプリケーションが何をするかという問題に完全に関係していることです。
ほとんどのユーザーインターフェイスには、アプリケーションモデルに属さない状態があります。たとえば、ユーザーインターフェイスでドラッグアンドドロップを使用している場合、ドラッグ中のアイテムが現在どこにあるか、可能なドロップターゲット上を移動するときに外観がどのように変化するか、ドロップターゲットがどのようになり得るかなどを追跡する必要がありますアイテムがそれらの上にドラッグされると変化します。
この種の状態は驚くほど複雑になる可能性があるため、徹底的にテストする必要があります。
実際には、通常、ユーザーインターフェイスとモデルの間に他のクラスを配置する必要があります。これには2つの重要な役割があります。
まず、アプリケーションモデルを特定のユーザーインターフェイスビューに適合させます。
第二に、それは重要な相互作用ロジックが存在する場所であり、それによって、ユーザーインターフェイスを希望どおりに動作させるために必要なコードを意味します。

モデル/ビュー/ViewModel

*View Model* は、分離されたプレゼンテーションアプローチの例ですが、各レイヤーにどのような種類があるかを明確にしましょう。 3つの層があります-

モデル
View
ViewModel

モデル

これは、ユーザーインターフェイスと直接関係のない通常のC＃クラスで構成される*クラシック*オブジェクトモデルです。

通常、モデルコードは、ユーザーインターフェイスライブラリへの参照なしでコンパイルできると予想されます。実際、まったく同じソースコードを取得して、Silverlightアプリケーション、通常の.NETコンソールアプリケーション、またはサーバー側のWebコードにコンパイルすることができるでしょう。

モデルのタイプは、アプリケーションが機能する概念を表す必要があります。

View

通常、ビューはUserControlであり、MainPageである場合も、ページの一部である場合もあります。

ほとんどのSilverlightアプリケーションでは、ユーザーインターフェイスを、ユーザーコントロールを定義する小さな部分に分割するか、各部分のビューを作成することをお勧めします。

Silverlightアプリケーションは、この点でユニークではありません。明らかにSilverlight固有のものは、ビューです。ユーザーインターフェイスがきめ細かくなればなるほど、より良いものになる傾向があります。同じファイルで作業している他の開発者をすり減る可能性が低いだけでなく、物事を小さくシンプルに保つことで、スパゲッティのようなコードにつながるショートカットを自然に思いとどまらせることができます。

たとえば、リスト内の個々のアイテムを表す View を定義することは非常に一般的です。

ViewModel

最後に、 View ごとに ViewModel を記述します。したがって、これは ViewModel クラスの重要な機能の1つです。

特定のビューを提供するために存在します。 ViewModel は、リストに表示される特定のデータ項目など、物事を提示する特定の方法に特化しています。

これが ViewModel と呼ばれる理由です。特に特定のビューに対して基礎となるモデルを適合させます。モデルと同様に、 ViewModel も通常のC＃クラスです。特定のタイプから派生する必要はありません。

たまたま、一部の開発者は、いくつかの共通機能を基本ViewModelクラスに入れるのが便利だと感じていますが、パターンはそれを要求しません。特に、 ViewModel は、Silverlight固有のタイプから派生しません。ただし、モデルとは異なり、プロパティでSilverlightタイプを使用できます。

たとえば、ViewModelは、特定の条件下でのみユーザーインターフェイスの特定の部分を表示することを選択する可能性があるため、System.Windows.Visibility型のプロパティを提供できます。これは、Silverlight要素がVisibilityプロパティに使用する型です。これにより、パネルなどの要素の可視性をViewModelに直接バインドできます。

例

Model-View-ViewModel（MVVM）*アプローチを使用する簡単な例を見てみましょう。

ステップ1 *-新しいSilverlightアプリケーションプロジェクト *SilverlightMVVMDemo を作成します。

ステップ2 *-以下に示すように、プロジェクトに3つのフォルダー（Model、ViewModel、およびViews）を追加します。

SilverlightMVVMDemo

ステップ3 *-ModelフォルダーにStudentModelクラスを追加し、そのクラスに以下のコードを貼り付けます。

using System.ComponentModel;

namespace SilverlightMVVMDemo.Model {

   public class StudentModel {}

   public class Student : INotifyPropertyChanged {
      private string firstName;
      private string lastName;

      public string FirstName {
         get { return firstName; }

         set {
            if (firstName != value) {
               firstName = value;
               RaisePropertyChanged("FirstName");
               RaisePropertyChanged("FullName");
            }
         }
      }

      public string LastName {
         get { return lastName; }

         set {
            if (lastName != value) {
               lastName = value;
               RaisePropertyChanged("LastName");
               RaisePropertyChanged("FullName");
            }
         }
      }

      public string FullName {
         get {
            return firstName + " " + lastName;
         }
      }

      public event PropertyChangedEventHandler PropertyChanged;

      private void RaisePropertyChanged(string property) {
         if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(property));
         }
      }
   }
}

ステップ4 *-別のStudentViewModelクラスをViewModelフォルダーに追加し、次のコードを貼り付けます。

using SilverlightMVVMDemo.Model;
using System.Collections.ObjectModel;

namespace SilverlightMVVMDemo.ViewModel {

   public class StudentViewModel {

      public ObservableCollection<Student> Students {
         get;
         set;
      }

      public void LoadStudents() {
         ObservableCollection<Student> students = new ObservableCollection<Student>();

         students.Add(new Student { FirstName = "Mark", LastName = "Allain" });
         students.Add(new Student { FirstName = "Allen", LastName = "Brown" });
         students.Add(new Student { FirstName = "Linda", LastName = "Hamerski" });

         Students = students;
      }
   }
}

ステップ5 *- *Views フォルダーを右クリックして Silverlight User Control を追加し、* Add New Item…*を選択します。

Silverlightユーザーコントロール

ステップ6 *-[追加]をクリックします。これで、XAMLファイルが表示されます。さまざまなUI要素を含む *StudentView.xaml ファイルに次のコードを追加します。

<UserControl x:Class = "SilverlightMVVMDemo.Views.StudentView"
   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">

      <StackPanel HorizontalAlignment = "Left">

         <ItemsControl ItemsSource = "{Binding Path=Students}">

            <ItemsControl.ItemTemplate>

               <DataTemplate>

                  <StackPanel Orientation = "Horizontal">
                     <TextBox Text = "{Binding Path = FirstName, Mode = TwoWay}"
                        Width = "100" Margin = "3 5 3 5"/>

                     <TextBox Text = "{Binding Path = LastName, Mode = TwoWay}"
                        Width = "100" Margin = "0 5 3 5"/>

                     <TextBlock  Text = "{Binding Path = FullName, Mode=OneWay}"
                        Margin = "0 5 3 5"/>

                  </StackPanel>

               </DataTemplate>

            </ItemsControl.ItemTemplate>

         </ItemsControl>

      </StackPanel>

   </Grid>

</UserControl>

ステップ7 *-次に示すように、 *StudentView を MainPage.xaml ファイルに追加します。

<UserControl x:Class = "SilverlightMVVMDemo.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"
   xmlns:views = "clr-namespace:SilverlightMVVMDemo.Views"
   mc:Ignorable = "d"
   d:DesignHeight = "576.316" d:DesignWidth = "863.158">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <views:StudentView x:Name = "StudentViewControl" Loaded = "StudentViewControl_Loaded"/>
   </Grid>

</UserControl>

ステップ8 *- *ViewModel から View を更新する MainPage.xaml.cs ファイルの Loaded イベントの実装です。

using System.Windows;
using System.Windows.Controls;

namespace SilverlightMVVMDemo {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }
   }

   private void StudentViewControl_Loaded(object sender, RoutedEventArgs e) {
      SilverlightMVVMDemo.ViewModel.StudentViewModel
      studentViewModelObject = new SilverlightMVVMDemo.ViewModel.
      StudentViewModel();
      studentViewModelObject.LoadStudents();
      StudentViewControl.DataContext = studentViewModelObject;
   }
}

ステップ9 *-上記のコードをコンパイルして実行すると、次の出力がWebページに表示されます。

生徒ビューの追加

UI vs ViewModel

MVVMアプローチの最も難しい部分の1つは、境界線がどこに来るかを見つけることです。どのものがどこに属しているかは必ずしも明らかではありません。

特に、一部のユーザーインターフェイス要素は機能を提供します。厳密なビューによれば、これは間違いなくViewModelに属している必要があります。
一般に、 View に実装されているすべての動作が ViewModel に適しているわけではありません。
この理由の一部は、特にVisual StudioやBlendなどの設計環境を使用する場合を除き、ViewModelの動作を再利用のためにパッケージ化する標準的な方法がないことです。

MVVMの利点

MVVMには次の利点があります-

プレゼンテーションの懸念の分離（View、ViewModel、Model）
テスト可能で管理しやすいコードをきれいにします。単体テストにプレゼンテーション層のロジックを含めることができます。
コードの背後にあるコードがないため、プレゼンテーション層とロジックは疎結合です。
データバインディングのより良い方法。

MVVMの欠点

シンプルなUIの場合、MVVMはやり過ぎになる可能性があります。複雑なデータバインディングがある場合、デバッグは少し難しくなります。

Silverlight-入力処理

この章では、Silverlightアプリケーションでユーザー入力を処理する方法を学習します。 Silverlightは、マウス、キーボード、タッチなどのさまざまなデバイスからアプリケーションが入力を取得できる強力なAPIを提供します。

入力タイプ

いくつかの異なる方法があり、ユーザーはアプリケーションと対話できます。最も明白な方法は、マウスを使用することです。 Silverlightは追跡用のイベントを提供します-

マウスの動き
ボタンのクリック、および
ホイールアクティビティ

もちろんキーボードもあり、Silverlightはタッチスクリーン入力もサポートしています。 Windowsでのタッチサポートに精通している場合、タッチ入力は詳細情報を提供する低レベルイベントとして表すことも、ジェスチャと呼ばれる高レベルイベントに要約することもできます。

マウスイベント

Silverlightが提供するマウス入力イベントを見て始めましょう。一部のイベントは、マウスポインターの動きに関係しています。

MouseMove イベントは、ハンドラーをアタッチした要素の上にあるときにポインターが移動するたびに発生します。
また、 MouseEnter および MouseLeave イベントを取得して、マウスが要素に出入りしたときに通知します。

以下に、楕円とTextBlockが追加されたXAMLコードを示します。

<UserControl x:Class="MouseInput.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <TextBlock x:Name = "mouseText" FontSize = "40"
         VerticalAlignment = "Top" Height = "76" Margin = "0,10,0,0"/>

      <Ellipse
         Name = "myEllipse"
         Width = "320" Height = "150" HorizontalAlignment = "Left"
         VerticalAlignment = "Top" Margin = "27,103,0,0"
         Stroke = "Black" StrokeThickness = "10" Fill = "#00FF0000"
         MouseEnter = "myEllipse_MouseEnter"
         MouseLeave = "myEllipse_MouseLeave"
         MouseMove = "myEllipse_MouseMove"/>

   </Grid>

</UserControl>

以下に、さまざまな*マウス入力*イベントの実装を示します。

using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace MouseInput {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void myEllipse_MouseEnter(object sender, MouseEventArgs e) {
         mouseText.Text = "Mouse Enter";
         myEllipse.Stroke = new SolidColorBrush(Colors.Blue);
      }

      private void myEllipse_MouseLeave(object sender, MouseEventArgs e) {
         mouseText.Text = "Mouse Leave";
         myEllipse.Stroke = new SolidColorBrush(Colors.Black);
      }

      private void myEllipse_MouseMove(object sender, MouseEventArgs e) {
         mouseText.Text = "Mouse Move: " + e.GetPosition(myEllipse);
      }
   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

マウス入力

マウスが楕円に入ると、色と座標の変化が表示されます。

座標の変更

マウスが楕円を離れると、「 mouse leave 」というメッセージが表示され、デフォルトの色に変わります。

マウス休暇

キーボード

ユーザーがアプリケーションにテキストデータを入力する最も簡単な方法は、キーボードがある場合です。ノートパソコンとデスクトップを除き、すべてのモバイルデバイスにキーボードがあるわけではないことに注意してください。

Silverlightは、キーボード入力用の2つの簡単なイベント、 KeyUp および KeyDown を提供します。
これらはどちらも KeyEventArgs をハンドラーに渡し、Keyプロパティはどのキーが押されたかを示します。
以下の例では、キーボード入力の一部が処理されます。
次の例では、Clickイベントのハンドラーと KeyDown イベントのハンドラーを定義しています。

以下に、さまざまなUI要素が追加されたXAMLコードを示します。

<UserControl x:Class = "KeyboardInput.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <StackPanel Orientation = "Horizontal" KeyDown = "OnTextInputKeyDown">
         <TextBox Width = "400" Height = "30" Margin = "10"/>

         <Button Click = "OnTextInputButtonClick"
            Content = "Open" Margin = "10" Width = "50" Height = "30"/>

      </StackPanel>

   </Grid>

</UserControl>

以下に、異なるキーボードイベントとクリックイベントが処理されるC＃コードを示します。

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace KeyboardInput {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void OnTextInputKeyDown(object sender, KeyEventArgs e) {
         if (e.Key == Key.O) {
            handle();
            e.Handled = true;
         }
      }

      private void OnTextInputButtonClick(object sender, RoutedEventArgs e) {
         handle();
        //e.Handled = true;
      }

      public void handle() {
         MessageBox.Show("Do you want to open a file?");
      }
   }
}

上記のコードをコンパイルして実行すると、次のように表示されます-

KeyEventArgs

[開く]ボタンをクリックするか、テキストボックスをクリックして[OK]をクリックすると、同じメッセージが表示されます。

同じメッセージを表示

理解を深めるために、上記の例を実行することをお勧めします。

Silverlight-分離ストレージ

3番目のファイルアクセスメカニズムは Isolated Storage メカニズムで、ログインしたユーザーに関連付けられたストレージを提供します。 APIは、。NET System.IO *名前空間の *Stream クラスを通じてデータを提示します。したがって、これまで見てきた他のメカニズムと同様に、 System.IO の他のタイプを使用してストリームを操作し、テキストデータまたはバイナリデータを格納できます。

いくつかの重要な機能は-

ストアはパーティション化され、Silverlightアプリケーションは特定の部分にのみアクセスできるため、このストレージメカニズムは Isolated Storage と呼ばれます。
古い保存データにはアクセスできません。まず、ストアはユーザーごとにパーティション分割されます。 Silverlightアプリケーションは、ログインしてアプリケーションを実行しているユーザーとは異なるユーザーのストアにアクセスできません。
これは、Webアプリケーションが使用する識別メカニズムとは関係ありません。コンピューターを共有する一部のユーザーは、個別のWindowsアカウントに煩わされず、使用するWebサイトへのログインとログアウトだけに慣れているため、これは覚えておくべき重要なポイントです。

分離ストレージの使用

分離ストレージは、Silverlightに固有のものではありません。 APIはもともと Windows Forms 用に導入され、Webから起動されたアプリケーションが部分信頼シナリオでデータをローカルに保存できるようにしました。実装は異なり、Silverlightから完全な .NET Frameworkの分離ストレージにアクセスする方法はありません。

ただし、使用している場合、ここでの手順は非常に馴染みがあります。

ユーザー固有のストアを要求することから始めます。この場合、アプリケーション用のものを要求しています。サイト上のすべてのXAPでサイトごとのストアを共有する場合は、代わりに GetUserStoreForSite を呼び出します。
どちらのメソッドも IsolatedStorageFile オブジェクトを返します。これは、ファイルではなくディレクトリを表すため、非常に役に立たない名前です。
ファイルにアクセスするには、 IsolatedStorageFile に Stream を要求する必要があります。
IsolatedStorageFileStream クラスを使用します。そのコンストラクターでは、引数として IsolatedStorageFile オブジェクトを渡す必要があります。
そのため、ストアに新しいファイルを作成しています。ディスク上のファイルの正確な場所は不明です。
含まれるディレクトリには、ファイルの名前を推測できないようにするために、要素がランダム化されています。
これがないと、悪意のあるWebサイトがユーザーのコンピューターにファイルを配置し、ファイルのURLを作成してそれを開く可能性があります。ユーザーをだましてプログラムをローカルで実行するリンクをクリックさせます。
これを防ぐためにWindowsに組み込まれている他のさまざまな保護手段がありますが、これは他の手段が何らかの方法で無効化またはバイパスされた場合の別の防御層です。 ファイルはユーザーのプロファイル内のどこかに保存されますが、それはあなたがそれについて知っている限りのことです。 IsolatedStorageFileStream *は、実際の場所を報告しません。

アプリケーションが実行された回数を追跡する簡単な例を見てみましょう。以下にXAMLコードを示します。

<UserControl x:Class = "StoreRunCount.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <TextBlock x:Name = "runCountText" FontSize = "20"/>
   </Grid>

</UserControl>

以下は、分離ストレージが使用されるC＃コードです。

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;

using System.IO.IsolatedStorage;
using System.IO;

namespace StoreRunCount {

   public partial class MainPage : UserControl {

      const string RunCountFileName = "RunCount.bin";

      public MainPage() {
         InitializeComponent();
         int runCount = 0;

         using (var store = IsolatedStorageFile.GetUserStoreForApplication()) {

            if (store.FileExists(RunCountFileName)) {
               using (var stm = store.OpenFile(RunCountFileName,
                  FileMode.Open, FileAccess.Read))
               using (var r = new BinaryReader(stm)) {
                  runCount = r.ReadInt32();
               }
            }

            runCount += 1;
            using (var stm = store.OpenFile(RunCountFileName,
               FileMode.Create, FileAccess.Write))

            using (var w = new BinaryWriter(stm)) {
               w.Write(runCount);
            }
         }

         runCountText.Text = "You have run this application " + runCount.ToString() + " time(s)";
      }
   }
}

上記のコードをコンパイルして実行すると、このアプリケーションを何回実行したかを示す次のWebページが表示されます。

分離ストレージ

クォータを増やす

何らかの理由で初期量が不十分な場合、アプリケーションはより多くのスペースを要求する場合があります。要求が成功する保証はありません。 Silverlightは、アプリケーションにより多くのスペースを許可してもよいかどうかをユーザーに尋ねます。

ちなみに、 click などのユーザー入力に応じて、より多くのストレージを要求することしかできません。プラグインの読み込み時やタイマーハンドラーなど、別の時間に要求しようとすると、Silverlightはユーザーにプロンプトを表示せずに要求を自動的に失敗させます。追加のクォータは、ユーザーが対話しているアプリケーションでのみ使用できます。

*IsolatedStorageFile* オブジェクトは、クォータを管理するための3つのメンバーを提供します-

AvailableFreeSpace
増加するクォータ
クォータ

AvailableFreeSpace

AvailableFreeSpaceプロパティは、割り当てられた空き容量を示します。

オペレーティングシステムはディレクトリを表すためにディスク上のスペースを割り当てる必要があるため、空のサブディレクトリでもクォータの一部を消費することに注意してください。そのため、使用可能な領域は、クォータの合計からすべてのファイルの合計サイズを引いたものよりも少ない場合があります。

増加するクォータ

続行するのに十分なスペースがない場合は、 IncreaseQuotaTo メソッドを呼び出してさらに要求します。

クォータ

ここでは、3番目のプロパティ Quota を使用して現在のクォータサイズを検出し、新しい要求クォータを取得するために必要な追加の量を追加しています。

このメソッドは、 True または False を返し、要求されたものが割り当てられているかどうかを示します。 Silverlightは、ユーザーが要求したよりも多くのスペースを割り当てることを決定する場合があることに注意してください。

ボタンがクリックされたときに quota を増やす簡単な例を次に示します。以下にXAMLコードを示します。

<UserControl x:Class = "ChangeQuota.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">
      <TextBlock x:Name = "infoText" FontSize = "20" TextWrapping = "Wrap"/>
      <Button x:Name = "increaseQuota" Content = "Increase" HorizontalAlignment = "Center"
         FontSize = "20"
         VerticalAlignment = "Center" Click = "increaseQuota_Click"/>
   </Grid>

</UserControl>

以下に、割り当てが増加する click イベントの実装を示します。

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;

using System.IO.IsolatedStorage;

namespace ChangeQuota {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void increaseQuota_Click(object sender, RoutedEventArgs e) {
         using (IsolatedStorageFile isoStore =
            IsolatedStorageFile.GetUserStoreForApplication()) {
               long newQuota = isoStore.Quota + 10240;

               if (isoStore.IncreaseQuotaTo(newQuota)) {
                  infoText.Text = "Quota is " + isoStore.Quota + ", free space: " +
                  isoStore.AvailableFreeSpace;
               } else {
                  infoText.Text = "Meanie!";
               }
         }
      }
   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

分離ストレージクォータ

*Increase* をクリックすると、プロンプトが表示されます。 *Quota* を既存のものよりも10KB大きくするように要求します。

分離されたクォータの増加

[はい]をクリックすると、使用可能なクォータの量が出力されます。

クォータを増やす

理解を深めるために、上記の例を実行することをお勧めします。

Silverlight-テキスト

この章では、Silverlightがテキストを表示するために提供するものを見ていきます。テキストブロックは、すべてのテキストレンダリングとSilverlightに使用されます。他の重要な機能は-

単純なプレーンテキストに使用することも、書式設定スタイルを組み合わせて適用することもできます。
Silverlightは、組み込みフォントの標準セットをサポートしています。
また、アプリケーションの視覚スタイルにあまり一般的でないものが必要な場合は、カスタムフォントをダウンロードできます。

TextBlock

テキストを表示するには、Silverlightのtextbook要素を使用します。これは、少量の読み取り専用テキストを表示するための軽量なコントロールです。実際、基本的な使用法ではあまり説明する必要がないので、これについてはすでに多く見ています。テキストプロパティを設定するだけで、そのテキストが表示されます。

<TextBlock Text = "Print Testing" HorizontalAlignment Center" FontFamily = "Georgia"/>

TextBlockクラスの階層的な継承は次のとおりです。

TextBlock

以下に、 TextBlock クラスで一般的に使用される properties を示します。

以下は、TextBlockの最も一般的に使用されるプロパティです。

Sr. No.	Property & Description
1	ContentEnd TextBlockのテキストコンテンツの終わりのTextPointerオブジェクトを取得します。
2	ContentStart TextBlockのテキストコンテンツの開始点のTextPointerオブジェクトを取得します。
3	IsTextSelectionEnabled ユーザーアクションまたは選択関連APIの呼び出しによって、TextBlockでテキスト選択が有効になっているかどうかを示す値を取得または設定します。
4	IsTextSelectionEnabledProperty IsTextSelectionEnabled依存プロパティを識別します。
5	LineHeight コンテンツの各行の高さを取得または設定します。
6	MaxLines TextBlockに表示されるテキストの最大行を取得または設定します。
7	SelectedText 選択したテキストのテキスト範囲を取得します。
8	SelectionEnd TextBlockで選択されたテキストの終了位置を取得します。
9	SelectionHighlightColor 選択したテキストを強調表示するために使用されるブラシを取得または設定します。
10	SelectionStart TextBlockで選択されたテキストの開始位置を取得します。
11	Text TextBlockのテキストコンテンツを取得または設定します。
12	TextAlignment テキストコンテンツの水平方向の配置を示す値を取得または設定します。
13	TextTrimming コンテンツがコンテンツ領域をオーバーフローするときに使用するテキストのトリミング動作を取得または設定します。
14	TextWrapping TextBlockによるテキストのラップ方法を取得または設定します。

以下に、 TextBlock クラスの一般的に使用される*イベント*を示します。

以下は、TextBlockの最も一般的に使用されるイベントです。

Sr. No.

Event & Description

1

ContextMenuOpening

システムがコンテキストメニューを表示するインタラクションを処理するときに発生します。

2

SelectionChanged

テキストの選択が変更されたときに発生します。

以下に、 TextBlock クラスで一般的に使用される methods を示します。

以下に、TextBlockの最も一般的に使用されるメソッドを示します。

Sr. No.

Method & Description

1

Focus

TextBlockを、従来のフォーカス可能なコントロールであるかのようにフォーカスします。

2

Select

TextBlock内のテキストの範囲を選択します。

3

SelectAll

TextBlockのコンテンツ全体を選択します。

Run

書式設定を細かく制御し、テキストブロック全体に対して1つのスタイルを設定したい場合があります。個々の単語や文字をフォーマットすると便利な場合があります。これが必要な場合は、 Text プロパティを使用する代わりに、 TextBlock 内にテキストをコンテンツとして配置します。コードを使用している場合、これは TextBlock インラインプロパティにアイテムを追加することに対応します。

このアプローチを使用すると、一連の実行要素を追加できます。各Runは、テキストスタイルを制御するための同じフォントファミリ、フロントウェイト、フォアグラウンドなどのプロパティをサポートします。 Runは独立した要素ですが、これによりフローが中断されることはありません。

*TextBlock* 内に複数の *Run* 要素を含む簡単な例を見てみましょう。 以下にXAMLコードを示します。

<UserControl x:Class = "SilverlightRunDemo.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <TextBlock Width = "192" TextWrapping = "Wrap" FontFamily = "Verdana">
         <Run Text = "Hello, "/>
         <Run FontWeight = "Bold" Text = "world!"/>
         <Run Text = "You"/>
         <Run FontStyle = "Italic" Text = " are  "/>
         <Run Text = "learning" FontSize = "40" FontFamily = "01d English Text MT"/>
         <Run Text = "   the "/>
         <Run Text = "basics of " Foreground = "Blue"/>
         <Run Text = " Silverlight." FontSize = "30"/>
      </TextBlock>

   </Grid>

</UserControl>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

TextBlock内で実行

ご覧のとおり、このテキストブロックは、 Run 要素を使用してさまざまな書式設定スタイルで配置されています。

ところで、1回の実行でテキストのすべてのビットをラップする必要はありません。テキストブロックのコンテンツのほとんどをプレーンテキストのままにして、以下に示すように、異なる書式設定が必要な部分に*実行*を適用するだけです。

<TextBlock> Hello,
   <Run FontWeight = "Bold" Text =" world!"/>
</TextBlock>

LineBreak

Silverlightは通常、XAMLの改行を無視します。実際にそのスペースを表示したいので、読みやすくするためにほとんどのスペースがそこにあると想定しています。

3行のテキストが含まれているこのXAMLコードを見てみましょう。

<TextBlock>
   This is not the end.
   It is not even the beginning of the end.
   But it is, perhaps, the end of the beginning
</TextBlock>

上記のコードをコンパイルして実行すると、次の出力が表示されます。

LineBreak

ご覧のとおり、改行を無視し、すべてのテキストをまとめて実行しました。

*テキストの折り返し*を有効にすると、テキストを合わせるために必要な場所に改行が挿入されますが、例の改行は無視されます。
明示的な改行を追加するだけの場合は、テキストブロック内に改行タグを追加する必要があります。それに続くテキストは新しい行で始まります。
```
*LineBreak* タグを追加して、同じ例をもう一度見てみましょう。
```

<TextBlock FontSize = "16">
   This is not the end.
   <LineBreak/>

   It is not even the beginning of the end.
   <LineBreak/>

   But it is, perhaps, the end of the beginning
</TextBlock>

上記のコードが実行されると、XAMLで指定されているようになります。

LineBreakタグを追加

組み込みフォント

Silverlightには、組み込みのフォントファミリの固定セットがあります。フォントには、歴史的な理由から実際には異なる姓があります。デフォルトのファミリは、Mac OSとMac OSのLucida Grandeなどのウィンドウでは技術的に異なりますが、WindowsではLucida Sans Unicodeとほぼ同じ名前が付けられています。

最も一般的に使用されるフォントの一部を以下に示します。

Fonts	Arial	Arial Black	Comic Sans MS	Courier New	Georgia	Lucida Grande (Mac) or Lucida Sans Unicode (Windows)	Times New Roman	Trebuchet MS	Verdana

Silverlight-アニメーション

アニメーションを使用すると、真に動的なユーザーインターフェイスを作成できます。多くの場合、効果を適用するために使用されます。たとえば、アイコンの上を移動すると拡大するアイコン、回転するロゴ、スクロールして表示されるテキストなどです。

時々、これらの効果は過度の輝きのように見えます。適切に使用すれば、アニメーションはさまざまな方法でアプリケーションを強化できます。アプリケーションの応答性、自然性、直感性を高めることができます。

たとえば、クリックしたときにスライドするボタンは、別の灰色の長方形ではなく、実際の物理的なボタンのように感じられます。アニメーションは、重要な要素に注意を引き、新しいコンテンツへの移行をユーザーに案内することもできます。

Silverlightのアニメーションへのアプローチは、フレームアニメーションのシーケンスに焦点を合わせるのではなく、宣言的です。

アニメーションの定義

アニメーションは通常、リソースセクションで定義されます。実際、それらは通常、ストーリーボード要素にラップされています。これについては、後ほど詳しく説明します。

Begin（）メソッドが提供されているため、アニメーションをコードから呼び出すことができます。 *アニメーションは、コントロールテンプレートの視覚状態要素内に配置することもできます。

宣言的なアニメーション

Silverlightのアニメーションは宣言的です。彼らは何が起こりたいかを説明します。それを実現する方法については、Silverlightにお任せください。そのため、アニメーションは通常、Silverlightに変更したい内容を伝えるパターンに従います。

これは常にいくつかの名前付き要素のプロパティです。* TargetName および *TargetProperty 。

<DoubleAnimation
   Storyboard.TargetName = "myRectangle"
   Storyboard.TargetProperty = "Opacity"
   From = "0" To = "1"
   Duration = "0:0:5"
/>

この場合、そのプロパティをどのように変更したいかを言います。不透明度を値0から値1に変更しています。つまり、ターゲット要素が不透明から透明にフェードするのが好きです。
最後に、これに要する時間を言います。この場合、5秒かかります。
このdoubleアニメーションでのdoubleの重要性は、double型、つまり浮動小数点値を持つプロパティを対象とすることです。
色を表すプロパティをアニメーション化する場合は、代わりにカラーアニメーションを使用します。

ダブルアニメーションの簡単な例を見てみましょう。以下に示すのは、2つのボタン、1つの長方形、2つのストーリーボードが追加されたXAMLコードです。

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

   <UserControl.Resources>

      <Storyboard x:Name = "fadeDown">
         <DoubleAnimation
            Storyboard.TargetName = "myRectangle"
            Storyboard.TargetProperty = "Opacity"
            From = "1" To = "0"
            Duration = "0:0:5"/>
      </Storyboard>

      <Storyboard x:Name = "fadeUp">
         <DoubleAnimation
            Storyboard.TargetName = "myRectangle"
            Storyboard.TargetProperty = "Opacity"
            From = "0" To = "1"
            Duration = "0:0:5"/>
      </Storyboard>

   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot">
      <Rectangle x:Name = "myRectangle"
         Fill = "Blue" Width = "300" Height = "100"
         HorizontalAlignment = "Center"
         VerticalAlignment = "Top" Margin = "0,30"/>

      <Button x:Name = "fadeUpButton" Content = "Up" Width = "80"
         Height = "30" HorizontalAlignment = "Left"
         VerticalAlignment = "Top" Margin = "50,140,0,0"
         Click = "fadeUpButton_Click"/>

      <Button x:Name = "fadeDownButton" Content = "Down"
         Width = "80" Height = "30" HorizontalAlignment = "Left"
         VerticalAlignment = "Top" Margin = "50,180,0,0"
         Click = "fadeDownButton_Click"/>

   </Grid>

</UserControl>

C＃のさまざまなイベントの実装を次に示します。

using System.Windows;
using System.Windows.Controls;

namespace DoubleAnimationExample {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void fadeUpButton_Click(object sender, RoutedEventArgs e) {
         fadeUp.Begin();
      }

      private void fadeDownButton_Click(object sender, RoutedEventArgs e) {
         fadeDown.Begin();
      }
   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

宣言型アニメーション

繰り返しと反転

アニメーションには、自動的に繰り返すいくつかのプロパティと、すべてのリバースアニメーションがあります。

繰り返し動作プロパティをタイムスパムに設定すると、指定した時間が経過するまでアニメーションが繰り返しループするか、繰り返したい回数を伝えることができます。
これは小数点をサポートしているため、4回半繰り返すことができます。
永遠に繰り返すことができます。また、アニメーションが最後に到達したら、逆方向に実行して最初に戻るようにアニメーションに指示することもできます。

キーフレームアニメーション

多くの場合、AからBへの単純なアニメーションは少し単純すぎます。たとえば、地面から跳ね返るボールをアニメーション化します。これは単純なポイントツーポイントの移動ではありません。ボールは落下し、徐々にスピードを上げてから、下に当たると方向を逆にします。旅行の頂点に戻ると、再び減速します。

キーフレームアニメーション*の簡単な例を見てみましょう。

以下に、XAMLコードを示します。これには、キーフレーム付きの楕円とダブルアニメーションが含まれています。

<UserControl x:Class = "LinearKeyFrames.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"
   Width = "400" Height = "300">

   <UserControl.Resources>

      <Storyboard x:Name = "ballAnim" SpeedRatio = "0.2">
         <DoubleAnimation From = "0" Duration = "00:00:03" To = "96"
            Storyboard.TargetName = "ellipse"
            Storyboard.TargetProperty = "(Canvas.Left)"/>

         <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName = "ellipse"
            Storyboard.TargetProperty = "(Canvas.Top)">

            <LinearDoubleKeyFrame KeyTime = "00:00:00"   Value = "0"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:00.5" Value = "16"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:01"   Value = "48"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:01.5" Value = "112"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:02"   Value = "48"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:02.5" Value = "16"/>
            <LinearDoubleKeyFrame KeyTime = "00:00:03"   Value = "0"/>

         </DoubleAnimationUsingKeyFrames>

      </Storyboard>

   </UserControl.Resources>

   <Grid x:Name = "LayoutRoot" Background = "White">
      <Canvas>
         <Ellipse x:Name = "ellipse" Fill = "Aqua" Width = "50" Height = "50"/>
      </Canvas>
   </Grid>

</UserControl>

以下は mouse left button downイベントの実装です。これは、ユーザーがWebページ上でマウスの左ボタンを押したときにアニメーションを開始します。

using System.Windows.Controls;
using System.Windows.Input;

namespace LinearKeyFrames {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
         this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);
      }

      void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
         ballAnim.Begin();
      }
   }
}

上記のコードをコンパイルして実行すると、次の出力が表示されます。

キーフレームアニメーション

Webページをクリックすると、ボールが動き始めます。

キーフレームアニメーションの移動

Silverlight-ビデオとオーディオ

この章では、Silverlight機能がビデオとオーディオをどのように再生しているかを見ていきます。 MediaElement は、Silverlightのすべてのビデオとオーディオの中心です。これにより、アプリケーションにオーディオとビデオを統合できます。 MediaElement クラスは、 Image クラスと同様に機能します。メディアに向けるだけで、オーディオとビデオがレンダリングされます。

主な違いは動画である点ですが、MP3などの音声のみで動画を含まないファイルをポイントすると、画面に何も表示されずに再生されます。

UI要素としてのMediaElement

*MediaElement* は、すべてのSilverlightユーザーインターフェイス要素の基本クラスであるフレームワーク要素から派生します。 つまり、すべての標準プロパティが提供されるため、不透明度を変更したり、クリップを設定したり、クリップを変換したりできます。

*MediaElement* の簡単な例を見てみましょう。

Visual Studio用Microsoft Blendを開き、新しいSilverlightアプリケーションプロジェクトを作成します。

MediaElementアプリ

次に、ビデオまたはオーディオファイルをBlendデザインサーフェイスにドラッグします。

MediaElementアプリケーション

MediaElementをサーフェスに追加し、プロジェクトにビデオファイルのコピーも追加します。ソリューションエクスプローラーで確認できます。

MediaElementからSurface

移動したり、サイズを変更したり、回転などを適用したりできます。

回転

これで、以下に示すような MainPage.xaml ファイルに関連するXAMLが生成されます。

<UserControl x:Class = "MediaElementDemo.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
         Margin = "51,49,53,53"
         Source = "/Microsoft Silverlight DEMO.mp4"
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

         <MediaElement.RenderTransform>
            <CompositeTransform Rotation = "-18.384"/>
         </MediaElement.RenderTransform>

      </MediaElement>

   </Grid>

</UserControl>

上記のアプリケーションをコンパイルして実行すると、Webページでビデオが再生されていることがわかります。

XAML Generate

制御

*MediaElement* はメディアを提示するだけです。 標準のプレーヤーコントロールは提供しません。 自動的に再生を開始し、最後に達すると停止します。ユーザーが一時停止または制御するためにできることはありません。 そのため、実際には、ほとんどのアプリケーションは、ユーザーにそれ以上の制御を提供したいと思うでしょう。

*AutoPlay* を *False* に設定すると、自動再生を無効にできます。 つまり、メディアプレーヤーは、尋ねるまで何も再生しません。

<MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
   AutoPlay = "False"
   Margin = "51,49,53,53"
   Source = "/Microsoft Silverlight DEMO.mp4"
   Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">

そのため、ビデオを再生する場合は、* MediaElement Play（）メソッド*を呼び出すだけです。また、停止および一時停止メソッドも提供します。

同じ例をもう一度見て、少し変更して、少し制御できるようにします。以下のXAMLコードに示すように、 MediaElement に MouseLeftButtonDown ハンドラーを接続します。

<UserControl x:Class = "MediaElementDemo.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <MediaElement x:Name = "Microsoft_Silverlight_DEMO_mp4"
         AutoPlay = "False"
         MouseLeftButtonDown = "Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown"
         Margin = "51,49,53,53"
         Source = "/Microsoft Silverlight DEMO.mp4"
         Stretch = "Fill" RenderTransformOrigin = "0.5,0.5">
      </MediaElement>

   </Grid>

</UserControl>

以下は、 MouseLeftButtonDown イベントハンドラーの実装です。ここでは、メディア要素の現在の状態がプレーティングされている場合にビデオを一時停止し、そうでない場合はビデオの再生を開始することを確認します。

using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace MediaElementDemo {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void Microsoft_Silverlight_DEMO_mp4_MouseLeftButtonDown
         (object sender, MouseButtonEventArgs e) {

         if (Microsoft_Silverlight_DEMO_mp4.CurrentState == MediaElementState.Playing) {
            Microsoft_Silverlight_DEMO_mp4.Pause();
         } else {
            Microsoft_Silverlight_DEMO_mp4.Play();
         }
      }
   }
}

上記のコードをコンパイルして実行すると、 AutoPlay プロパティが False に設定されているため、空白のWebページが表示されます。 Webページをクリックすると、ビデオが開始されます。

AutoPlay Generate

Webページをもう一度クリックすると、ビデオが一時停止します。

Silverlight-印刷

印刷は、特定の種類のアプリケーションにとって重要な機能です。この章では、Silverlightの関連機能について説明します。

印刷API、およびすべてのSilverlightアプリケーションが印刷する場合に実行する必要のある基本手順。ウォータープリントを選択するためのさまざまなオプション。
最も簡単なのは、すでに画面上にあるユーザーインターフェイス要素のコピーを印刷することです。
ほとんどのアプリケーションは、これよりも少し高度になり、印刷に特化したコンテンツを生成することを望みます。場合によっては、コンテンツを複数のページに分割する必要があります。

印刷の手順

スナップショットを印刷する場合でも、既に画面上にあるものを印刷する場合でも、完全にカスタマイズされた複数ページの印刷出力を行う場合でも、同じ基本手順が必要です。

印刷APIの中核にあるのはPrintDocumentクラスです。
これらのいずれかを作成することから始め、そのPrintメソッドを呼び出すと、印刷ジョブを開始するための標準ユーザーインターフェイスが表示されます。

印刷の手順

ユーザーは通常どおりプリンターを選択し、設定を構成できます。ユーザーが Print をクリックして先に進むことを決定した場合、 PrintDocument はすぐに PrintPage イベントを発生させ、そのイベントのハンドラーは印刷するコンテンツを提供します。
イベント引数は、この目的のために PageVisual プロパティを提供します。 *任意のSilverlightユーザーインターフェイス要素に設定できます。画面に既に表示されている要素、または特に印刷用に作成した新しい要素のいずれかです。

既存の要素の印刷

要素最も簡単なオプションは、Silverlightアプリケーションで既に画面上にあるコンテンツを印刷することです。* PrintPage イベント引数 *PageVisual はすべてのユーザーインターフェイス要素を受け入れるため、ユーザーインターフェイスで何でも選択して印刷できます。

PrintScreenキーを使用してスクリーンショットを取得するのは、わずかなステップアップです。ユーザーがスクリーンショットをトリミングして印刷するために他のプログラムにスクリーンショットを手動で貼り付ける必要がないため、それはそれよりわずかに優れています。まだわずかな改善にすぎません。
既に画面上にあるコンテンツの印刷には問題があります。

まず、画面上で機能するレイアウトが紙に適しているという保証はありません。

*ScrollViewer* にいくつかのUI要素とその画面に適合したレイアウトが含まれる簡単な例を見てみましょう。 ブラウザウィンドウのサイズに基づいてサイズが変更され、スクロールバーが提供されて、収まらない場合でもすべてにアクセスできるようにします。

以下にXAMLコードを示します。

<UserControl
   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"
   xmlns:sdk = "http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
   x:Class = "SilverlightPrinting.MainPage"
   mc:Ignorable = "d"
   d:DesignHeight = "300" d:DesignWidth = "500">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Button x:Name = "print" Content = "Print" Click = "print_Click" Width = "60"
         Height = "20" Margin = "10,10,430,270"/>

      <ScrollViewer x:Name = "myScrollViewer"
         HorizontalScrollBarVisibility = "Auto"
         VerticalScrollBarVisibility = "Auto"
         Width = "400" Margin = "90,0,10,0">

         <StackPanel>
            <Rectangle Fill = "Gray" Width = "100" Height = "100"/>
            <Button x:Name = "button" Content = "Button" Width = "75"/>
            <sdk:Calendar Height = "169" Width = "230"/>
            <Rectangle Fill = "AliceBlue" Width = "475" Height = "100"/>
         </StackPanel>

      </ScrollViewer>

   </Grid>

</UserControl>

*ScrollViewer* とその表示データを印刷する* Printボタン*クリックイベントの実装を次に示します。

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Printing;

namespace SilverlightPrinting {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void print_Click(object sender, RoutedEventArgs e) {
         PrintDocument pd = new PrintDocument();
         pd.PrintPage += new System.EventHandler<PrintPageEventArgs>(pd_PrintPage);
         pd.Print("Print Screen Content");
      }

      private void pd_PrintPage(object sender, PrintPageEventArgs e) {
         e.PageVisual = myScrollViewer;
      }
   }
}

ご覧のように、 PrintDocument オブジェクトが作成される Print button click event で、PrintPageイベントにハンドラーをアタッチします。
ScrollViewer を参照するように PageVisual プロパティを設定できます。
次に* Printメソッド*が呼び出されます。これは文字列を取り、印刷キューのジョブ名として表示されます。

上記のコードをコンパイルして実行すると、次の出力が表示されます。

PrintDocument

[印刷]ボタンをクリックすると、標準の[印刷]ダイアログが表示されます。

PrintDocument OneNote

次に、デフォルトのプリンターを選択します。デモンストレーションのために、 OneNote を選択し、印刷*ボタンをクリックします。 *ScrollViewer が印刷されていることがわかります。

ScrollViewerの印刷

スクロールバーは ScrollViewer にまだ表示されていることに注意してください。

カスタムUIツリー

すでに画面上にあるコンテンツを印刷する代わりに、通常、印刷専用のユーザーインターフェイス要素のツリーを構築する方が適切です。これにより、紙上で非インタラクティブな要素のみを使用し、紙の形状とサイズにより適した特殊なレイアウトを作成できます。印刷専用のUserControlを作成できます。

Silverlightプロジェクトを作成し、 PrintLayout という UserControl を追加して、簡単な例を見てみましょう。

PrintLayout

設計時間の幅と高さをほぼ紙の形に設定します。以下に、 PrintLayout.xaml ファイルのXAMLコードを示します。

<UserControl x:Class = "PrintCustomUI.PrintLayout"
   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 = "768" d:DesignWidth = "960">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Grid.RowDefinitions>
         <RowDefinition Height = "Auto"/>
         <RowDefinition/>
         <RowDefinition Height = "Auto"/>
      </Grid.RowDefinitions>

      <TextBlock Text = "Silverlight" HorizontalAlignment = "Center"
         FontSize = "60" FontWeight = "Bold" FontFamily = "Georgia"/>

      <TextBlock Grid.Row = "2" Text = "Print Testing"
         HorizontalAlignment = "Center" FontFamily = "Georgia"
         FontSize = "24" Margin = "0,10"/>

      <Rectangle Grid.Row = "2" Height = "1" Fill = "Black"
         VerticalAlignment = "Top"/>

      <Ellipse Grid.Row = "1" Stroke = "Black" StrokeThickness = "10" Margin = "10">

         <Ellipse.Fill>

            <RadialGradientBrush
               GradientOrigin = "0.2,0.2"
               Center = "0.4,0.4">
               <GradientStop Color = "Aqua" Offset = "0.006"/>
               <GradientStop Color = "AntiqueWhite" Offset = "1"/>
            </RadialGradientBrush>

         </Ellipse.Fill>

      </Ellipse>

   </Grid>

</UserControl>

以下に示すのは、 MainPage.xaml ファイルのコードで、 Print ボタンのみが含まれています。

<UserControl x:Class = "PrintCustomUI.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:DesignHeight = "300" d:DesignWidth = "400">

   <Grid x:Name = "LayoutRoot" Background = "White">

      <Button Content = "Print..." Height = "23" HorizontalAlignment = "Left"
         Margin = "12,28,0,0" Name = "printButton"
         VerticalAlignment = "Top" Width = "75"
         Click = "printButton_Click"/>

   </Grid>

</UserControl>

印刷ボタンの* Clickイベント*実装を次に示します。

using System;
using System.Collections.Generic;
using System;

using System.Windows;
using System.Windows.Controls;
using System.Windows.Printing;

namespace PrintCustomUI {

   public partial class MainPage : UserControl {

      public MainPage() {
         InitializeComponent();
      }

      private void printButton_Click(object sender, RoutedEventArgs e) {
         PrintDocument pd = new PrintDocument();
         pd.PrintPage += new EventHandler<PrintPageEventArgs>(pd_PrintPage);
         pd.Print("Custom");
      }

      void pd_PrintPage(object sender, PrintPageEventArgs e) {
         var pl = new PrintLayout();
         pl.Width = e.PrintableArea.Width;
         pl.Height = e.PrintableArea.Height;
         e.PageVisual = pl;
      }
   }
}

上記のコードをコンパイルして実行すると、Webページに次の出力が表示されます。

印刷ボタン

印刷*をクリックし、 *OneNote を選択してレイアウトを印刷します。レイアウトが印刷されていることがわかります。

印刷するOneNoteを選択

使用可能なスペースがいっぱいになっていることがわかります。理解を深めるために、上記の例を実行することをお勧めします。

Silverlight-quick-guide

Silverlight-概要

Silverlightとは

プラットフォームとブラウザ

Windows

Mac

Linux

Silverlight-環境設定

インストール

Silverlight-はじめに

Webページを作成する

Silverlight-XAMLの概要

基本的な構文

SilverlightでXAMLを使用する理由

XAMLとコードビハインド

Silverlight-プロジェクトの種類

Silverlight Webアプリケーション

Silverlightナビゲーションアプリケーション

Silverlight-固定レイアウト

固定レイアウト

Silverlight-動的レイアウト

スタックパネル

Grid

制約対 制約のないレイアウト

全画面モード

Silverlight-CSS

重複するコンテンツ

例

Silverlight-コントロール

Silverlight-ボタン

Silverlight-コンテンツモデル

RangeControl

例

Silverlight-リストボックス

Silverlight-テンプレート

テンプレートの接続

Silverlight-視覚状態

州および州グループ

ビジュアルステートマネージャー

Silverlight-データバインディング

一方向データバインディング

双方向のデータバインディング

Silverlight-ブラウザー統合

SilverlightとHTML

DOMへのアクセス

Silverlight-ブラウザー外アプリケーション

インタラクション

オフライン

高信頼

OOBを有効にする

Silverlightアプリケーション

アプリケーションをアンインストールするには

OOB設定

アプリケーション、リソース、展開

プラグインをロードする

HTMLの<Object>

タイプ属性

データ属性

<param>タグ

フォールバックHTMLコンテンツ

Silverlight.js

XAMLリソース

App.xaml

アプリケーションクラス

注意点

Silverlight-ファイルアクセス

ファイルを開くおよび保存ダイアログ

SaveFileDialog

OpenFileDialog

FileStream

Silverlight-ビューモデル

UI開発の課題

分離プレゼンテーション

モデル/ビュー/ViewModel

モデル

View

ViewModel

例

UI vs ViewModel

MVVMの利点

制約対制約のないレイアウト