Xamarin 窗体切换按钮

Question

我有一个 PCL，我正在使用 MVVM 模式。 我正在构建一个切换按钮，它在视图模型中的相关属性被激活时切换，带有行为和触发器。 这是我的行为

 public class ToggleBehavior : Behavior<View>
{
    TapGestureRecognizer tapRecognizer;

    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create<ToggleBehavior, bool>(tb => tb.IsToggled, false);

    public bool IsToggled
    {
        set { SetValue(IsToggledProperty, value); }
        get { return (bool)GetValue(IsToggledProperty); }
    }
}

这就是我的行为方式

                             <Button Text="AUTO" Style="{StaticResource SmallEllipseButton}" BackgroundColor="{StaticResource BackgroundColor}" cm:Message.Attach="Automatic($dataContext)">
                                 <Button.Behaviors>
                                  <local:ToggleBehavior x:Name="autoToggleBehavior" IsToggled="{Binding CurrentMode,Converter={StaticResource modeToBooleanConverter}, ConverterParameter=AUTO}"/>
                                </Button.Behaviors>
                                <Button.Triggers>
                                  <DataTrigger TargetType="Button" Binding="{Binding Source={x:Reference autoToggleBehavior},Path=IsToggled}" Value="False" >
                                    <Setter Property="BackgroundColor" Value="White"/>
                                    <Setter Property="BorderColor" Value="White"/>
                                    <Setter Property="TextColor" Value="Gray"/>
                                  </DataTrigger>
                                  <DataTrigger TargetType="Button" Binding="{Binding Source={x:Reference autoToggleBehavior},Path=IsToggled}" Value="True" >
                                    <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}"/>
                                    <Setter Property="TextColor" Value="White"/>
                                  </DataTrigger>
                                </Button.Triggers>
                             </Button> 

问题是这个IsToggled="{Binding CurrentMode,Converter={StaticResource modeToBooleanConverter}, ConverterParameter=AUTO}"/>中没有正确绑定属性IsToggled 如果我将其静态设置为 true 或 false，它就可以工作。 我认为的问题是我不能动态地绑定这个属性。 我在同一页面中对 IsVisible 属性使用相同的绑定和相同的转换器，它可以工作。 如果我在转换器中设置断点，应用程序不会中断，但 IsVisible 属性会中断。

Answer 1

使用 Button 可能不是最佳选择，因为它已经有一个点击处理程序，并且为它分配一个仍然不会触发事件。我不知道这是否有帮助，但我将控件更改为 Label 以使以下内容正常工作。当然，如果 Button 绑定到修改视图模型的命令，那么您根本不需要在行为中使用点击处理程序。

XAML：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:BehTest" x:Class="BehTest.BehTestPage">

    <Label Text="AUTO" HorizontalOptions="Center" VerticalOptions="Center">
         <Label.Behaviors>
          <local:ToggleBehavior x:Name="autoToggleBehavior" IsToggled="{Binding Toggled, Mode=TwoWay}"/>
        </Label.Behaviors>
        <Label.Triggers>
          <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference autoToggleBehavior},Path=IsToggled}" Value="False" >
            <Setter Property="BackgroundColor" Value="White"/>
            <Setter Property="TextColor" Value="Gray"/>
          </DataTrigger>
          <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference autoToggleBehavior},Path=IsToggled}" Value="True" >
            <Setter Property="BackgroundColor" Value="Blue"/>
            <Setter Property="TextColor" Value="White"/>
          </DataTrigger>
        </Label.Triggers>
     </Label> 
</ContentPage>

行为：

public class ToggleBehavior : Behavior<View>
{
    readonly TapGestureRecognizer tapRecognizer;

    public ToggleBehavior()
    {
        tapRecognizer = new TapGestureRecognizer
        {
            Command = new Command(() => this.IsToggled = !this.IsToggled)
        };
    }

    public static readonly BindableProperty IsToggledProperty = BindableProperty.Create<ToggleBehavior, bool>(tb => tb.IsToggled, false);

    public bool IsToggled
    {
        set { SetValue(IsToggledProperty, value); }
        get { return (bool)GetValue(IsToggledProperty); }
    }

    protected override void OnAttachedTo(View bindable)
    {
        base.OnAttachedTo(bindable);
        bindable.GestureRecognizers.Add(this.tapRecognizer);
    }

    protected override void OnDetachingFrom(View bindable)
    {
        base.OnDetachingFrom(bindable);
        bindable.GestureRecognizers.Remove(this.tapRecognizer);
    }

    protected override void OnAttachedTo(BindableObject bindable)
    {
        base.OnAttachedTo(bindable);
        this.BindingContext = bindable.BindingContext;
        bindable.BindingContextChanged += Bindable_BindingContextChanged;
    }

    protected override void OnDetachingFrom(BindableObject bindable)
    {
        base.OnDetachingFrom(bindable);
        this.BindingContext = null;
        bindable.BindingContextChanged -= Bindable_BindingContextChanged;
    }

    void Bindable_BindingContextChanged(object sender, EventArgs e)
    {
        var bobject = sender as BindableObject;

        this.BindingContext = bobject?.BindingContext;
    }
}

Answer 2

我们在NuGet! 中添加了一个切换按钮 免费使用。

xmlns:aw="clr-namespace:AscendantWare.Xamarin.Essentials.Controls"

<aw:AWToggleButton TextColor="White" ToggleBackgroundColor="DarkGoldenrod" Margin="0" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" CornerRadius="15" IsToggled="{Binding IsNoteEnabled, Mode=TwoWay}" Command="{Binding MyCommand}"/>

更多信息请参见我们的在线文档here!