WildTree Wiki

ユーザ用ツール

サイト用ツール

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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
ハイハイスクールアドベンチャー_avaloniaui版 [2025/10/16 05:57] – [UIスレッド] arakiハイハイスクールアドベンチャー_avaloniaui版 [2025/10/16 23:02] (現在) – [カスタムスタイルにテーマは適用できない？] araki
行 27: 行 27:
 しかし、これがそんなに甘くはないんだということに気づくのに、それほど時間は必要ではありませんでした。 しかし、これがそんなに甘くはないんだということに気づくのに、それほど時間は必要ではありませんでした。
  
-なお、2025年10月14日現在、まだ完成に至っていません。 +<del>なお、2025年10月14日現在、まだ完成に至っていません。 
-ゲームはできるんですが、設定画面が全く動かなくて……。+ゲームはできるんですが、設定画面が全く動かなくて……。</del>
  
 +{{::hhsadvava:hhsadvavalonia.png?400|}}
 ===== AvaloniaUI版への困難な道 ===== ===== AvaloniaUI版への困難な道 =====
  
行 54: 行 55:
 似たような話は Androidでもあったので、まあ、それはそれなんですが、処理の受け渡しなどの作法が、AIに聞きながらやっていると、それじゃないというコードが出てきたりして、ちょっと手間がかかりました。 似たような話は Androidでもあったので、まあ、それはそれなんですが、処理の受け渡しなどの作法が、AIに聞きながらやっていると、それじゃないというコードが出てきたりして、ちょっと手間がかかりました。
  
-<code cs>+<code c#>
         public async Task UpdateScreenAndAwaitRenderAsync()         public async Task UpdateScreenAndAwaitRenderAsync()
         {         {
行 80: 行 81:
             await tcs.Task;             await tcs.Task;
         }         }
 +</code>
 +
 +画面の書き換えが終わったら上をawait指定で呼び出す。
 +
 +<code c#>
 +await UpdateScreenAndAwaitRenderAsync();
 </code> </code>
 ==== モーダルダイアログ ==== ==== モーダルダイアログ ====
行 137: 行 144:
 ほかのプラットフォームでも下と似た色味になるので、AvaloniaUIの一部の色の処理が少し違っているのかなあと思っています。 ほかのプラットフォームでも下と似た色味になるので、AvaloniaUIの一部の色の処理が少し違っているのかなあと思っています。
  
 +==== カスタムスタイルにテーマは適用できない？ ====
 +
 +設定ダイアログで、チェックボックスはスライドスイッチに、ラジオボタンは押しボタン風にしたいわけです。
 +環境によってはそもそもサポートされていたり、カスタムコードを書いたり、あるいはスタイルを書き換えるだけで実現できたりと様々ですが、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版.1760594234.txt.gz · 最終更新: by araki