Skip to content

[Windows] Fix for IndicatorView using templated icons not working #28905

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue7144.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
using System.Collections.ObjectModel;

namespace Controls.TestCases.HostApp.Issues;

[Issue(IssueTracker.Github, 7144, "IndicatorView using templated icons not working", PlatformAffected.UWP)]
public class Issue7144 : ContentPage
{
ObservableCollection<string> Items { get; set; } = new ObservableCollection<string>() { "Item1", "Item2" };

public Issue7144()
{
Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Star });
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });

IndicatorView indicatorViewWithDataTemplate = new IndicatorView
{
Margin = new Thickness(0, 0, 0, 40),
HorizontalOptions = LayoutOptions.Center,
IndicatorColor = Colors.Black,
SelectedIndicatorColor = Colors.Green
};

indicatorViewWithDataTemplate.IndicatorTemplate = new DataTemplate(() =>
{
Image image = new Image()
{
Source = "dotnet_bot.png",
HeightRequest = 15,
WidthRequest = 15,
};
return image;
});

CarouselView carouselView = new CarouselView
{
ItemsSource = Items,
Loop = false,
IndicatorView = indicatorViewWithDataTemplate,
ItemTemplate = new DataTemplate(() =>
{
StackLayout stackLayout = new StackLayout();

Label label = new Label
{
FontAttributes = FontAttributes.Bold,
FontSize = 24,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
label.SetBinding(Label.TextProperty, ".");;

stackLayout.Children.Add(label);

return stackLayout;
})
};

Label label = new Label
{
AutomationId = "descriptionLabel",
Text = "The test case fails if the IndicatorView DataTemplate is not displayed",
FontAttributes = FontAttributes.Bold,
FontSize = 24,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};

grid.Add(carouselView, 0, 0);
grid.Add(indicatorViewWithDataTemplate, 0, 1);
grid.Add(label, 0, 2);

Content = grid;
}
}


Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;

public class Issue7144 : _IssuesUITest
{
public Issue7144(TestDevice device) : base(device)
{
}

public override string Issue => "IndicatorView using templated icons not working";

[Test]
[Category(UITestCategories.IndicatorView)]
public void IndicatorViewWithTemplatedIcon()
{
App.WaitForElement("descriptionLabel");
VerifyScreenshot();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pending snapshots in all platforms.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jsuarezruiz , I've attached the screenshots for the Android and iOS platforms. I will add the screenshots for the other platforms in the next CI run​.

}
}
8 changes: 6 additions & 2 deletions src/Core/src/Platform/Windows/MauiPageControl.cs
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@ public void SetIndicatorView(IIndicatorView indicatorView)

internal void UpdateIndicatorsColor()
{
if (_indicatorView == null)
if (_indicatorView is null || (_indicatorView is ITemplatedIndicatorView templatedView && templatedView.IndicatorsLayoutOverride is not null))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This condition is repeated 2 times, can create an internal property like:

internal bool UseShapeIndicator  =>
    _indicatorView == null || 
    (_indicatorView is ITemplatedIndicatorView templatedView && templatedView.IndicatorsLayoutOverride != null);


if (UseShapeIndicator)
{

}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jsuarezruiz , Thanks for the suggestion! I've updated the code to use an internal property as you recommended.

{
return;
}

if (_indicatorView.IndicatorColor is SolidPaint solidPaint)
_fillColor = solidPaint?.ToPlatform();
Expand All @@ -54,8 +56,10 @@ internal void UpdateIndicatorsColor()

internal void CreateIndicators()
{
if (_indicatorView == null)
if (_indicatorView is null || (_indicatorView is ITemplatedIndicatorView templatedView && templatedView.IndicatorsLayoutOverride is not null))
{
return;
}

var position = GetIndexFromPosition();
var indicators = new List<WShape>();
Expand Down