带有转换器的 Xamarin Forms 项目分类答案

【问题标题】：Xamarin Forms item classification with converter带有转换器的 Xamarin Forms 项目分类
【发布时间】：2016-07-25 07:38:34
【问题描述】：

我需要对我的 PCL 应用程序中的项目列表进行分类。分类必须介于值 0 和 3 之间。我需要 3 个切换按钮，一个用于分类的每个值。所以如果item分类的值为2，前两个togglebutton的isToggled属性必须为true，第三个为false。如果项目分类的值为 3，则三个 togglebutton 的 isToggled 属性都必须为 true。反之亦然，如果我将第二个切换按钮的 isToggled 属性切换为 true，我希望分类值必须为 2，并且切换按钮的其余部分根据此值更新。问题是，例如当我切换到 true 第三个按钮时。所选插槽正确更改为 T3，因此其他按钮必须刷新其 isToggledProperty。例如，第一个切换按钮必须将 IsToggled 属性更改为 true。会发生这种情况，但是第一个切换按钮的 isToggledProperty 的更改会再次导致所选插槽的更改，从而再次将切换按钮按钮的 Istoggled 属性更改为 false。

这是我的切换按钮，代表分类的 3 值。

    var t3 = new BoxView
    {
        Color = Color.FromHex("#00d2ff")
    };
    var t3ToggleBehavior = new ToggleBoxBehavior();
    t3ToggleBehavior.SetBinding(ToggleBoxBehavior.IsToggledProperty, new Binding("SelectedSlot", BindingMode.TwoWay, new SelectedSlotToBooleanConverter(), converterParameter: "T3"));
    t3.Behaviors.Add(t3ToggleBehavior);
    var t3trigger = new DataTrigger(typeof(BoxView))
    {
        Binding = new Binding
        {
            Source = t3ToggleBehavior,
            Path = "IsToggled"
        },
        Value = false
    };
    t3trigger.Setters.Add(new Setter
    {
        Property = BoxView.ColorProperty,
        Value = Color.FromHex("#eeeeee")
    });
    t3.Triggers.Add(t3trigger);
    grid.Children.Add(t3, 0, 0);

3 个切换按钮仅针对转换器参数 (T1 o T2) 不同

这是我的转换器

public class SelectedSlotToBooleanConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo language)
{
    if (value != null && parameter != null)
    {
        var val = fromString(value.ToString());
        var par = fromString(parameter.ToString());
        return val >= par;
    }
    else
    {
        return false;
    }
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo language)
{
    if (parameter != null)
    {
        return fromString(parameter.ToString());
    }
    else
    {
        return parameter;
    }
}

private Slot fromString(string slot)
{

        switch (slot)
        {
            case "T1":
                return Slot.T1;
            case "T2":
                return Slot.T2;
            case "T3":
                return Slot.T3;
            default:
                return Slot.Off;

        }
}
}

这是我的切换框行为

   public class ToggleBoxBehavior : 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); }
}

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

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

    this.BindingContext = bobject?.BindingContext;
}


protected override void OnAttachedTo(View view)
{
    base.OnAttachedTo(view);

    tapRecognizer = new TapGestureRecognizer();
    tapRecognizer.Tapped += OnTapped;
    view.GestureRecognizers.Add(tapRecognizer);
}

protected override void OnDetachingFrom(View view)
{
    base.OnDetachingFrom(view);

    view.GestureRecognizers.Remove(tapRecognizer);
    tapRecognizer.Tapped -= OnTapped;
}

void OnTapped(Object sender, EventArgs args)
{
    IsToggled = !IsToggled;
}
}

【问题讨论】：

你能把你想要做的事情的截图放上来，这样更容易想象吗？
我添加截图
嗯，它可能不是最好的帮助，但也许它可以给你一些提示。当我出于某种原因看到您的屏幕截图时，我想到了 Xamarin.Froms ProgressBar（除了它是水平的而不是垂直的）。所以对我来说，与其用3个不同的控件来表示一个值，不如做一个由三个部分组成的控件，并且控件有一个值可以设置并且可以控制各个部分？
我无法理解用户如何设置进度条的值
developer.xamarin.com/api/type/Xamarin.Forms.ProgressBar 这里有你需要了解的关于 ProgressBar 的所有信息

标签： c# xamarin xamarin.forms ivalueconverter

【解决方案1】：

我知道，那已经很晚了，但是我们在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}"/>

您可以绑定 IsToggled-Property 并在视图模型的 set-function 中编写自己的逻辑。

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

【讨论】：