locked
Change color and backgroud color,Tint RRS feed

  • Question

  • User395377 posted

    I have a collection view, I want that selected item will change background and color of the image. Please help

    Wednesday, August 12, 2020 10:10 PM

Answers

  • User371688 posted

    There are a few different ways you can do this, the easiest method is to add a Selected VisualState to your ItemTemplate and set the background color there.

    You can refer to the following code:

    ```

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="Yellow" />
                                        <Setter TargetName="Title" Property="Label.FontAttributes" Value="Bold"/>
                                        <Setter TargetName="Description" Property="Label.FontAttributes" Value="Bold"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
    
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
    
                        <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
                        <Label x:Name="Description" Text="{Binding Description}" Grid.Row="1"></Label>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    

    ```

    And there is a sample about this, you can check it here: https://github.com/hartez/SelectedItemStyling

    Refer : https://github.com/xamarin/Xamarin.Forms/issues/9565

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 13, 2020 2:31 AM

All replies

  • User371688 posted

    There are a few different ways you can do this, the easiest method is to add a Selected VisualState to your ItemTemplate and set the background color there.

    You can refer to the following code:

    ```

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup Name="CommonStates">
                                <VisualState Name="Normal" />
                                <VisualState Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Property="BackgroundColor" Value="Yellow" />
                                        <Setter TargetName="Title" Property="Label.FontAttributes" Value="Bold"/>
                                        <Setter TargetName="Description" Property="Label.FontAttributes" Value="Bold"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
    
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
    
                        <Label x:Name="Title" Text="{Binding Title}" FontSize="Large"></Label>
                        <Label x:Name="Description" Text="{Binding Description}" Grid.Row="1"></Label>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    

    ```

    And there is a sample about this, you can check it here: https://github.com/hartez/SelectedItemStyling

    Refer : https://github.com/xamarin/Xamarin.Forms/issues/9565

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 13, 2020 2:31 AM
  • User395377 posted

    Thank you, but I am also want to change the color of the icon, can you help me?

    Thursday, August 13, 2020 5:46 AM
  • User371688 posted

    Do you want to change the icon to another icon or just change the background color of the icon?

    Thursday, August 13, 2020 5:52 AM
  • User395377 posted

    I have a white background and a gray icon. When I click, I want that only one selected imagebutton/button, change the background on light blue color and icon become blue

    Thursday, August 13, 2020 5:57 AM
  • User377758 posted

    Do you want to only change the background of the the selected imagebutton and change the icon to another icon?

    Then you can add a new field to identify the background of the imagebutton, once it is selected, then change the background. Do not forget to implement interface INotifyPropertyChanged for your item's model. In this case ,the ui will refresh automatically.

    Friday, August 14, 2020 9:47 AM
  • User366895 posted

    is this question about Xamarin.Forms or Xamarin.Android?

    Saturday, August 15, 2020 12:53 AM
  • User371688 posted

    Hi @kingston5555, have you resolved your question?

    Wednesday, August 19, 2020 2:45 AM