Skip to content
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

[Android] IndicatorView with DataTemplate (custom image) does not render correctly when ItemsSource change #24717

Closed
wants to merge 19 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
60a129e
Fixed the android indication view issue in android platform
NanthiniMahalingam Aug 21, 2024
897083f
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Aug 21, 2024
40c068c
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Aug 22, 2024
3a5df31
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Aug 29, 2024
83892e0
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Aug 30, 2024
57b5ef7
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 4, 2024
0e0a0fe
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 10, 2024
c0500e8
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 10, 2024
99f1116
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 11, 2024
7902539
Added the test case for indicator view for android platform.
NanthiniMahalingam Sep 11, 2024
cd53b05
Merge branch 'issue-21980' of https://github.com/NanthiniMahalingam/m…
NanthiniMahalingam Sep 11, 2024
eea94c7
Added the android output image
NanthiniMahalingam Sep 11, 2024
ab9a112
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 11, 2024
794185a
Merge branch 'issue-21980' of https://github.com/NanthiniMahalingam/m…
NanthiniMahalingam Sep 11, 2024
8fafc7a
Remove unwanted code section.
NanthiniMahalingam Sep 11, 2024
60cc74f
Merge branch 'dotnet:main' into issue-21980
NanthiniMahalingam Sep 12, 2024
2596c41
Updated the collection of images in view model class.
NanthiniMahalingam Sep 12, 2024
c5c5d0a
Merge branch 'issue-21980' of https://github.com/NanthiniMahalingam/m…
NanthiniMahalingam Sep 12, 2024
d5a2273
Added the output image for android and iOS platform.
NanthiniMahalingam Sep 12, 2024
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
5 changes: 0 additions & 5 deletions src/Controls/src/Core/IndicatorView/IndicatorStackLayout.cs
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,6 @@ internal void ResetIndicatorCount(int oldCount)
oldCount = 0;
}

if (oldCount > _indicatorView.Count)
{
return;
}

BindIndicatorItems();
}
finally
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
61 changes: 61 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue21980.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Maui.Controls.Sample.Issues
{
[XamlCompilation(XamlCompilationOptions.Compile)]
[Issue(IssueTracker.Github, "21980", "IndicatorView with DataTemplate (custom image) does not render correctly when ItemsSource change.", PlatformAffected.Android | PlatformAffected.iOS)]
public partial class Issue21980 : ContentPage
{
public Issue21980()
{
InitializeComponent(); 
BindingContext = new Issue21980ViewModel();
}
}

public class Issue21980ViewModel : INotifyPropertyChanged
{
private readonly IReadOnlyList<string> _imageSource1 = new List<string>
{
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
};
private readonly IReadOnlyList<string> _imageSource2 = new List<string>()
{
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
"dotnet_bot.png",
};

private IReadOnlyList<string> _images = [];
public IReadOnlyList<string> Images
{
get => _images;
set
{
_images = value;
OnPropertyChanged();
}
}

public Command ChangeSourceCommand { get; set; }

public Issue21980ViewModel()
{
Images = _imageSource1;
ChangeSourceCommand = new Command(() => Images = _imageSource2);
}

public event PropertyChangedEventHandler PropertyChanged;

void OnPropertyChanged([CallerMemberName] string propertyName = "") =>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
48 changes: 48 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue21980.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.Issues.Issue21980">
<ContentPage.Resources>
<Style x:Key="IndicatorViewTemplateStyle" TargetType="Image">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Source" Value="indicator_unselected" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="Source" Value="indicator_selected" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
<VerticalStackLayout>
<Grid>
<CarouselView ItemsSource="{Binding Images}" IndicatorView="IndicatorView" HorizontalScrollBarVisibility="Never" WidthRequest="300" HeightRequest="450" Grid.Row="0">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding .}" WidthRequest="300" HeightRequest="450"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<Border HorizontalOptions="Center" VerticalOptions="End" Margin="16" Background="Green" Padding="6" StrokeShape="RoundRectangle 12" StrokeThickness="0" Grid.Row="0">
<IndicatorView AutomationId="IndicatorView" x:Name="IndicatorView" IndicatorColor="Pink" SelectedIndicatorColor="Black" IndicatorSize="12" Padding="0" HeightRequest="12">
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<Image Aspect="Center" HeightRequest="12" WidthRequest="12" Margin="1,0" Style="{StaticResource IndicatorViewTemplateStyle}" />
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>
</Border>
</Grid>
<Button x:Name="BtnChangeSource" AutomationId="changeItemsSource" Command="{Binding ChangeSourceCommand}" Text="Change ItemsSource" HorizontalOptions="Center" WidthRequest="200" Margin="0,16"/>
</VerticalStackLayout>
</ContentPage>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
#if ANDROID || IOS
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue21980 : _IssuesUITest
{
public Issue21980(TestDevice device) : base(device)
{
}

public override string Issue => "IndicatorView with DataTemplate (custom image) does not render correctly when ItemsSource change.";

[Test]
[Category(UITestCategories.IndicatorView)]
public void IndicatorViewSizeAfterItemsSourceUpdate()
{
App.WaitForElement("changeItemsSource");
App.Click("changeItemsSource");
App.WaitForElement("changeItemsSource");
VerifyScreenshot();
}
}
}
#endif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 9 additions & 2 deletions src/Core/src/Platform/Android/MauiPageControl.cs
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,11 @@ public void UpdateIndicatorCount()
}

RemoveViews(count);

if (_indicatorView is ITemplatedIndicatorView templatedIndicatorView)
{
UpdateIndicatorTemplate(templatedIndicatorView.IndicatorsLayoutOverride);
}
}

void UpdateIndicatorTemplate(ILayout? layout)
Expand Down Expand Up @@ -170,9 +175,11 @@ int GetIndexFromPosition()

void RemoveViews(int startAt)
{
for (int i = startAt; i < ChildCount; i++)
startAt = ChildCount - startAt;
int index = ChildCount - 1;
for (int i = 0; i < startAt; i++)
{
var imageView = GetChildAt(ChildCount - 1);
var imageView = GetChildAt(index - i);
imageView?.SetOnClickListener(null);
RemoveView(imageView);
}
Expand Down
Loading