WildTree Wiki

ユーザ用ツール

サイト用ツール

トレース:
ハイハイスクールアドベンチャー_avaloniaui版

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
ハイハイスクールアドベンチャー_avaloniaui版 [2025/10/16 22:39] – [色味違わない？] arakiハイハイスクールアドベンチャー_avaloniaui版 [2025/10/16 23:02] (現在) – [カスタムスタイルにテーマは適用できない？] araki
行 145: 行 145:
  
 ==== カスタムスタイルにテーマは適用できない？ ==== ==== カスタムスタイルにテーマは適用できない？ ====
 +
 +設定ダイアログで、チェックボックスはスライドスイッチに、ラジオボタンは押しボタン風にしたいわけです。
 +環境によってはそもそもサポートされていたり、カスタムコードを書いたり、あるいはスタイルを書き換えるだけで実現できたりと様々ですが、AvaloniaUIではカスタムスタイルを作って適用するだけで外観を変更することができます。
 +
 +色はテーマに追随してほしいので、AIにそのように頼むと「簡単です」とかいいながら、FluentTheme と同じになります、とかいってカスタムスタイルに色設定を埋め込んでいくのですがこれが全くと言っていいほど効かない。
 +
 +即値を指定すれば反映されるから、テーマカラーをうまく拾えないのが原因なのは明らかなので、自前でブラシを定義して、テーマによって同じ名前に違う色を割り当ててくれればそれでいいよっていっているのに、AIが頑固にテーマカラーを適用する方法を模索し続けるものだからもう大変。
 +
 +最終的にAIが折れて、自前のブラシをテーマごとに用意する方向で実装となりました。
 +
 +{{::hhsadvava:preferences_ng.png?400|}}{{::hhsadvava:preferences_ok.png?400|}}
 +
 +テーマカラーを使おうとすると上のようになり、自前のブラシを使うようにしてようやく下のようにすることができました。
 +
 +<code xml>
 +        <Style Selector=":is(Control):light">
 +            <Style.Resources>
 +                <SolidColorBrush x:Key="PushButton.Background.Normal" Color="#EBEBEB"/>
 +                <SolidColorBrush x:Key="PushButton.Border.Normal" Color="#DADADA"/>
 +                <SolidColorBrush x:Key="PushButton.Foreground.Normal" Color="#7F7F7F"/>
 +                <SolidColorBrush x:Key="PushButton.Background.Checked" Color="#0078D4"/>
 +                <SolidColorBrush x:Key="PushButton.Foreground.Checked" Color="White"/>
 +                <SolidColorBrush x:Key="PushButton.Background.PointerOver" Color="#F4F4F4"/>
 +            </Style.Resources>
 +        </Style>
 +
 +        <Style Selector=":is(Control):dark">
 +            <Style.Resources>
 +                <SolidColorBrush x:Key="PushButton.Background.Normal" Color="#2D2D2D"/>
 +                <SolidColorBrush x:Key="PushButton.Border.Normal" Color="#4D4D4D"/>
 +                <SolidColorBrush x:Key="PushButton.Foreground.Normal" Color="White"/>
 +                <SolidColorBrush x:Key="PushButton.Background.Checked" Color="#0078D4"/>
 +                <SolidColorBrush x:Key="PushButton.Foreground.Checked" Color="White"/>
 +                <SolidColorBrush x:Key="PushButton.Background.PointerOver" Color="#383838"/>
 +            </Style.Resources>
 +        </Style>
 +</code>
 +
 +これでlight用、dark用の色を分けられるので、このブラシを使ってカスタムスタイルを作ればうまくいきます。
 +
 +<file xml CustomStyles.axaml>
 +<Styles xmlns="https://github.com/avaloniaui"
 +        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 +
 +    <!-- スイッチスタイル -->
 +    <Style Selector="ToggleButton.ToggleSwitch">
 +      <Setter Property="Template">
 +        <ControlTemplate>
 +          <Border Width="50" Height="25" CornerRadius="12.5"
 +                  Background="{TemplateBinding Background}">
 +            <Grid>
 +              <!-- サム -->
 +              <Border x:Name="PART_Knob"
 +                      Width="21" Height="21"
 +                      CornerRadius="10.5"
 +                      Background="White"
 +                      HorizontalAlignment="Left"
 +                      Margin="2"/>
 +            </Grid>
 +          </Border>
 +        </ControlTemplate>
 +      </Setter>
 +      <Setter Property="Background" Value="LightGray"/>
 +    </Style>
 +
 +    <!-- チェック時の見た目 -->
 +    <Style Selector="ToggleButton.ToggleSwitch:checked">
 +      <Setter Property="Background" Value="MediumSeaGreen"/>
 +    </Style>
 +    <Style Selector="ToggleButton.ToggleSwitch:checked /template/ Border#PART_Knob">
 +      <Setter Property="HorizontalAlignment" Value="Right"/>
 +    </Style>
 +
 +
 +    <!-- 押しボタン風 RadioButton -->
 +    <Style Selector="RadioButton.PushButtonStyle">
 +        <Setter Property="Template">
 +            <ControlTemplate>
 +                <Border x:Name="PART_Border"
 +                        Padding="8"
 +                        Background="{TemplateBinding Background}"
 +                        BorderBrush="{TemplateBinding BorderBrush}"
 +                        BorderThickness="1"
 +                        CornerRadius="4">
 +                    <ContentPresenter Content="{TemplateBinding Content}"
 +                                      ContentTemplate="{TemplateBinding ContentTemplate}"
 +                                      Foreground="{TemplateBinding Foreground}" 
 +                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 +                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 +                                      RecognizesAccessKey="True"/>
 +                </Border>
 +            </ControlTemplate>
 +    </Setter>
 +
 +    <Setter Property="Foreground" Value="{StaticResource PushButton.Foreground.Normal}"/>
 +        <Setter Property="Background" Value="{StaticResource PushButton.Background.Normal}"/>
 +        <Setter Property="BorderBrush" Value="{StaticResource PushButton.Border.Normal}"/>
 +    </Style>
 +
 +    <Style Selector="RadioButton.PushButtonStyle:pointerover">
 +        <Setter Property="Background" Value="{StaticResource PushButton.Background.PointerOver}"/>
 +        <Setter Property="BorderBrush" Value="{StaticResource PushButton.Border.Normal}"/>
 +    </Style>
 +
 +    <Style Selector="RadioButton.PushButtonStyle:pressed">
 +        <Setter Property="Background" Value="{StaticResource PushButton.Background.PointerOver}"/>
 +    </Style>
 +
 +    <Style Selector="RadioButton.PushButtonStyle:checked">
 +        <Setter Property="Background" Value="{StaticResource PushButton.Background.Checked}"/>
 +        <Setter Property="BorderBrush" Value="{StaticResource PushButton.Background.Checked}"/>
 +        <Setter Property="Foreground" Value="{StaticResource PushButton.Foreground.Checked}"/>
 +    </Style>
 +
 +    <Style Selector="RadioButton.PushButtonStyle:checked:pointerover">
 +        <Setter Property="Background" Value="{StaticResource PushButton.Background.Checked}"/>
 +        <Setter Property="BorderBrush" Value="{StaticResource PushButton.Background.Checked}"/>
 +    </Style>
 +
 +    <Style Selector="RadioButton.PushButtonStyle:disabled">
 +        <Setter Property="Background" Value="{DynamicResource ThemeControlLowBrush}"/>
 +        <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderLowBrush}"/>
 +        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundDisabledBrush}"/>
 +    </Style>
 +</Styles>
 +</file>
  
 ===== AvaloniaUIの良いところ ===== ===== AvaloniaUIの良いところ =====
ハイハイスクールアドベンチャー_avaloniaui版.1760654364.txt.gz · 最終更新: by araki