WPFのリソース ディクショナリって何だぜ(^~^)?

ずっぽーん(^~^) のっほー(^◇^) 公開下書き

WPFのリソース ディクショナリって何だぜ(^~^)?

前の話し

📖 WPFって何だぜ(^~^)?

気の早い人向け

📖 wpf-resource-dictionary-practice Git hub に上げたもの
📖 wpf-window-resources-practice

今回の話し

ramen-tabero-futsu2.png
「 リソース ディレクトリの話ししてないよな」

kifuwarabe-futsu.png
「 XML文書 使ってる利点を生かして、 一度書いた XML を何か所でも再利用する仕組みだぜ。
それはまるで クリック イベントを再利用しているようにも見えるし、スタイルを再利用しているようにも見えるぜ」

ohkina-hiyoko-futsu2.png
「 説明長くなるんで、手を動かしましょう」

20210915wpf40a1.png

ramen-tabero-futsu2.png
「 👆 じゃあ適当に Resources みたいな名前のフォルダーを作れだぜ」

kifuwarabe-futsu.png
「 囲碁ソフトを作るついでに説明するんじゃなくて、 サンプル用のレポジトリを立てろだぜ」

20210915wpf41a1.png

ramen-tabero-futsu2.png
「 👆 仕切り直しで」

20210915wpf42a1.png

ramen-tabero-futsu2.png
「 👆 リソース ディクショナリを追加しろだぜ」

20210915wpf44a1.png

ramen-tabero-futsu2.png
「 👆 よく使う XMLタグを書くものぐらいに 考えて 気楽に作れだぜ」

20210915wpf45a1.png

ramen-tabero-futsu2.png
「 👆 ファイルは作られるんだが、これだけでは まだ使えないぜ」

20210915wpf46a1.png

ramen-tabero-futsu2.png
「 👆 App.xaml には、使うもの全部リストされてるぐらいに 考えてくれだぜ。
この <Application.Resources> というところに さっきの リソース ディクショナリ を書いてやるんだぜ」

20210915wpf47a1.png

ramen-tabero-futsu2.png
「 👆 人間は 人生の中で 物を探している時間が……、数年あるらしいぜ。
どう書けばいいか ネットで探してないで [Ctrl] + [Space] キーを打鍵しろだぜ。
よく使われるものに ★印 が付いてるから 適当に試せだぜ」

ohkina-hiyoko-futsu2.png
「 [Ctrl] + [Space] とか [Ctrl] + [.] とか どんどん出てくるけど 誰が教えてくれるのよ。隠しコマンドは止めてほしいわね」

20210915wpf48a1.png

ramen-tabero-futsu2.png
「 👆 アトリビュートを覚えろだぜ。なんか 上図のところで [Ctrl] + [Space] を打鍵しろだぜ」

kifuwarabe-futsu.png
「 そんな わけ分からんところで 分け分からんコマンドを打鍵するのが 想定されているデザイン 止めてほしい」

20210915wpf49a1.png

ramen-tabero-futsu2.png
「 👆 アトリビュートのバリューに キャレットを置いて [Ctrl] + [Space] を打鍵すると 選択肢が出てくるときもあるが、
今回は出てくれなかったんで ファイルパスを打ち込めだぜ」

20210915wpf50a1.png

ramen-tabero-futsu2.png
「 👆 挟むものないんで、閉じタグを消して 末尾を /> にして ちょい整理」

20210915wpf51a1.png

ramen-tabero-futsu2.png
「 👆 例えば ボタンに アトリビュートを沢山付けて スタイルを設定していくの、 そのうち 嫌になるだろ」

kifuwarabe-futsu.png
「 ボタン、どの画面にも いっぱいあるしな」

20210915wpf52a1.png

ramen-tabero-futsu2.png
「 👆 じゃあ リソース ディクショナリーに なんか書こうぜ。
ここでも [Ctrl] + [Space] を使いまくれだぜ」

20210915wpf53a1.png

ramen-tabero-futsu2.png
「 👆 例えば ブラシ を置いとこうぜ。 normalButton とかいう名前は Yellow 色だぜ」

20210915wpf54a1.png

ramen-tabero-futsu2.png
「 👆 じゃあ ローカル リソース から normalButton を選べるようになってるぜ」

20210915wpf55a1.png

ramen-tabero-futsu2.png
「 👆 選ぶと こうなるぜ。 XAMLを直接編集しても同じ」

kifuwarabe-futsu.png
「 文字数 逆に増えてるぜ」

20210915wpf56a1.png

ramen-tabero-futsu2.png
「 👆 確かに 粒度 という考え方があるな。共通部品化するなら なるべく大きな かたまり で共通化しろという教えだぜ」

ohkina-hiyoko-futsu2.png
「 バラッバラの バラバラに細分化したら テストしなければならない対象が 増えますからね」

20210915wpf57a1.png

ramen-tabero-futsu2.png
「 👆 じゃあ いったん スタイルに関するアトリビュートを全部 外そうぜ」

20210915wpf58a1.png

