バージョン

WinLiveTileView のスタイル設定

トピックの概要

目的

このトピックでは、デザイナーを使用してコード ビハインドや AppStylist で、 WinLiveTileView™ コントロールのスタイルを設定する方法を示します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります。

トピック 目的

このトピックでは、デザイナー インターフェイスを使用して UltraLiveTileView コントロールやタイルを追加する方法を示します。

概要

概要

WinLiveTileView コントロールは、タイルおよびその他の視覚要素の外観をスタイル設定する方法を提供します。

WinLiveTileView は AppStylist もサポートしているため、必要なスタイルで各要素のスタイル設定ライブラリ ファイルを作成し、 WinLiveTileView コントロールのテーマ ファイルとして保存できます。

WinLiveTileView のスタイル設定

タイルのスタイル設定

WinLiveTileView デザイナーを使用する前に、前提条件 セクションを参照してください。タイルを作成するためにデザイナーを使用する方法は前提条件です。

WinLiveTileView のデザイナーを開き、コントロール レイアウトにミディアム タイルを追加します。

WinLiveTileView Styling 1.png

タイルを選択し、 プロパティ タブをクリックし、プロパティ グリッドの Appearance プロパティを展開します。

WinLiveTileView Styling 2.png

各タイルは 4 つの Appearance プロパティを公開します。

プロパティ 説明

Active

タイルがキーボード ナビゲーションによりタイルがアクティブな場合。 Ctrl キーを押し、矢印キーを使用します。

HotTracking

マウス ポインターをタイルの上に移動する場合。

Normal

タイルのユーザー操作なしの通常状態。

Selected

タイルの右上コーナーにチェックマークがある選択状態の場合。

以下の画像は、HotTracking の外観設定を表示します。

Note
注:

実線色を使用する場合、BackGradientStyle を無効にし、BackColor のみを設定するか、BackGradientStyle に両方の必要があるため、BackColor および BackColor2 の両方を設定します。

WinLiveTileView Styling 3.png

コード例

以下のコード例は、コード ビハインドでグループおよびタイルへの参照を取得し、タイルの背景色をスタイルする方法を紹介します。

C# の場合:

LiveTile liveTile = (LiveTile)ultraLiveTileView1.Groups[“Group 1”].Tiles[“mediumTile1”];
liveTile.Appearance.HotTracking.BackColor = Color.YellowGreen;
liveTile.Appearance.HotTracking.BackGradientStyle = GradientStyle.None;

Visual Basic の場合:

Dim liveTile As LiveTile = DirectCast(ultraLiveTileView1.Groups(“Group 1”).Tiles(“mediumTile1”), LiveTile)
liveTile.Appearance.HotTracking.BackColor = Color.YellowGreen
liveTile.Appearance.HotTracking.BackGradientStyle = GradientStyle.None

グループのスタイル設定

グループの外観

WinLiveTileView グループは、タイル コレクションのプロパティを公開し、グループ内のすべてのタイルのスタイルを設定する機能も提供します。

WinLiveTileView Styling 4.png

コード例

以下のコード例は、コード ビハインドで指定したキーのグループへの参照を取得し、グループの外観 (Border および BackColor) をスタイルする方法を紹介します。

C# の場合:

TileGroup tileGroup = (TileGroup) ultraLiveTileView1.Groups["Group 1"];
tileGroup.Appearance.Normal.BorderColor = Color.Red;
tileGroup.Appearance.Normal.BackGradientStyle = GradientStyle.None;
tileGroup.Appearance.Normal.BackColor = Color.FromArgb(128, 128, 255);

Visual Basic の場合:

Dim tileGroup As TileGroup = DirectCast(ultraLiveTileView1.Groups("Group 1"), TileGroup)
tileGroup.Appearance.Normal.BorderColor = Color.Red
tileGroup.Appearance.Normal.BackGradientStyle = GradientStyle.None
tileGroup.Appearance.Normal.BackColor = Color.FromArgb(128, 128, 255)

グループのテキスト外観

以下のコード例は、コード ビハインドで指定したキーのグループへの参照を取得し、グループのテキスト外観 (Border および BackColor) をスタイルする方法を紹介します。

WinLiveTileView Styling 5.png

コード例

以下のコード例は、コード ビハインドで指定したキーのグループへの参照を取得し、グループのテキスト外観 (Border、ForeColor、および BackColor) をスタイルする方法を紹介します。

C# の場合:

TileGroup tileGroup = ultraLiveTileView1.Groups["Group 1"];
tileGroup.TextAreaAppearance.Normal.BackColor = Color.YellowGreen;
tileGroup.TextAreaAppearance.Normal.BorderColor = Color.Orange;
tileGroup.TextAreaAppearance.Normal.ForeColor = Color.Blue;

Visual Basic の場合:

Dim tileGroup As TileGroup = ultraLiveTileView1.Groups("Group 1")
tileGroup.TextAreaAppearance.Normal.BackColor = Color.YellowGreen
tileGroup.TextAreaAppearance.Normal.BorderColor = Color.Orange
tileGroup.TextAreaAppearance.Normal.ForeColor = Color.Blue

グループのタイル外観

グループはタイルのコレクションを含みます。グループのタイル外観プロパティの設定を変更すると、グループのすべてのタイルに影響します。

WinLiveTileView Styling 6.png

コード例

以下のコード例は、コード ビハインドで指定したキーのグループへの参照を取得し、グループのタイル外観 (ForeColor) をスタイルする方法を紹介します。この設定はグループ内のすべてのタイルに適用されます。

C# の場合:

TileGroup tileGroup = ultraLiveTileView1.Groups["Group 1"];
tileGroup.TileAppearance.Normal.ForeColor = Color.Yellow;

Visual Basic の場合:

Dim tileGroup As TileGroup = ultraLiveTileView1.Groups("Group 1")
tileGroup.TileAppearance.Normal.ForeColor = Color.Yellow

AppStylist を使用した WinLiveTileView のスタイル設定

AppStylist を使用した WinLiveTileView のスタイル設定

WinLiveTileView コンポーネントは、さまざまなスタイル オプションを提供する AppStylist をサポートしています。スタイル設定オプションでは、例えば定義済のスタイル設定ライブラリ ファイルの 1 つを使用することも、異なる外観のために既存のテンプレートをカスタマイズすることも、さらに AppStylist を使用して独自のライブラリ ファイルを作成することも可能です。

詳細は、 AppStylist を使用した LiveTileView またはその他の Ultimate UI for Windows Forms コントロール全般のスタイル ライブラリ ファイルの作成方法を説明する、 スタイリングのためのアプリケーション設定のトピックを参照してください。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このグループのトピックでは、最新の WinLiveTileView コントロールについて、使用および設定する手順を含めて紹介します。このコントロールは、Microsoft Windows 8 オペレーティング システムのスタート画面のタイルと類似しています。