【MAUI】スタイルを統一して設定する(詳細記事)

matsrikagraphic.hatenablog.com

上の記事が読まれてるようなので詳細記事を書こうと思います。

自分用にも備忘録として

スタイルの設定を統一する方法①

新規作成したら初めからある「Styles」というフォルダを開くと、二つのcsファイルがあると思います。ここにある既存のcsファイルを編集するのが一つ目の方法です。

Colorsは、各色に名前をつけて同じ色を呼び出すために設定したものです。

テンプレの紫色も、ここで設定されています。

<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Color x:Key="Primary">#512BD4</Color><!--←これがあの紫色-->
    <Color x:Key="Secondary">#DFD8F7</Color>
    <Color x:Key="Tertiary">#2B0B98</Color>
    <Color x:Key="White">White</Color>
    <Color x:Key="Black">Black</Color>

なので、ここの"Primary"の色#512BD4を好きな色に変えると、紫の色を別の色に変えられます。

Stylesは、形状や色の設定をまとめる色です。

たとえばこの中には<Button>に対するスタイル設定もあります。

<Style TargetType="Button">
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Primary}}" />
        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
        <Setter Property="FontFamily" Value="OpenSansRegular"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="CornerRadius" Value="8"/>
        <Setter Property="Padding" Value="14,10"/>
        <Setter Property="MinimumHeightRequest" Value="44"/>
        <Setter Property="MinimumWidthRequest" Value="44"/>
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
                            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

よく見ると、BackgroundColorの設定があると思います。

        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />

ここに、アプリテーマがライトカラーの場合は、{StaticResource Primary}に色を指定すると記述しているため、ボタンの色があの紫色になります。

スタイルの設定を統一する方法②

二つ目の方法は、各ページの上部に<Style>タグを記述する方法です。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MCATSystem0515.MVVM.Views.StyleChange"
             Title="StyleChange">

    <!--Styleの設定をここに記述します。-->
    <ContentPage.Resources>
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="Black"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="WidthRequest" Value="150"/>
        </Style>
    </ContentPage.Resources>


    <!--実際のコンテンツ-->
    <VerticalStackLayout VerticalOptions="Center">
        <Button Text="Add"/>

    </VerticalStackLayout>
</ContentPage>

これを再生してみると、以下のような見た目になります。

<Button>には、Textの設定しかしていませんが、ページ上部に設定しているStyleが自動で呼び出されます。

<Button>を数パターンで見た目を変えたい場合は、x:Keyを使います。

<!--Styleの設定をここに記述します。-->
    <ContentPage.Resources>
        <Style TargetType="Button" x:Key="Black">
            <Setter Property="BackgroundColor" Value="Black"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="WidthRequest" Value="150"/>
            <Setter Property="Margin" Value="0,2"/>
        </Style>
        <Style TargetType="Button" x:Key="White">
            <Setter Property="BackgroundColor" Value="White"/>
            <Setter Property="BorderColor" Value="Black"/>
            <Setter Property="BorderWidth" Value="1"/>
            <Setter Property="TextColor" Value="Black"/>
            <Setter Property="CornerRadius" Value="0"/>
            <Setter Property="WidthRequest" Value="150"/>
            <Setter Property="Margin" Value="0,2"/>
        </Style>

    </ContentPage.Resources>


    <!--実際のコンテンツ-->
    <VerticalStackLayout VerticalOptions="Center">
        <Button Text="Add" Style="{StaticResource Black}"/>
        <Button Text="Delete" Style="{StaticResource Black}"/>
        <Button Text="Add" Style="{StaticResource White}"/>
        <Button Text="Delete" Style="{StaticResource White}"/>


    </VerticalStackLayout>
</ContentPage>

これを再生すると以下のようになります。

個別に色々と設定をしたコンテンツが増えていくとコードが見にくくなりますが、上部にまとめればスッキリします。

二行に跨がずに済むのがすごく良い。

また、一部だけスタイルを変更したい場合は、個別設定が優先されるので、変えたいタグに直接記述すれば良いです。

<Button Text="Add" Style="{StaticResource White}"
                TextColor="Red"/>

こんな感じ

Styleは、LabelやButtonだけでなく、Layoutなどにも設定可能なので、位置構成をまとめて設定したいときも便利です。動的な部分(Entryの入力中の背景色とか)も全てではないですが設定できます。

もっというと、既存のStyles.csと同じようにオリジナルのcsを新規に作成して、そこに全てのスタイルをまとめて記述することもできます。それはまた後日記事にしようと思います。（ただしmacだけなのか、うまく新規に作った.csを見つけてくれないときがあるので注意）