CODEWITHSUNDEEP
.netxamlmaui
TrollKilla
TrollKilla

Reputation: 3

Why is the VisualStateManager returning two different results with the same code in .NET Maui?

I am working with .NET Maui and on this page I have two panels using CollectionView and using VisualStateManager to set the background color of selected item. The code for both is the exact same. But the color of the selected item is different. Is this a bug?

Here is how it looks: Page Display

Here is the code for the left panel:

<!--Left Panel-->
<Grid
    Grid.Row="1"
    Grid.Column="0"
    ColumnDefinitions="2*,*"
    RowDefinitions="*"
    HorizontalOptions="Center"
    Padding="25"
    MaximumHeightRequest="630"
    Margin="10">

    <StackLayout
        Grid.Column="0"
        Grid.Row="0"
        MaximumHeightRequest="520"
        MaximumWidthRequest="600"
        HorizontalOptions="Center"
        VerticalOptions="Start">

        <Frame
            Style="{StaticResource HeaderFrame}">

            <Label
                Style="{StaticResource HeaderLable}"
                Text="Item Defects">
            </Label>
        </Frame>

        <Frame
            VerticalOptions="FillAndExpand"
            BorderColor="Black"
            CornerRadius="0"
            Padding="0">
            
            <CollectionView
                ItemsSource="{Binding ItemDefectsCollection}"
                SelectionMode="Single"
                BackgroundColor="White"
                SelectedItem="{Binding SelectedDefect}">

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>

                            <!--Item State Settings-->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Grey" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackLayout
                                HeightRequest="50">

                                <Label
                                    VerticalOptions="Center"
                                    Margin="15"
                                    Text="{Binding .}"/>
                            </StackLayout>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Frame>
    </StackLayout>

    <VerticalStackLayout
        Grid.Column="1"
        Spacing="10"
        HorizontalOptions="Start"
        Margin="10,50,0,0">
        
        <Button
            Style="{StaticResource StandardButton}"
            Text="Add">
            
        </Button>

        <Button
            Style="{StaticResource StandardButton}"
            Command="{Binding RemoveDefectCommand}"
            Text="Remove">
        </Button>
    </VerticalStackLayout>
</Grid>

Here is the code for the right:

<!--Right Panel-->
<Grid
    Grid.Row="1"
    Grid.Column="1"
    ColumnDefinitions="2*,*"
    RowDefinitions="*"
    HorizontalOptions="Center"
    Padding="25"
    MaximumHeightRequest="630"
    Margin="10">

    <StackLayout
        Grid.Column="0"
        Grid.Row="0"
        MaximumHeightRequest="520"
        MaximumWidthRequest="600"
        HorizontalOptions="Center"
        VerticalOptions="Start">

        <Frame
            Style="{StaticResource HeaderFrame}">

            <Label
                Style="{StaticResource HeaderLable}"
                Text="Missing Components">
            </Label>
        </Frame>

        <Frame
            VerticalOptions="FillAndExpand"
            BorderColor="Black"
            CornerRadius="0"
            Padding="0">

            <CollectionView
                ItemsSource="{Binding ItemMissingComponentsCollection}"
                SelectionMode="Single"
                BackgroundColor="White"
                SelectedItem="{Binding SelectedMissingComp}">

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>

                            <!--Item State Settings-->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Grey" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackLayout
                        HeightRequest="50">

                                <Label
                            VerticalOptions="Center"
                            Margin="15"
                            Text="{Binding .}"/>
                            </StackLayout>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Frame>
    </StackLayout>

    <VerticalStackLayout
        Grid.Column="1"
        Spacing="10"
        HorizontalOptions="Start"
        Margin="10,50,0,0">
        
        <Button
            Style="{StaticResource StandardButton}"
            Text="Add">
        </Button>

        <Button
            Style="{StaticResource StandardButton}"
            Command="{Binding RemoveMissComponentCommand}"
            Text="Remove">
        </Button>
    </VerticalStackLayout>
</Grid>

The crazy thing is I just did copy and paste for the code of the left panel to make the one on the right and only changed the data that is displayed so I know for a fact there is not a mistake.

Upvotes: -1

Views: 38

Answers (1)

Bhavanesh N
Bhavanesh N

Reputation: 1290

It's probably not a good idea to have visual states defined without wrapping VisualStateGroups inside a VisualStateGroupList.

You can define something like this and try.

<VisualStateGroupList>
    <VisualStateManager.VisualStateGroups>
         <VisualStateGroup Name="CommonStates">
         `<VisualState Name="Normal" />
         <VisualState Name="Selected">
             <VisualState.Setters>
                 <Setter Property="BackgroundColor" Value="Grey" />
             </VisualState.Setters>
         </VisualState>
         </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</VisualStateGroupList>

Upvotes: 0

Related Questions