四、インタフェース作成(1)
3993 ワード
VS2010 SilverLight ， Blend ， Blend SilverLight ， VS 。 Client。この場合、1つのソリューションにはClientという2つのプロジェクトがあります.これはSilverLightのメインプログラムプロジェクトで、もう1つはClientです.Web、これはSilverLightのテストページです.まずページのページを調整します.
まず、私たちはウェブページに背景を追加しなければなりません.そうしないと、純白がまぶしくて、1枚の画像を選択して、まず対応するClient.にコピーします.Webフォルダに、VSに画像を追加する方法(図4.1)はClient.Webを右クリックし、「追加」、「既存項目」を選択して、画像を見つければいいです.私が追加した画像の名前はbg 5です.jpg.
図4.1ピクチャの追加方法
次にClientTestPageをダブルクリックします.aspxファイル(デフォルトはhtmlではなくこのファイルを表示するため)、下にタグを見つけ、下に「」を追加し、下の前に「」タグを追加し、引用符はありません.以下のコード(赤は追加コード)を参照してください.
実行すると、背景図が見えます.
しかし、この時SilverLightのメインインタフェースは左上にあり、うーん、まだSilverLightのインタフェースの大きさを調整していないので、焦らないで、ゆっくりしてください.私たちはそれを真ん中に置きます.方法は次のとおりです.
ClientTestPageでaspxファイルの上部に#silverlightControlHostが見つかりました.変更内容は以下の通りです.
#silverlightControlHost{
height: 600px;
width: 1024px;
text-align:center;
position:absolute;
left:50%;
top:50%;
margin:-300px 0 0 -512px;
}
：
#silverlightControlHost{
height: 600px; //
width: 1024px; //
text-align:center; //
position:absolute;// :
left:50%; // 50%
top:50%; // 50%
margin:-300px 0 0 -512px;// , top、right、bottom、left ,
}私はここでゲームエリアを1024*600と定義しましたが、他の定義方法があれば、必ず自分で数値を修正しなければなりません.
ページ設定が終わり、次はこのSilverLightのインタフェースについて作成します.
Blend 4でVSで作成したClientを開きます.slnファイル、彼らは共通です.左上隅の「プロジェクト」をクリックし、プロジェクトを右クリックし、「新しいフォルダを追加」し、イメージに名前を変更し、イメージフォルダを右クリックして、背景の画像フォルダとして新しいフォルダ(backdrop)を作成し、対応する画像をコピーし、既存のアイテムを追加し、Blendに追加します.図4.2のように:
図4.2画像の追加
次に、下のLayoutRootにポイントし、右のプロパティでレイアウトのwidthを1024、heightを600に変更します.[UserControl]のプロパティもこのように変更します.最後にLayoutRootを選択します.
次に、図4.3のように、資産、コントロール、パネル、ダブルクリックまたはCanvasをドラッグします.
4.3 Canvasを追加
簡単に言えばCanvasですが、これは1つの容器に相当し、任意のもの(コントロール、画像などを含む)を配置してCanvasを操作すればいいのです.
次に、このCanvasを選択して、プロパティに対応するプロパティを変更します.名前:MainCanvas、背景画像、サイズ.
図4.4のように
図4.4 MainCanvasのプロパティの変更
これでゲームエリアの背景図ができました.
次に、私たちは自分のエリアを作ります.ゲームインタフェースの下部です.素材の「MainIcon 021.png」ファイルをプロジェクトのbackdropフォルダにコピーします.
次に、図に従って操作します.
図4.5新規コントロールの追加
Clientプロジェクトに新しいアイテムを追加し、UserControlを選択します.名前はMainBottomです.これにより、コントロールのサイズをBottomピクチャのサイズに変更し、1024*224でピクチャを追加します.
MyFaceという名前を追加して、右側の自分の顔として、今勝手に図を追加して先に作って、最後にコードを書いて、画像を変えることができます.次のようになります.
図4.6新しいコントロール設計図
ここにはTextBlockが含まれています.顔と血は画像で、下の2つはボタンです.この位置は下図に基づいて作られているので、下図を一時的に入れて、終わってから削除することができます.ボタンの作成についてお話しします.
ここはspellButtonを使っています.もちろん修正しましたが、上の図は修正していません.修正した図は以下の通りです:(PSで修正すればいい)
ドラッグしたボタンを右クリックし、[テンプレートを編集](Edit Template)、[空のアイテムを作成](Create Empty Item)の順にクリックします.名前は自分で覚えておいて、位置選択アプリケーションを定義して、別のボタンを直接使うことができます.次の画像を押して設定します.
図4.7ボタンテンプレート設計
アイテムの行に「ステータス」が1つ増えていることがわかります.クリックすると選択肢がたくさんあります.
Base:基本的な様子
ノーマル:いつもの姿
MouseOver:マウス移動
Pressed:マウスを押す
Disabled:使用不可
Focused:フォーカスの取得
UnFocused:フォーカスを押す
これらの状態を別々に設定することができ、Baseに画像を追加し、ブラシの拡張メニューでストレッチ方式をUniformToFill、Yオフセットを1.55に設定し、他の状態も同様に設定します.(各状態のYオフセット量:Normal:1.55,MouseOver:0.5,Pressed:1.55,Disabled:-1.65)
最後に別のボタンをこのテンプレートに適用します.そして中のフォントを「隷書(ここは英語のみ、名前はLisu)」に変更します.
それからMainBottomを開けて、資産の中でこのコントロールを見つけることができて、もしなければ、生成します.適切な位置にドラッグ&ドロップし、最終的に実行する効果は次の図のようになります.
図4.9最終結果図
本節の重点と解決する問題:
1.SilverLightのメインインタフェースを中央にします.
2.Blend 4の初歩的なアプリケーション(画像の追加など).
3.Blend 4にカスタムコントロールを追加します.
4.ボタンテンプレート
2011年10月20日木曜日
本節のソースコードのダウンロードアドレス:http://download.csdn.net/detail/yjn43422757/3701581
少し違いますが、中には2つのフォントが少ないかもしれません.加えると大きすぎます.楷書と隷書です.