UI Builder による UI のスタイル設定
UI Builder では、インラインスタイルまたは USS セレクターを使って要素のスタイルを設定することができます。インラインスタイルは通常、一回限りの使用や実験的な目的で使用される一方、スタイルシートによるスタイル管理は、より簡単で効率的な傾向があります。インラインスタイルは USS クラスに抽出 できます。UI Builder でスタイルシートと USS セレクターを管理することもできます。
インラインのスタイルを要素に設定
要素の Inspector ウィンドウの Inlined Styles セクションで、要素にインラインスタイルを設定できます。
フィールドラベルの左側に実線が表示されている 太字 のスタイルフィールドは、すでに設定済みか オーバーライド されているスタイルプロパティを表します。これらの オーバーライド されているスタイルプロパティは、常に StyleSheet または C# デフォルトの同じプロパティをオーバーライドするため、常に追跡しておくことが重要です。スタイルプロパティの オーバーライド を解除または削除するには、スタイルフィールドを右クリックして Unset を選択します。
ノート: インラインスタイルを使用して、疑似クラス や 読み取り専用要素 のスタイルを設定することはできません。
スタイルシートの管理
スタイルシートを追加するには、+ ドロップダウンメニューを使用し、以下のオプションのいずれかを選択します。
- Create New USS:プロジェクトに新しいスタイルシートを作成するための Save File Dialog が開きます。
- Add Existing USS:既存のスタイルシートを UI Document に加えるための Open File Dialog を開きます。
アクティブな UI Document からスタイルシートを削除するには、スタイルシートを右クリックし、Remove USS を選択します。
スタイルシートをアクティブにするには、スタイルシートを右クリックし、Set as Active USS を選択します。アクティブな StyleSheet が太字で表示されます。
サブドキュメントを編集すると、親ドキュメントに属するスタイルシートはグレイアウトの状態で表示され、読み取り専用になります。
ノート: CSS ファイルと同じように、テキストエディターで USS ファイルにコメントを追加することができます。ただし、USS ファイルを UI Builder で開くと、UI Builder から USS ファイルを保存するときにコメントは削除されます。
USS セレクターの作成
StyleSheets ウィンドウで新しい USS セレクターを作成できます。また、Inspector ウィンドウの StyleSheets セクションで新しいクラスセレクターを作成することもできます。新しいセレクターは常に アクティブな StyleSheet に追加されます。
StyleSheets ウィンドウで新しいセレクターを作成するには、以下を行います。
-
StyleSheets ウィンドウで、Add new selector… フィールドをクリックします。下の画像のように、ビューポート の上に USS セレクター構文参照ウィンドウが開きます。
USS Selector チートシート セレクターは正しい構文で入力してください。例えば、クラスセレクターは
.で開始するようにします。Enter キーを押します。
StyleSheets ウィンドウで、新しく作成したセレクターを選択します。
セレクターの Inspector ウィンドウで、セレクターに好みのスタイルを設定します。
要素の Inspector ウィンドウで新しいクラスセレクターを作成するには、以下を行います。
Hierarchy ウィンドウで、要素を選択します。
Inspector ウィンドウで、Style Class List テキストフィールドにクラスセレクターを入力します。
-
Add Style Class to List を選択します。Style Class List に黄色いスタイルクラスラベルが表示されます。
Inspector の StyleSheet セクション 黄色いスタイルクラスラベルが薄く表示される場合、添付の StyleSheet にセレクターが存在しないことを意味します。これをダブルクリックすると、新しいクラスセレクターを作成できます。クラスセレクターが存在する場合は、そのセレクターをダブルクリックして、セレクターの Inspector ウィンドウを開くことができます。
USS セレクターを操作する
1つ以上の USS セレクターをコピー、貼り付け、複製、名前変更、削除するには、以下を行います。
- StyleSheets ウィンドウで、グループを選択します。
- グループを右クリックし、アクションを選択します。
ヒント: UI Builder の StyleSheets ウィンドウとテキストエディターの間で USS セレクターをコピーして貼り付けできます。
要素に合わせて USS スタイルクラス照合する
USS クラスを要素に合わせて照合することができます。例えば、以下のような USS スタイルがあるとします。
USS スタイルクラスを要素に照合するには、以下のいずれかを行います。
-
などのスタイルクラスラベルを Hierarchy か Canvas 上の要素にドラッグします。 - 要素の Inspector ウィンドウの StyleSheet > Style Class List フィールドにセレクターの名前を入力し、Add Style Class to List を選択します。
