I am learning .Net maui and building an inventory app and have run into a bit of a frontend problem with using CollectionView. In the CollectionView, the only way I have found to make it scrollable if the collection is larger than the view, is to set the VerticalOptions = "FillAndExpand". The problem now is if the collection is smaller than the view and I have the background color of the CollectionView set, then the background will extend past the collection.
Here is how it looks: CollectionView
I found I can fix this by not setting the BackgroundColor of the CollectionView but instead set the BackgroundColor of the Grid inside the DataTemplate for the collection. the problem with this now is when I hover the mouse over an item in the collection it does not highlight to show it is clickable. I can still select it and the item highlights when clicked, however, I would like it to also highlight when the mouse hovers over an item, like shown in the screenshot above.
Here is the code:
<CollectionView
ItemsSource="{Binding ItemDefectsCollection}"
SelectionMode="Single"
VerticalOptions="FillAndExpand"
BackgroundColor="White"
SelectedItem="{Binding SelectedDefect}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<!--Item State Settings-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightGrey" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame
CornerRadius="0"
BorderColor="Black"
BackgroundColor="Transparent">
<Label Text="{Binding .}"/>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I am learning .Net maui and building an inventory app and have run into a bit of a frontend problem with using CollectionView. In the CollectionView, the only way I have found to make it scrollable if the collection is larger than the view, is to set the VerticalOptions = "FillAndExpand". The problem now is if the collection is smaller than the view and I have the background color of the CollectionView set, then the background will extend past the collection.
Here is how it looks: CollectionView
I found I can fix this by not setting the BackgroundColor of the CollectionView but instead set the BackgroundColor of the Grid inside the DataTemplate for the collection. the problem with this now is when I hover the mouse over an item in the collection it does not highlight to show it is clickable. I can still select it and the item highlights when clicked, however, I would like it to also highlight when the mouse hovers over an item, like shown in the screenshot above.
Here is the code:
<CollectionView
ItemsSource="{Binding ItemDefectsCollection}"
SelectionMode="Single"
VerticalOptions="FillAndExpand"
BackgroundColor="White"
SelectedItem="{Binding SelectedDefect}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<!--Item State Settings-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="LightGrey" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame
CornerRadius="0"
BorderColor="Black"
BackgroundColor="Transparent">
<Label Text="{Binding .}"/>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
1 Answer
Reset to default 0To highlight the item in the collectionview when the mouse is hovering it, you can just use the VisualStateManager PointOver state.
<VisualState Name="PointerOver">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
Source: https://learn.microsoft/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-9.0
ItemsSourceand set it – Jason Commented Feb 17 at 22:11