Changing the background color of the itemstyle dynamically

2 posts, 0 answers
  1. FS
    FS avatar
    13 posts
    Member since:
    Mar 2012

    Posted 20 Jul Link to this post

    Hi:

     

    We just downloaded the Telerik Xamarin UI controls for evaluation.

    We need to know the approach to change  the background color of an itemstyle based on a property in my custom object.  For example, if the Amount property of our object is less than 10 dollars, we want to set the backcolor in red.  If the Amount is greater than 10, we want to set it to a green backcolor.  

     

    Thanks

     

    David

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    137 posts

    Posted 22 Jul Link to this post

    Hi David,

    You can accomplish this with a Converter. As an example, imagine we have a list of cars, where a car is:

    public class Car
    {
        public string Make {get; set;}
        public double Price {get;set;}
    }


    That list of cars is bound to the ListView and we're using this ItemTemplate:

    <DataTemplate>
                  <listView:ListViewTemplateCell>
                    <listView:ListViewTemplateCell.View>
                      <Grid BackgroundColor="{Binding Converter={StaticResource PriceColorConverter}}">
                            <Label Text="{Binding Make}" />
                      </Grid>
                    </listView:ListViewTemplateCell.View>
                  </listView:ListViewTemplateCell>
    </DataTemplate>


    The StaticResource PriceColorConverter is defined as:

    <converters:PriceColorConverter x:Key="PriceColorConverter" />


    The BackgroundColor binding passes the bound object to the converter, in which you return the appropriate color based of a property's value.

    For example, I make the background Red if it's over 50,000 and Green otherwise.

    public class PriceColorConverter : IValueConverter
    {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                if (value == null)
                    return null;
     
                var car = value as Car;
     
                if(car.Price > 50000)
                   return Color.Red;
     
                return Color.Green;
           }
     
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
    }


    Let us know if you have any further questions or concerns. Thank you for contacting Telerik Support and for choosing UI for Xamarin.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft banner
Back to Top