Background color of a Label within a ViewCell (when the item is selected)

Ok, this is one of those things that seemed very simple, but we have been unable to find a solution:

  • We have a ListView/ViewCell which contains a StackLayout and, within it, a label that shows a small tag and a background color with the status of the item.
  • When the item is selected, the background of the ViewCell changes (fine with that) but... the background of the label also changes (what?).

Is there any way to prevent Xamarin Forms from changing the background color of every element within the ViewCell? (when the item is selected)

As a bonus visual bug, the status of the item can be changed after the user selects the item. This causes the background color to become visible again, but, when the user deselects the item... it goes back to the "old" color that the line had before (Xamarin seems to be caching the previous background color and reapplying it, even though the value has changed).

As a bit of code is probably easier to understand, this is a simplified example of what we are doing:

<ListView ItemsSource="{Binding Lines}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding Description}" />
                    <Label Text="{Binding Status}" BackgroundColor="{Binding StatusColor}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Any help/suggestions would be welcome!

Regards,
Salva.

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I wouldn't bind the color itself. That has always proven unreliable to me - and it seems now to you as well.
    Instead I use a DataTrigger to change the color based on a binded value. That way it gets applied after the value is set and any other visual steps get completed.

  • SalvadorGimenoSalvadorGimeno ESMember ✭✭

    Hi Clint,

    Thanks a lot for your answer. Unfortunately, it doesn't seem to change the behavior of Xamarin Forms. I've modified the code in the page to something similar to the code below and the results are basically the same :(

    The datatriggers do run and apply the correct color but:

    • When the line is selected the background color is still lost.
    • If you change the value of Completed, the color reappears.
    • If you select a different line, the color goes back to the original color (the one it had before the line was selected) regardless of the value of Completed.

    I've even tried to force a PropertyChanged event on the "Completed" propety, to see if that helped but, (probably) because the actual value of the BackgroundColor property doesn't change, Xamarin does not update the visible color.

      <ListView ItemsSource="{Binding Lines}">
            <ListView.ItemTemplate>
                  <DataTemplate>
                        <ViewCell>
                              <StackLayout>
                                    <Label Text="{Binding Description}" />
                                    <Label Text="{Binding Status}" />
                                          <Label.Triggers>
                                                <DataTrigger TargetType="Label" Binding="{Binding Completed}" Value="False">
                                                      <Setter Property="BackgroundColor" Value="{StaticResource PendingLabelColor}"/>
                                                </DataTrigger>
                                                <DataTrigger TargetType="Label"  Binding="{Binding Completed}" Value="True">
                                                       <Setter Property="BackgroundColor" Value="{StaticResource CompletedLabelColor}"/>
                                                </DataTrigger>
                                          </Label.Triggers>
                              </StackLayout>
                        </ViewCell>
                  </DataTemplate>
            </ListView.ItemTemplate>
      </ListView>
    
  • SalvadorGimenoSalvadorGimeno ESMember ✭✭
    edited April 2018

    An important detail I just noticed: we've been fighting with this problem for several days and I was convinced that it was happening both in Android and iOS, but it seems to only affect iOS (Android renders the colors as expected).

    So it must be something related to the way iOS changes/sets the selection color in the UITableView. I have confirmed that if I create a custom renderer and set the SelectionStyle to None, the label background color works as expected but, unfortunately, the selected element should be highlighted, so that's not an option.

    Anyone has any ideas?

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Value="{StaticResource CompletedLabelColor}"/

    Can you share that color definition? I'm wondering if it is partially transparent. Is it a hex color with the opacity explicitly set to fully opaque?
    <Color x:Key="Black">#FF000000</Color>
    <Color x:Key="BarelyThere">#02FFFFFF</Color>

  • SalvadorGimenoSalvadorGimeno ESMember ✭✭

    Thanks! I must admit I didn't know you could explicitly set the opacity in the hex code, but unfortunately it made no difference. I've changed the values to have the opacity explicitly set, and it keeps doing the same.

     <Color x:Key="PendingLabelColor">#FF81D4FA</Color>
     <Color x:Key="CompletedLabelColor">#FF43A047</Color>
    

    After my last post (seeing that it seems to be an iOS-only problem), though, I've searched for people asking the same question, but using Objective-C/Swift, and I've found this:

    https://stackoverflow.com/questions/5222736/uiview-backgroundcolor-disappears-when-uitableviewcell-is-selected

    Which would mean that this is not a problem of Xamarin as such, but of the way iOS sets the selected background color (overriding the background color of all UI elements included in the Cell). The previous link has an example of how to solve it overriding the "OnSelected" method of UITableViewCell, but I'm not sure wether that would possible using Xamarin.Forms

    So, if this is indeed a problem with UITableViewCell:

    Would it be possible to override the OnSelected method?
    Or maybe re-apply the background color after it has been selected? (we tried to do this on the ListView using the ItemSelected event, with no luck).

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Sounds like that's a route to take... Make a custom renderer for it.

  • flyhalflyhal SAMember ✭✭

    has anyone found a solution to this?

  • SalvadorGimenoSalvadorGimeno ESMember ✭✭

    Hi flyhal. I'm afraid we didn't find any solution to this.

Sign In or Register to comment.