C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

[MAUI]Switchコントロールについて

[トピック内 6 記事 (1 - 6 表示)]  << 0 >>

■103366 / inTopicNo.1)  [MAUI]Switchコントロールについて
  
□投稿者/ よもやま(よもぎ工房) (4回)-(2024/10/16(Wed) 12:21:30)

分類:[.NET 全般] 

2024/10/16(Wed) 13:19:41 編集(投稿者)
2024/10/16(Wed) 12:24:43 編集(投稿者)

<pre><pre>視覚効果を試す前に、表示確認として
                    <Frame>
                        <VerticalStackLayout>
                            <Border>
                                <HorizontalStackLayout>
                                    <Label Text="Switch1" VerticalOptions="Center" />
                                    <Switch  OnColor="Green" ThumbColor="Cyan" IsToggled="False" />
                                </HorizontalStackLayout>
                            </Border>
                            <Border>
                                <HorizontalStackLayout>
                                    <Label Text="Switch2" VerticalOptions="Center" />
                                    <Switch OnColor="Green" ThumbColor="Red"  IsToggled="False"  />
                                </HorizontalStackLayout>
                            </Border>
                        </VerticalStackLayout>
                    </Frame>
と定義しました。
デバッグ実行、デバッグなし実行した際
Swichコントロールの右横に"Off" "on"といった表記があり。
コントロールを操作するとOnColor="Green" ThumbColor="Red"部分が無効化され、定義の状態に二度ともどりません。
症状を回避する方法などご存じの方、おられましたらご教示いただければ幸いです。

<<解決したい事項>>
1)Switchコントロールの右横に"Off" "on"といった表記をなくしたい。
2)Switchコントロールを操作してもOnColor="Green" ThumbColor="Red"部分が無効化されないようにしたい。


環境
Windows 11 Pro 24h2
Visual Studio 2022 Community 17.11
ターゲット.NETランタイム:.net8.0

追記)デバッグおよびデバッグなし実行はWindows Machineのみです。
追記2)動作時のスクショ(該当箇所のみ)
https://photos.app.goo.gl/BMJFG6uGb9xSB1hi8
</pre></pre>

引用返信 編集キー/
■103398 / inTopicNo.2)  Re[1]: [MAUI]Switchコントロールについて
□投稿者/ よもやま(よもぎ工房) (5回)-(2024/10/17(Thu) 17:31:41)
UWP、WINUIにあるトグルスイッチと似た動作することはわかりました。
ドキュメントには、触れられていませんでしたが・・
https://learn.microsoft.com/ja-jp/windows/apps/design/controls/toggles
ただ、ON操作以降、OnColor="Green" ThumbColor="Red"部分が無効になる原因は今のところ不明です。。

引用返信 編集キー/
■103399 / inTopicNo.3)  Re[2]: [MAUI]Switchコントロールについて
□投稿者/ よもやま(よもぎ工房) (6回)-(2024/10/17(Thu) 21:01:05)
No103398 (よもやま(よもぎ工房) さん) に返信
> UWP、WINUIにあるトグルスイッチと似た動作することはわかりました。
> ドキュメントには、触れられていませんでしたが・・
> https://learn.microsoft.com/ja-jp/windows/apps/design/controls/toggles
> ただ、ON操作以降、OnColor="Green" ThumbColor="Red"部分が無効になる原因は今のところ不明です。。
>
VisualStateManagerに関連して参考となる記事がございました。
”表示状態を切り替える”
https://learn.microsoft.com/ja-jp/dotnet/maui/user-interface/controls/switch?view=net-maui-8.0#switch-visual-states
これらの情報と
https://github.com/dotnet/maui/blob/cf42c193957a530af1a0551284c40e72e55780f9/src/Controls/src/Core/Switch/Switch.cs
をもとに、もう少し試行錯誤してみようと思います。

解決済み
引用返信 編集キー/
■103401 / inTopicNo.4)  Re[3]: [MAUI]Switchコントロールについて
□投稿者/ よもやま(よもぎ工房) (7回)-(2024/10/17(Thu) 22:27:03)
On/Off表示に関して
議論されている(されていた)場所について記載しておきます。
https://github.com/dotnet/maui/issues/6177

[@vishaljadhav09
vishaljadhav09
on Feb 13, 2023]の投稿記事ではAbsoluteLayoutを用いた技法が投稿されておられました。

〜〜
ご参考までに。

引用返信 編集キー/
■103402 / inTopicNo.5)  Re[1]: [MAUI]Switchコントロールについて
□投稿者/ よもやま(よもぎ工房) (8回)-(2024/10/17(Thu) 22:36:34)
2024/10/17(Thu) 22:37:16 編集(投稿者)
No103366 (よもやま(よもぎ工房) さん) に返信
> 2024/10/16(Wed) 13:19:41 編集(投稿者)
> 2)Switchコントロールを操作してもOnColor="Green" ThumbColor="Red"部分が無効化されないようにしたい。
VisualStateを用いた試験的定義を参考までに記載しておきます。 試験の都合上、ThumbColorやOnColor部分が明示的かつ固定的になっております。
        <Style TargetType="Switch" x:Key="testSwitchStyle">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <Setter.Value>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="On">
                                <VisualState.Setters>
                                    <Setter Property="ThumbColor" Value="Orange" />
                                    <Setter Property="OnColor" Value="Green" />
                                    
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Off">
                                <VisualState.Setters>
                                    <Setter Property="ThumbColor"  Value="Orange" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter.Value>
            </Setter>
        </Style>


解決済み
引用返信 編集キー/
■103404 / inTopicNo.6)  Re[2]: [MAUI]Switchコントロールについて
□投稿者/ よもやま(よもぎ工房) (9回)-(2024/10/18(Fri) 16:56:41)
No103402 (よもやま(よもぎ工房) さん) に返信
MAUIアプリ新規作成時、Resources/Stylesに"Styles.xaml"があり、
Switchコントロールを対象にしたスタイル設定が定義されています。
    <Style TargetType="Switch">
        <Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
        <Setter Property="ThumbColor" Value="{StaticResource White}" />
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                            <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="On">
                        <VisualState.Setters>
                            <Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Gray200}}" />
                            <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Off">
                        <VisualState.Setters>
                            <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray500}}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
〜〜〜
(個人的ぼやき)デフォルトの挙動や色設定としての定義なのはわからなくはないですが。"Styles.xaml"ファイルなんぞ記憶のすみっこにおいやってしまっていた。。


解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