xaml - 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.

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.

Share Improve this question edited Mar 3 at 4:55 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked Mar 2 at 21:54 TrollKilla 33 bronze badges

2 seems like the typical difference when a control is active or not (has focus and/or keyboard focus), try tabing between the controls and you should see the color alternating – Rand Random Commented Mar 2 at 21:58
maybe this is of interest to you: github/dotnet/maui/issues/10193 – Rand Random Commented Mar 2 at 22:05

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

与本文相关的文章

评论列表(0)