Zenn
💬

MAUIがリリースされる前にAvaloniaUIのStylingを試す

2022/03/04に公開
.NET
C#
WPF
Avalonia UI
tech

はじめに

AvaloniaUIのドキュメントをさらっと通しで読んでみた

Stylingの章がとくにいい感じだったので
XAMLの書き方の違いについて、ふつうのWPF文法とAvaloniaをつかった場合とを比較する

AvaloniaのStyling

The Avalonia styling system can be thought of as a mix of CSS styling and WPF/UWP styling.

Avaloniaはウェブサイトをつくるときに用いるCSS風[1]のスタイリングを採用している、とのこと

<Window.Styles>
　　　<Style Selector="TextBlock.h1">
        <Setter Property="FontSize" Value="24"/>
    </Style>
    <Style Selector="TextBlock.h2">
        <Setter Property="FontSize" Value="16"/>
    </Style>
    <Style Selector="TextBlock.blue">
        <Setter Property="Foreground" Value="Blue"/>
    </Style>
</Window.Styles>

<StackPanel>
    <TextBlock Classes="h1">this is h1</TextBlock>
    <TextBlock Classes="h2">this is h2</TextBlock>
    <TextBlock Classes="h2 blue">this is h2 and blue</TextBlock>
</StackPanel>

3つのテキストボックスについて、サイズと色を組み合わせて表示させた

肝となるのは3番目のテキストボックス。
Classes="h2 blue"と書くことでh2とblueのスタイリングが同時に適用されている

avalonia-style

次にこれをふつうのWPFでやるとどうなるか？

同じことをふつうのWPFでやる

同じことをふつうのWPFでやろうとするとbased onをつかうしかない（たぶん）

先の例と同様にh2とblueのスタイリングを同時に適用するためには
h2のスタイルを先につくって、そのh2スタイルをベースとしてblueのスタイルを追加する必要がある

<Window.Resources>
    <Style x:Key="h1" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="24" />
    </Style>
    <Style x:Key="h2" TargetType="{x:Type TextBlock}">
        <Setter Property="FontSize" Value="16" />
    </Style>
    <Style
        x:Key="h2-blue"
        BasedOn="{StaticResource h2}"
        TargetType="{x:Type TextBlock}">
        <Setter Property="Foreground" Value="Blue" />
    </Style>
</Window.Resources>

<StackPanel>
    <TextBlock Style="{StaticResource h1}">this is h1</TextBlock>
    <TextBlock Style="{StaticResource h2}">this is h2</TextBlock>
    <TextBlock Style="{StaticResource h2-blue}">this is h2 and blue</TextBlock>
</StackPanel>

簡単なサンプルであるが、この先の変更に対してどちらが対応しやすいかは想像に難くない

まとめ

Avaloniaはスタイルを組み合わせてつかえるので拡張性が高い

「ここのh1見出しは青色にしたい」など細かくスタイルを指定したいときなど
AvaloniaであればClasses="h1 blue"とすることで実現できる

（一方でふつうのWPFでは、based onでさらにスタイルが派生してく・・・）

フォントの色を局所的に変えるくらいならその場で対応は可能であるけど
修正漏れを未然に防ぐ意味でも、その場しのぎの変更は少なくしたい

アプリケーションの規模が大きくなるほど、スタイルを管理する手間の面において
ふつうのWPFより優位性が高くなるとおもう

おわり

脚注

  1. https://www.tohoho-web.com/css/basic.htm ↩︎

Discussion