ramen-tabero-futsu2.png
「 👆 さっきのスタイルを選ぶぜ」

20210915wpf59a1.png

ramen-tabero-futsu2.png
「 👆 XAMLファイルがすっきりしたし、スタイルも適用されてるな」

kifuwarabe-futsu.png
「 マイクロソフトは XAML をこうやって使ってほしかったんだな」

ohkina-hiyoko-futsu2.png
「 [Ctrl] + [Space] なんて初見者 知らないから こんな使い方 気づいてないわよ」

マウスカーソルがボタンの上に来た時のスタイルとか

20210915wpf60a1.png

        <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>

ramen-tabero-futsu2.png
「 👆 マウス カーソルが ボタンに重なった時に ボタンの色を青っぽくするのも、 スタイル の仕事だぜ」

ohkina-hiyoko-futsu2.png
「 うわっ、長」

kifuwarabe-futsu.png
「 これも リソース ディクショナリー に突っ込むのが マイクロソフトが こうやって使ってほしかった XAML かだぜ」

20210915wpf61a1.png

ramen-tabero-futsu2.png
「 👆 トリガーもこんな感じで リソースに登録だぜ」

20210915wpf62a1.png

ramen-tabero-futsu2.png
「 👆 上の画面上は見えないが マウスオーバーされたときに ボタンが青くなるぜ」

コントロール テンプレート

📖 How to create a template for a control (WPF.NET)

ohkina-hiyoko-futsu2.png
「 👆 コントロール テンプレート というのもあるらしいわよ」

ramen-tabero-futsu2.png
「 何なんだろな?」

20210916wpf63a1.png

ramen-tabero-futsu2.png
「 👆 [Ctrl] + [Space] キーを打鍵して ControlTemplate を選んでみようぜ?」

20210916wpf64a1.png

ramen-tabero-futsu2.png
「 👆 Button も打鍵するのではなく、 [Ctrl] + [Space] キーを打鍵したり、カーソルキーの ↑ とか ↓ で選ぶようにしろだぜ。
Visual Studio を使っているのなら 候補を使いこなして打鍵量を減らせだぜ」

20210916wpf65a1.png

    <ControlTemplate x:Key="circleButton" TargetType="Button">
        <Grid>
            <!-- サイズいっぱいの大きさの楕円 -->
            <Ellipse Fill="YellowGreen" Stroke="Green" />

            <!-- Content はこれで設定します -->
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </ControlTemplate>

ramen-tabero-futsu2.png
「 👆 その中で ふつうにタグ打ちしろだぜ。
ここで覚えて置くのは、 Content アトリビュートの代わりに ContentPresenter エレメント を使う事だぜ。
ま、上記を見ろだぜ」

kifuwarabe-futsu.png
「 楕円を描いてるのと、 Content をセンターに寄せてる感じかだぜ?」

20210916wpf66a1.png

ramen-tabero-futsu2.png
「 👆 これで ボタンが 丸くなったぜ。
コードビハインドの デザインの方は すっきりだろ。代わりに リソース ディレクトリが ぎゅうぎゅう だぜ」

ohkina-hiyoko-futsu2.png
「 テンプレートは、元からある Windows のボタンの形も消して 1からスタイルを設定し直すのね」

20210916wpf67a1.png

    <ControlTemplate x:Key="colorCircleButton" TargetType="Button">
        <Grid>
            <!-- サイズいっぱいの大きさの楕円 -->
            <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />

            <!-- Content はこれで設定します -->
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </ControlTemplate>

ramen-tabero-futsu2.png
「 👆 じゃあ今度は 色の部分を指定せずに、なんか バインドっぽいやつを書いてみようぜ?」

20210916wpf68a1.png

ramen-tabero-futsu2.png
「 👆 すると Windows のデフォルト色に なっちゃってるけど」

20210916wpf69a1.png

        <Button Width="300" Height="50" FontSize="20"
                Foreground="Azure" Background="MediumAquamarine"
                Content="5個目のボタン" Template="{DynamicResource colorCircleButton}">
        </Button>

ramen-tabero-futsu2.png
「 👆 ButtonのForeground は EllipseのStrokeへ、 ButtonのBackground は EllipseのFill にバインドされてるから、
コードビハインドの デザインの方で 色を指定できるようになったな」

ohkina-hiyoko-futsu2.png
「 なんか会社の人、 Windows のデフォルトは許すまじ! という勢いで Windowsのルックスを消そうとするわよね」

kifuwarabe-futsu.png
「 Windows はバージョンアップで ルックス変えてくるから 細かく変更入るしな。
枠線消えて 影突いたり アイコン綺麗な色になって 背景色と合わなくなったり」

そのウィンドウだけ使うリソースの定義

20210917wpf84a1.png

    <!-- そのウィンドウだけのリソースを定義することができます -->
    <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>

ramen-tabero-futsu2.png
「 👆 そのウィンドウでだけ使うリソースを定義する方法は上記の通りだぜ」

何度でもクリック!→

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位 の最近の記事