-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[windows] Fixed CarouselView items rendering (#16842)
* [windows] Added ArrangeOverride override and changed MeasureOverride in ItemContentControl to not call base when the ItemHeight and ItemWidth are defined When the height and width of the items are already defined, it's likely that the base.MeasureOverride (WinUI) call reduces the original size, causing issues like the items in a CarouselView not fitting the container, which causes more items to be displayed at once. This fix makes sure that we always return the max height and width between the measured override and the existing items height and width. Also, adding ArrangeOverride from WinUI base class to control the layout correctly and completely on our side. Fixes Bug: #12567 * Added Appium test for CarouselView to validate fix for bug #12567 * Fix RS0016 + added inheritdoc * Fixed return statement on ArrangeOverride according to PR feedback * Fixed CarouselViewHandler resizing logic according to PR feedback * Attempt to fix test errors --------- Co-authored-by: Juan Diego Herrera <[email protected]>
- Loading branch information
Showing
5 changed files
with
243 additions
and
53 deletions.
There are no files selected for viewing
135 changes: 135 additions & 0 deletions
135
src/Controls/samples/Controls.Sample.UITests/Issues/Issue12567.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| using System.Collections.ObjectModel; | ||
| using Microsoft.Maui; | ||
| using Microsoft.Maui.Controls; | ||
| using Microsoft.Maui.Graphics; | ||
|
|
||
| namespace Maui.Controls.Sample.Issues | ||
| { | ||
| [Issue(IssueTracker.Github, 12567, "Carousel View does not behave properly in Windows", PlatformAffected.UWP)] | ||
| public class Issue12567 : TestContentPage | ||
| { | ||
| protected override void Init() | ||
| { | ||
| var carouselItemsCount = 10; | ||
| var viewModel = new CarouselViewModel(); | ||
|
|
||
| viewModel.GenerateItems(carouselItemsCount); | ||
|
|
||
| BindingContext = viewModel; | ||
|
|
||
| var itemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal) | ||
| { | ||
| SnapPointsType = SnapPointsType.MandatorySingle, | ||
| SnapPointsAlignment = SnapPointsAlignment.Center | ||
| }; | ||
| var itemTemplate = GetCarouselItemTemplate(); | ||
| var carouselView = new CarouselView | ||
| { | ||
| ItemsLayout = itemsLayout, | ||
| ItemTemplate = itemTemplate, | ||
| Margin = new Thickness(0, 10, 0, 10), | ||
| BackgroundColor = Colors.Grey, | ||
| AutomationId = "TestCarouselView", | ||
| PeekAreaInsets = new Thickness(30, 0, 30, 0) | ||
| }; | ||
| var button = new Button | ||
| { | ||
| Text = "Get Last Item", | ||
| AutomationId = "GetLast", | ||
| Margin = new Thickness(0, 10, 0, 10) | ||
| }; | ||
| var carouselContent = new Grid(); | ||
|
|
||
| carouselContent.Children.Add(carouselView); | ||
|
|
||
| var layout = new StackLayout | ||
| { | ||
| Orientation = StackOrientation.Vertical, | ||
| VerticalOptions = LayoutOptions.Fill, | ||
| }; | ||
|
|
||
| button.Clicked += (sender, args) => | ||
| { | ||
| carouselView.ScrollTo(carouselItemsCount - 1, position: ScrollToPosition.End, animate: true); | ||
| }; | ||
|
|
||
| carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Items"); | ||
| layout.Children.Add(button); | ||
| layout.Children.Add(carouselContent); | ||
|
|
||
| Content = layout; | ||
| } | ||
|
|
||
| DataTemplate GetCarouselItemTemplate() | ||
| { | ||
| return new DataTemplate(() => | ||
| { | ||
| var layout = new StackLayout | ||
| { | ||
| Orientation = StackOrientation.Vertical, | ||
| VerticalOptions = LayoutOptions.Fill | ||
| }; | ||
| var nameLabel = new Label | ||
| { | ||
| HorizontalOptions = LayoutOptions.Center, | ||
| Margin = new Thickness(10), | ||
| AutomationId = "NameLabel" | ||
| }; | ||
| var numberLabel = new Label | ||
| { | ||
| HorizontalOptions = LayoutOptions.Center, | ||
| Margin = new Thickness(10), | ||
| AutomationId = "NumberLabel" | ||
| }; | ||
|
|
||
| nameLabel.SetBinding(Label.TextProperty, new Binding("Name")); | ||
| numberLabel.SetBinding(Label.TextProperty, new Binding("Number")); | ||
|
|
||
| layout.Children.Add(nameLabel); | ||
| layout.Children.Add(numberLabel); | ||
|
|
||
| return new Frame | ||
| { | ||
| Content = layout, | ||
| HasShadow = false | ||
| }; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| class CarouselData | ||
| { | ||
| public string Name { get; set; } | ||
|
|
||
| public int Number { get; set; } | ||
| } | ||
|
|
||
| class CarouselViewModel : BindableObject | ||
| { | ||
| ObservableCollection<CarouselData> items; | ||
|
|
||
| public ObservableCollection<CarouselData> Items | ||
| { | ||
| get => items; | ||
| set | ||
| { | ||
| items = value; | ||
| OnPropertyChanged(); | ||
| } | ||
| } | ||
|
|
||
| public void GenerateItems(int itemsCount) | ||
| { | ||
| Items = new ObservableCollection<CarouselData>(); | ||
|
|
||
| for (var i = 1; i <= itemsCount; i++) | ||
| { | ||
| Items.Add(new CarouselData | ||
| { | ||
| Name = $"Test Item {i}", | ||
| Number = i | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.