根据数据绑定值设置背景颜色

时间:2015-05-07 08:28:03

标签: xaml binding xamarin xamarin.forms

我以前见过一些答案,但没有什么能真正帮助我。

我还有一个类 { title: 'Cart, iconCls: 'shoppingcart', itemId: 'cart', hidden: ' What should it be the value? backend send me the value' }, (这将是从DB检索的数据集,但出于这个问题的目的,我添加了一个ObservableCollection),其中包含

DecideModel

在我的XAML代码中,我有

static DecideModel()
    {
        All = new ObservableCollection<DecideModel>
        {
            new DecideModel
            {
                DatePerformed = new DateTime(2015, 4, 06),
                Result = "Maybe"
            },
            new DecideModel
            {
                DatePerformed = new DateTime(2015, 4, 05),
                Result = "No"
            },
            new DecideModel
            {
                DatePerformed = new DateTime(2015, 4, 04),
                Result = "Yes"
            }
        };
    }

    public DateTime DatePerformed { set; get; }

    public string  Result { set; get; }

    public static IList<DecideModel> All { set; get; }
}

我试图根据从Object中获得的结果动态设置标签的背景颜色。

如果您对如何操作有任何疑问,请告诉我。我正在寻找任何有用的选择。

3 个答案:

答案 0 :(得分:16)

您可能需要的是ValueConverter。你现在正在做的是将背景颜色设置为“可能”,“否”或“是”,这显然不是一种颜色。

您需要做的是将该值转换为颜色。你可以这样做。

创建一个实现IValueConverter接口的新类。它可能看起来像这样:

public class YesNoMaybeToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
            switch(value.ToString().ToLower())
            {
                    case "yes":
                        return Color.Green;
                    case "no":
                        return Color.Red;
                    case "maybe":
                        return Color.Orange;
            }

            return Color.Gray;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
            // You probably don't need this, this is used to convert the other way around
            // so from color to yes no or maybe
            throw new NotImplementedException();
    }
}

然后将此类作为静态资源添加到您的XAML页面,如下所示:

<ContentPage.Resources>
   <!-- Add this line below -->
   <local:YesNoToBooleanConverter x:Key="YesNoMaybeToColorConverter" />
   <!-- You can remove the underneath -->
    <!--<ResourceDictionary>
        <Color x:Key="Maybe">#ffddbc21</Color>
        <Color x:Key="Yes">#3CB371</Color>
        <Color x:Key="No">#B22222</Color>
        <Color x:Key="Depends">#ffd78800</Color>
    </ResourceDictionary>-->
</ContentPage.Resources>

现在在绑定中你必须告诉他使用什么转换器。这样做:

<Label Text="{Binding Result}" HorizontalOptions="FillAndExpand" BackgroundColor="{Binding Result, Converter={StaticResource YesNoMaybeToColorConverter}}" />

现在应该看到Result字段中的值,将其放入已定义的转换器中,并返回与该值对应的颜色。

答案 1 :(得分:1)

我找到了另外两个用于管理此选项的选项,因为有时我们不仅需要更改颜色,还需要更改字体和其他值。 首先,您需要为控件添加名称,如下所示:

  1. 您可以在这样的代码中设置颜色和其他属性,这种方式需要一些时间进行更新,因此当Text属性刚刚更新时,它不是最佳选择。

    protected override void OnAppearing()
    {
        if (this.MyLabel.Text.Contains("yes")
                 {
            this.MyLabel.TextColor = Color.FromHex("#98ee99");
        }
        else
        {
            this.MyLabel.TextColor = Color.FromHex("#ff867c");
        }
    

    }

  2. 另一种方法是使用Prism EventAggregator,我想在Xamarin.Forms中它是Messaging Center。以下是Prism [https://codesandchips.wordpress.com/2017/03/30/xamarin-getting-started-with-prism-messaging/][1]

  3. 的一个很好的例子

    在这种情况下,您应该从项目中的任何位置发送包含您的值的事件,例如,当它应该已经更新时。

     _evenAggregator.GetEvent<MyEvent>().Publish(Result);
    

    然后您应该在需要获得最新价值的地方订阅活动。在这种情况下,它应该是类后面的代码中的OnAppearing方法。

     void UpdateColor(string result)
        {
         if(result.Contains("yes")
                {
                this.MyLabel.TextColor = Color.FromHex("#98ee99");
                }
                else
                {
                this.MyLabel.TextColor = Color.FromHex("#ff867c");
                }
        }
    
    
    
    
    
         protected override void OnAppearing()
            {
    base.OnAppearing();
          _eventAggregator.GetEvent<MyEvent>().Subscribe(UpdateColor);
            }
    

答案 2 :(得分:1)

对于无需花费太多开销即可实现的纯XAML方法,可以使用DataTrigger。请注意,您可以根据需要为每个触发器添加尽可能多的设置器,这使其比以前建议的解决方案更加灵活,并且还将视图逻辑保持在应有的视图中。

<Label Text="{Binding Result}" HorizontalOptions="FillAndExpand">
    <Label.Triggers>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Yes">
            <Setter Property="BackgroundColor" Value="#3CB371" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="No">
            <Setter Property="BackgroundColor" Value="#B22222" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Maybe">
            <Setter Property="BackgroundColor" Value="#ddbc21" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Depends">
            <Setter Property="BackgroundColor" Value="#d78800" />
        </DataTrigger>
    </Label.Triggers>
</Label>

请注意,您可以通过将BackgroundColor属性设置为合理的默认值(在这种情况下可能是“ Depends”)来消除触发器之一。