绑定开关已切换的属性

huangapple go评论151阅读模式
英文:

Binding switch Toggled property

问题

我想知道是否可以绑定开关控件的切换属性,如果可以的话,该如何操作?

<Switch
    Grid.Column="1"
    HorizontalOptions="End"
    VerticalOptions="Center"
    Margin="20,0"
    OnColor="#00CD00"
    ThumbColor="White"
    Toggled="Binding SomeFunction" />

谢谢!

英文:

I would like to know if is possible to bind a Toggled property of switch control, and if so, then how?

&lt;Switch
Grid.Column=&quot;1&quot;
HorizontalOptions=&quot;End&quot; 
VerticalOptions=&quot;Center&quot;
Margin=&quot;20,0&quot;
OnColor=&quot;#00CD00&quot;
ThumbColor=&quot;White&quot;
Toggled=&quot;Binding SomeFunction&quot;/&gt;

Thanks

答案1

得分: 1

你可以使用 Maui CommunityToolkit 的 EventToCommandBehavior

首先,请安装 CommunityToolkit.Maui Nuget 并初始化该包。

在 MauiProgram.cs 中,添加 UseMauiCommunityToolkit()

using CommunityToolkit.Maui;
...
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp&lt;App&gt;()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =&gt;
            ...

然后,在 XAML 中,将 EventToCommandBehavior 添加到 Switch。这允许我们将 Switch 上的 Toggled 事件映射到 ViewModel 中定义的命令(如果使用 MVVM 方法)。

&lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
...
     xmlns:toolkit=&quot;http://schemas.microsoft.com/dotnet/2022/maui/toolkit&quot;&gt;

&lt;Switch
   HorizontalOptions=&quot;End&quot;
   VerticalOptions=&quot;Center&quot;
   Margin=&quot;20,0&quot;
   OnColor=&quot;#00CD00&quot;
   ThumbColor=&quot;White&quot;
   &gt;
   &lt;Switch.Behaviors&gt;
       &lt;toolkit:EventToCommandBehavior
           EventName=&quot;Toggled&quot;
           Command=&quot;{Binding ToggledCommand}&quot; /&gt;
   &lt;/Switch.Behaviors&gt;
&lt;/Switch&gt;

在 .cs 文件中,为 MainPage 设置 BindingContext:

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new MainPageViewModel();
    }
...

在 ViewModel 文件中,定义 ToggledCommand,类似于以下方式:

public class MainPageViewModel
{
    public Command ToggledCommand
    {
        get
        {
            return new Command(() =&gt;
            {
                // 在这里可以添加你的功能
                Console.WriteLine(&quot;123&quot;);
            });
        }
    }
}

当你切换开关时,ViewModel 中的 ToggledCommand 中的代码将被执行。

希望这对你有帮助。

英文:

You could use Maui CommunityToolkit EventToCommandBehavior.

First, please install CommunityToolkit.Maui Nuget and initialize the package.

In MauiProgram.cs, add UseMauiCommunityToolkit() :

using CommunityToolkit.Maui;
...
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
	    var builder = MauiApp.CreateBuilder();
	    builder
		    .UseMauiApp&lt;App&gt;()
		    .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =&gt;
...

Then in xaml, we add the EventToCommandBehavior to Switch. It allows us to map Toggled event on Switch to a Command defined in viewModel (if use MVVM way).

&lt;ContentPage xmlns=&quot;http://schemas.microsoft.com/dotnet/2021/maui&quot;
...
     xmlns:toolkit=&quot;http://schemas.microsoft.com/dotnet/2022/maui/toolkit&quot;&gt;


&lt;Switch             
   HorizontalOptions=&quot;End&quot; 
   VerticalOptions=&quot;Center&quot;
   Margin=&quot;20,0&quot;
   OnColor=&quot;#00CD00&quot;
   ThumbColor=&quot;White&quot;
   &gt;
   &lt;Switch.Behaviors&gt;
       &lt;toolkit:EventToCommandBehavior
           EventName=&quot;Toggled&quot;
           Command=&quot;{Binding ToggledCommand}&quot; /&gt;
   &lt;/Switch.Behaviors&gt;

</Switch>

In cs file, set the BindingContext for MainPage:

public partial class MainPage : ContentPage
{

    public MainPage()
    {
	    InitializeComponent();
	    this.BindingContext = new MainPageViewModel();
    }
...

In viewModel file, define the ToggledCommand, such like this:

public class MainPageViewModel
{
	public Command ToggledCommand
    {
		get
		{
			return new Command(() =&gt;
			{
                //you could add your function here					
                Console.WriteLine(&quot;123&quot;);
			});
		}
	}

When you toggle the switch, the code in ToggledCommand in ViewModel will execute.

Hope it works.

huangapple
  • 本文由 发表于 2023年4月10日 18:59:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/75976491.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定