Button Background color in a list not honoring binding property

WalterMatthiesenWalterMatthiesen USMember ✭✭
edited October 2017 in Xamarin.Forms

I was trying to mimic a selection by using a button and binding to the background color. At first, it seemed like it worked. But the list was kind of large and when I scroll through it, I see multiple buttons that look selected, when I know their background color is wrong. Scrolling back to the top, the item that was selected, now isn't, and something else is.

I have added a 2nd button and a label and their TextColor which I set the same way as the button Background color, is dead on. I even added a Clicked event just to popup an alert and display the background color of the button clicked on, and it shows the correct color.

I have only experienced this on Android so far, I have not implemented the code I need for iOS yet to build the list, but it behaves the same in an Android emulator and on a real Android device.

Following is the xaml for the page I am testing. Any idea what is going on with the Background color on the buttons?

One side note, my emulator displays about 11.5 lines. There seems to be a pattern of 12 non-selected (white background) buttons between a single selected (kind of blue color) buttons. And this repeats through the entire list.

< ContentPage.Content>
< ScrollView>
< StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
< ListView x:Name="SelectedListView" SeparatorVisibility="None" HasUnevenRows="True">
< ListView.ItemTemplate>
< DataTemplate>
< ViewCell>
< StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
< StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
< Button BackgroundColor="{Binding TextColor}" Text=" " Margin="10,10,10,10" HeightRequest="11" WidthRequest="11" BorderColor="Black" BorderWidth="1"
CommandParameter="{Binding Key}" Clicked="button_clicked" />
< Button TextColor="{Binding TextColor}" Text="{Binding TextColor}" BorderColor="Black" BorderWidth="1"
CommandParameter="{Binding Key}" Clicked="button_clicked" />
< Label Text="{Binding TextColor}" TextColor="{Binding TextColor}" Style="{StaticResource lsStd }" />
< Label Text="{Binding Key}" Style="{StaticResource lsStd }" />
< Label Text="{Binding Title}" Style="{StaticResource lsStd }" />
< StackLayout.GestureRecognizers>
< TapGestureRecognizer Tapped="Item_Tapped" CommandParameter="{Binding Key}" />
< /StackLayout.GestureRecognizers>
< /StackLayout>
< StackLayout HeightRequest="1" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" Spacing="0">
< /StackLayout>
< /ViewCell>
< /DataTemplate>
< /ListView.ItemTemplate>
< /ListView>
< /StackLayout>
< /ScrollView>
< /ContentPage.Content>


  • FabricioBertaniFabricioBertani USMember ✭✭

    You're not binding your listview item source with anything, check that first.

  • WalterMatthiesenWalterMatthiesen USMember ✭✭

    In code I am. I get my list. I have attached an image. If you look at the image, you will see the first item has an oval blue button while all the others have a white button. The 2nd button's text and text color, and the following label's text and text color are set to the same value as the background color of the first button.
    There are 102 items in the list. If you scroll the list down, you will encounter another line where the oval button is blue. But, that is not what the background color is set too. When you scroll back up to the top, the image will look exactly like the attachment except the first lines oval button will be white and some other line will have the blue button.
    So, for some reason the background color for the button gets repeated in places where it is not set to that color, and does not stay associated with the button it is actually set on.

  • WalterMatthiesenWalterMatthiesen USMember ✭✭

    Quick update, under iOS, everything works fine. It does not have a problem with the background color of the buttons moving around randomly.

Sign In or Register to comment.