📖 wpf-resource-dictionary-practice Git hub に上げたもの
📖 wpf-window-resources-practice
「 XML文書 使ってる利点を生かして、 一度書いた XML を何か所でも再利用する仕組みだぜ。
それはまるで クリック イベントを再利用しているようにも見えるし、スタイルを再利用しているようにも見えるぜ」
「 👆 じゃあ適当に Resources みたいな名前のフォルダーを作れだぜ」
「 囲碁ソフトを作るついでに説明するんじゃなくて、 サンプル用のレポジトリを立てろだぜ」
「 👆 よく使う XMLタグを書くものぐらいに 考えて 気楽に作れだぜ」
「 👆 ファイルは作られるんだが、これだけでは まだ使えないぜ」
「 👆 App.xaml には、使うもの全部リストされてるぐらいに 考えてくれだぜ。
この <Application.Resources>
というところに さっきの リソース ディクショナリ を書いてやるんだぜ」
「 👆 人間は 人生の中で 物を探している時間が……、数年あるらしいぜ。
どう書けばいいか ネットで探してないで [Ctrl] + [Space]
キーを打鍵しろだぜ。
よく使われるものに ★印 が付いてるから 適当に試せだぜ」
「 [Ctrl] + [Space]
とか [Ctrl] + [.]
とか どんどん出てくるけど 誰が教えてくれるのよ。隠しコマンドは止めてほしいわね」
「 👆 アトリビュートを覚えろだぜ。なんか 上図のところで [Ctrl] + [Space]
を打鍵しろだぜ」
「 そんな わけ分からんところで 分け分からんコマンドを打鍵するのが 想定されているデザイン 止めてほしい」
「 👆 アトリビュートのバリューに キャレットを置いて [Ctrl] + [Space]
を打鍵すると 選択肢が出てくるときもあるが、
今回は出てくれなかったんで ファイルパスを打ち込めだぜ」
「 👆 挟むものないんで、閉じタグを消して 末尾を />
にして ちょい整理」
「 👆 例えば ボタンに アトリビュートを沢山付けて スタイルを設定していくの、 そのうち 嫌になるだろ」
「 👆 じゃあ リソース ディクショナリーに なんか書こうぜ。
ここでも [Ctrl] + [Space]
を使いまくれだぜ」
「 👆 例えば ブラシ を置いとこうぜ。 normalButton
とかいう名前は Yellow
色だぜ」
「 👆 じゃあ ローカル リソース から normalButton
を選べるようになってるぜ」
「 👆 選ぶと こうなるぜ。 XAMLを直接編集しても同じ」
「 👆 確かに 粒度
という考え方があるな。共通部品化するなら なるべく大きな かたまり で共通化しろという教えだぜ」
「 バラッバラの バラバラに細分化したら テストしなければならない対象が 増えますからね」
「 👆 じゃあ いったん スタイルに関するアトリビュートを全部 外そうぜ」
「 👆 XAMLファイルがすっきりしたし、スタイルも適用されてるな」
「 マイクロソフトは XAML をこうやって使ってほしかったんだな」
「 [Ctrl] + [Space]
なんて初見者 知らないから こんな使い方 気づいてないわよ」
<Button Width="300" Height="50" FontSize="20"
Content="3個目のボタン">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Background" Value="SkyBlue"/>
<Setter Property="BorderBrush" Value="Violet"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
「 👆 マウス カーソルが ボタンに重なった時に ボタンの色を青っぽくするのも、 スタイル の仕事だぜ」
「 これも リソース ディクショナリー に突っ込むのが マイクロソフトが こうやって使ってほしかった XAML かだぜ」
「 👆 上の画面上は見えないが マウスオーバーされたときに ボタンが青くなるぜ」
📖 How to create a template for a control (WPF.NET)
「 👆 コントロール テンプレート というのもあるらしいわよ」
「 👆 [Ctrl] + [Space]
キーを打鍵して ControlTemplate
を選んでみようぜ?」
「 👆 Button
も打鍵するのではなく、 [Ctrl] + [Space]
キーを打鍵したり、カーソルキーの ↑ とか ↓ で選ぶようにしろだぜ。
Visual Studio を使っているのなら 候補を使いこなして打鍵量を減らせだぜ」
<ControlTemplate x:Key="circleButton" TargetType="Button">
<Grid>
<!-- サイズいっぱいの大きさの楕円 -->
<Ellipse Fill="YellowGreen" Stroke="Green" />
<!-- Content はこれで設定します -->
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
「 👆 その中で ふつうにタグ打ちしろだぜ。
ここで覚えて置くのは、 Content
アトリビュートの代わりに ContentPresenter
エレメント を使う事だぜ。
ま、上記を見ろだぜ」
「 楕円を描いてるのと、 Content をセンターに寄せてる感じかだぜ?」
「 👆 これで ボタンが 丸くなったぜ。
コードビハインドの デザインの方は すっきりだろ。代わりに リソース ディレクトリが ぎゅうぎゅう だぜ」
「 テンプレートは、元からある Windows のボタンの形も消して 1からスタイルを設定し直すのね」
<ControlTemplate x:Key="colorCircleButton" TargetType="Button">
<Grid>
<!-- サイズいっぱいの大きさの楕円 -->
<Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
<!-- Content はこれで設定します -->
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
「 👆 じゃあ今度は 色の部分を指定せずに、なんか バインドっぽいやつを書いてみようぜ?」
「 👆 すると Windows のデフォルト色に なっちゃってるけど」
<Button Width="300" Height="50" FontSize="20"
Foreground="Azure" Background="MediumAquamarine"
Content="5個目のボタン" Template="{DynamicResource colorCircleButton}">
</Button>
「 👆 ButtonのForeground は EllipseのStrokeへ、 ButtonのBackground は EllipseのFill にバインドされてるから、
コードビハインドの デザインの方で 色を指定できるようになったな」
「 なんか会社の人、 Windows のデフォルトは許すまじ! という勢いで Windowsのルックスを消そうとするわよね」
「 Windows はバージョンアップで ルックス変えてくるから 細かく変更入るしな。
枠線消えて 影突いたり アイコン綺麗な色になって 背景色と合わなくなったり」
<!-- そのウィンドウだけのリソースを定義することができます -->
<Window.Resources>
<!-- きふわらべの髪とインナーシャツの蘭色 -->
<Color x:Key="kifuwarabeOrchid">#b36ee7</Color>
<!-- きふわらべの上着の水色 -->
<Color x:Key="kifuwarabeSkyBlue">#79c4ee</Color>
<!-- 文字などの濃い色を塗るブラシ -->
<SolidColorBrush x:Key="strokeColor" Color="{StaticResource kifuwarabeOrchid}"/>
<!-- コントロールなどの濃い色を塗るブラシ -->
<SolidColorBrush x:Key="controlBackgroundColor" Color="{StaticResource kifuwarabeOrchid}"/>
<!-- Windowの背景などの濃い色を塗るブラシ -->
<SolidColorBrush x:Key="windowBackgroundColor" Color="{StaticResource kifuwarabeSkyBlue}"/>
</Window.Resources>
Crieitは個人で開発中です。
興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!