Skip to content

Fix for AvatarView child dimensions not being correctly set #1963

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.

Sign up for GitHub

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

Merged
TheCodeTraveler merged 7 commits into from
Jun 20, 2024
Merged

Fix for AvatarView child dimensions not being correctly set #1963

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b5305ef
Fix for AvatarView child UriImageSource dimensions not being correctl…
GeorgeLeithead Jun 20, 2024
bd0d9d5
Merge branch 'CommunityToolkit:main' into Bug1930
GeorgeLeithead Jun 20, 2024
93bdfd9
Added sample to show AvatarView with an image, border and padding.
GeorgeLeithead Jun 20, 2024
b0700f4
Merge branch 'Bug1930' of https://github.com/GeorgeLeithead/Community…
GeorgeLeithead Jun 20, 2024
61ba642
Update Unit Test
TheCodeTraveler Jun 20, 2024
badf897
Merge branch 'main' into Bug1930
TheCodeTraveler Jun 20, 2024
ca6a6a2
Fix `ImageSourceParentSize_WhenStrokeShapeSet` Test
TheCodeTraveler Jun 20, 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
137 changes: 80 additions & 57 deletions samples/CommunityToolkit.Maui.Sample/Pages/Views/AvatarView/AvatarViewImagesPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,8 @@
</VerticalStackLayout.Resources>
<Label Style="{StaticResource Description}" Text="AvatarView can use local or URL image sources." />
<Line Style="{StaticResource HR}" />
<Grid
ColumnDefinitions="Auto"
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
Expand All @@ -105,27 +105,27 @@
<Border
Grid.Row="0"
Grid.Column="0"
HeightRequest="16"
WidthRequest="16"
StrokeShape="RoundRectangle 16"
Margin="0,0,0,0"
BackgroundColor="Red"
HeightRequest="16"
HorizontalOptions="End"
VerticalOptions="Start"
StrokeShape="RoundRectangle 16"
StrokeThickness="0"
BackgroundColor="Red"
Margin="0,0,0,0">
<Label
Text="8"
FontSize="11"
VerticalOptions="Start"
WidthRequest="16">
<Label
FontSize="11"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White" />
Text="8"
TextColor="White"
VerticalTextAlignment="Center" />
</Border>
</Grid>

<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
HeightRequest="32"
SemanticProperties.Description="Sample small AvatarView showing using a URL image."
Expand All @@ -134,92 +134,115 @@
<Border
Grid.Row="0"
Grid.Column="0"
StrokeShape="RoundRectangle 8"
Margin="40,0,0,0"
Padding="6,2,6,1"
BackgroundColor="Green"
HorizontalOptions="End"
VerticalOptions="Start"
StrokeShape="RoundRectangle 8"
StrokeThickness="0"
BackgroundColor="Green"
Margin="40,0,0,0"
Padding="6,2,6,1">
<Label
Text="1200k"
FontSize="11"
VerticalOptions="Start">
<Label
FontSize="11"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White" />
Text="1200k"
TextColor="White"
VerticalTextAlignment="Center" />
</Border>
</Grid>
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
HeightRequest="48"
SemanticProperties.Description="Sample AvatarView showing using a local image."
Style="{StaticResource AvatarViewImagesDefaultLocal}"
WidthRequest="48" />
<Image
HorizontalOptions="End"
VerticalOptions="Start"
Grid.Row="0"
Grid.Column="0"
Source="dotnet_bot.png"
HeightRequest="24"
WidthRequest="24"/>
HeightRequest="24"
HorizontalOptions="End"
Source="dotnet_bot.png"
VerticalOptions="Start"
WidthRequest="24" />
</Grid>
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
HeightRequest="48"
SemanticProperties.Description="Sample AvatarView showing using a URL image."
Style="{StaticResource AvatarViewImagesDefaultURL}"
WidthRequest="48" />
<Path
<Path
Grid.Row="0"
Grid.Column="0"
Stroke="Yellow"
Fill="Red"
Aspect="Uniform"
Data="M8.0886959,0L8.687694,0C12.279728,0.2989963 14.275696,2.2949993 15.971676,4.9890003 16.271724,4.5899982 16.470699,4.1909961 16.670711,3.8920001 18.765678,0.89799553 23.056684,-1.0980074 27.247655,0.79800445 28.544711,1.3970038 29.842683,2.2949993 30.740692,3.5919966 31.239652,4.3909931 31.837675,5.6880059 31.93765,6.8849973 32.336696,10.677006 30.740692,13.470998 29.442659,15.866003L26.648658,15.866003C26.149696,15.168005 26.050697,14.069998 25.351663,13.571004 24.453716,14.369009 24.353679,15.966009 23.75572,17.064001 23.156721,17.263006 22.457687,16.96401 21.759691,17.163 21.260667,17.761999 20.960681,19.359001 20.761707,20.257011 20.761707,19.458 20.561695,17.761999 20.462695,16.664007 20.262683,14.668997 20.162708,12.472997 19.963674,10.278004 19.863698,9.3800086 19.963674,8.1830015 19.164724,8.1830015 18.566703,8.1830015 18.466728,9.3800086 18.466728,9.9790077 18.266715,12.07401 17.867731,14.27001 17.468683,16.465002 16.969722,15.467001 16.670711,14.27001 16.171687,14.27001 15.57269,14.668997 15.27368,15.36701 14.973692,15.966009L13.975708,15.966009C13.876709,15.666998 13.576723,15.567007 13.277712,15.567007 12.878725,15.567007 12.47974,15.966009 12.47974,16.465002 12.47974,16.96401 12.878725,17.362997 13.277712,17.362997 13.476686,17.362997 13.776735,17.263006 13.876709,17.064001 14.375732,17.163 15.073729,17.064001 15.57269,17.064001 15.871701,16.664007 15.971676,16.265005 16.171687,15.966009 16.76971,16.763998 16.670711,18.161003 17.767694,18.660011 18.166679,18.361 18.266715,17.961998 18.366691,17.463003 18.566703,16.066 18.865714,14.569006 19.065725,13.071996 19.065725,12.873006 19.164724,11.675008 19.264699,11.375997 19.464712,14.069998 19.763723,17.761999 19.963674,20.556007 20.062671,21.354011 20.262683,21.554008 20.861682,21.953011 21.360704,21.554008 21.459703,21.454002 21.659715,20.855003 21.958665,20.157005 22.0587,19.359001 22.258712,18.560005 22.757675,18.461006 23.75572,18.760002 24.353679,18.461006 24.852703,17.662008 25.052713,16.364996 25.4517,15.567007 25.750711,16.066 25.950662,16.763998 26.249671,17.163L28.844699,17.163C28.445651,17.761999 27.846654,18.361 27.447667,18.760002 24.253703,22.352013 20.162708,25.545008 16.071712,27.641001 10.982733,24.84701 5.6937417,20.955009 2.4007186,15.567007 0.90371192,13.071996 -0.79226869,8.9810066 0.40475065,5.3889946 0.60476232,4.8900012 0.90371192,4.4899921 1.2037603,3.9909992 2.4007183,1.7959909 5.0947441,2.1702817E-07 8.0886959,0z"
Fill="Red"
HeightRequest="24"
HorizontalOptions="Start"
Stroke="Yellow"
VerticalOptions="Start"
HeightRequest="24"
WidthRequest="24"
Data="M8.0886959,0L8.687694,0C12.279728,0.2989963 14.275696,2.2949993 15.971676,4.9890003 16.271724,4.5899982 16.470699,4.1909961 16.670711,3.8920001 18.765678,0.89799553 23.056684,-1.0980074 27.247655,0.79800445 28.544711,1.3970038 29.842683,2.2949993 30.740692,3.5919966 31.239652,4.3909931 31.837675,5.6880059 31.93765,6.8849973 32.336696,10.677006 30.740692,13.470998 29.442659,15.866003L26.648658,15.866003C26.149696,15.168005 26.050697,14.069998 25.351663,13.571004 24.453716,14.369009 24.353679,15.966009 23.75572,17.064001 23.156721,17.263006 22.457687,16.96401 21.759691,17.163 21.260667,17.761999 20.960681,19.359001 20.761707,20.257011 20.761707,19.458 20.561695,17.761999 20.462695,16.664007 20.262683,14.668997 20.162708,12.472997 19.963674,10.278004 19.863698,9.3800086 19.963674,8.1830015 19.164724,8.1830015 18.566703,8.1830015 18.466728,9.3800086 18.466728,9.9790077 18.266715,12.07401 17.867731,14.27001 17.468683,16.465002 16.969722,15.467001 16.670711,14.27001 16.171687,14.27001 15.57269,14.668997 15.27368,15.36701 14.973692,15.966009L13.975708,15.966009C13.876709,15.666998 13.576723,15.567007 13.277712,15.567007 12.878725,15.567007 12.47974,15.966009 12.47974,16.465002 12.47974,16.96401 12.878725,17.362997 13.277712,17.362997 13.476686,17.362997 13.776735,17.263006 13.876709,17.064001 14.375732,17.163 15.073729,17.064001 15.57269,17.064001 15.871701,16.664007 15.971676,16.265005 16.171687,15.966009 16.76971,16.763998 16.670711,18.161003 17.767694,18.660011 18.166679,18.361 18.266715,17.961998 18.366691,17.463003 18.566703,16.066 18.865714,14.569006 19.065725,13.071996 19.065725,12.873006 19.164724,11.675008 19.264699,11.375997 19.464712,14.069998 19.763723,17.761999 19.963674,20.556007 20.062671,21.354011 20.262683,21.554008 20.861682,21.953011 21.360704,21.554008 21.459703,21.454002 21.659715,20.855003 21.958665,20.157005 22.0587,19.359001 22.258712,18.560005 22.757675,18.461006 23.75572,18.760002 24.353679,18.461006 24.852703,17.662008 25.052713,16.364996 25.4517,15.567007 25.750711,16.066 25.950662,16.763998 26.249671,17.163L28.844699,17.163C28.445651,17.761999 27.846654,18.361 27.447667,18.760002 24.253703,22.352013 20.162708,25.545008 16.071712,27.641001 10.982733,24.84701 5.6937417,20.955009 2.4007186,15.567007 0.90371192,13.071996 -0.79226869,8.9810066 0.40475065,5.3889946 0.60476232,4.8900012 0.90371192,4.4899921 1.2037603,3.9909992 2.4007183,1.7959909 5.0947441,2.1702817E-07 8.0886959,0z" />
WidthRequest="24" />

</Grid>
<Grid
ColumnDefinitions="Auto"
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
HeightRequest="62"
SemanticProperties.Description="Sample large AvatarView showing using a local image."
Style="{StaticResource AvatarViewImagesLargeLocal}"
WidthRequest="62" />
<Path
<Path
Grid.Row="0"
Grid.Column="0"
Stroke="Black"
Aspect="Uniform"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z M0,16.207977L11.904009,16.207977 11.904009,29.900984 0,28.657984z M11.904036,2.0979624L11.904036,14.202982 2.7656555E-05,14.202982 2.7656555E-05,3.3409645z M32.000058,0L32.000058,14.203001 13.909059,14.203001 13.909059,1.8890382z"
HeightRequest="24"
HorizontalOptions="End"
Stroke="Black"
VerticalOptions="End"
HeightRequest="24"
WidthRequest="24"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z M0,16.207977L11.904009,16.207977 11.904009,29.900984 0,28.657984z M11.904036,2.0979624L11.904036,14.202982 2.7656555E-05,14.202982 2.7656555E-05,3.3409645z M32.000058,0L32.000058,14.203001 13.909059,14.203001 13.909059,1.8890382z" />
WidthRequest="24" />
</Grid>
<mct:AvatarView
HeightRequest="62"
SemanticProperties.Description="Sample large AvatarView showing using a URL image."
Style="{StaticResource AvatarViewImagesLarge}"
WidthRequest="62">
<mct:AvatarView.ImageSource>
<UriImageSource
<mct:AvatarView.ImageSource>
<UriImageSource
CacheValidity="1"
CachingEnabled="True"
Uri="https://aka.ms/campus.jpg" />
</mct:AvatarView.ImageSource>
</mct:AvatarView>
</mct:AvatarView.ImageSource>
</mct:AvatarView>
<Grid
ColumnDefinitions="Auto"
HorizontalOptions="Center"
RowDefinitions="Auto">
<mct:AvatarView
Padding="10"
BorderColor="Blue"
BorderWidth="3"
HeightRequest="62"
SemanticProperties.Description="Sample large AvatarView showing using a local image, with a border of 3 and padding 10."
Style="{StaticResource AvatarViewImagesLargeLocal}"
WidthRequest="62" />
<Path
Grid.Row="0"
Grid.Column="0"
Aspect="Uniform"
Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z M0,16.207977L11.904009,16.207977 11.904009,29.900984 0,28.657984z M11.904036,2.0979624L11.904036,14.202982 2.7656555E-05,14.202982 2.7656555E-05,3.3409645z M32.000058,0L32.000058,14.203001 13.909059,14.203001 13.909059,1.8890382z"
HeightRequest="24"
HorizontalOptions="End"
Stroke="Black"
VerticalOptions="End"
WidthRequest="24" />
</Grid>
</VerticalStackLayout>
</pages:BasePage>
4 changes: 2 additions & 2 deletions src/CommunityToolkit.Maui.UnitTests/Mocks/MockApplication.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ namespace CommunityToolkit.Maui.UnitTests.Mocks;

class MockApplication : Application, IPlatformApplication
{
#pragma warning disable CS0612 // Type or member is obsolete
public MockApplication(IServiceProvider serviceProvider)
#pragma warning restore CS0612 // Type or member is obsolete
{
Services = serviceProvider;
#pragma warning disable CS0612 // Type or member is obsolete
DependencyService.Register<ISystemResourcesProvider, MockResourcesProvider>();
#pragma warning restore CS0612 // Type or member is obsolete
}

public IApplication Application => this;
Expand Down
69 changes: 44 additions & 25 deletions src/CommunityToolkit.Maui.UnitTests/Views/AvatarView/AvatarViewImageTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,40 +121,57 @@ public void ImageSourceIsNotEmpty()
[Fact]
public void ImageSourceParentSize_WhenStrokeShapeNotSet()
{
var source = new UriImageSource()
{
Uri = new Uri("https://aka.ms/campus.jpg"),
};
const int borderWidth = 5;
const int widthRequest = 73;
const int heightRequest = 37;
const int layoutDiameter = widthRequest;
var padding = new Thickness(0, 5, 10, 15);

var avatarView = new Maui.Views.AvatarView
{
WidthRequest = 73,
HeightRequest = 37,
ImageSource = source
Padding = padding,
BorderWidth = borderWidth,
WidthRequest = widthRequest,
HeightRequest = heightRequest,
ImageSource = new UriImageSource
{
Uri = new Uri("https://aka.ms/campus.jpg"),
}
};
avatarView.Layout(new Rect(0, 0, 73, 73));
avatarView.Layout(new Rect(0, 0, layoutDiameter, layoutDiameter));

avatarView.ImageSource.Should().NotBeNull();
avatarView.Content.Should().BeOfType<Image>();
if (avatarView.Content is Image avatarImage)
if (avatarView.Content is not Image avatarImage)
{
avatarImage.WidthRequest.Should().Be(73);
avatarImage.HeightRequest.Should().Be(37);

avatarImage.Clip.Should().BeNull();
throw new InvalidCastException($"{nameof(avatarView.Content)} must be of type {nameof(Image)}");
}

avatarImage.WidthRequest.Should().Be(layoutDiameter - (borderWidth * 2) - padding.Left - padding.Right);
avatarImage.HeightRequest.Should().Be(layoutDiameter - (borderWidth * 2) - padding.Top - padding.Bottom);

avatarImage.Clip.Should().BeNull();
}

[Fact]
public void ImageSourceParentSize_WhenStrokeShapeSet()
{
var source = new UriImageSource()
{
Uri = new Uri("https://aka.ms/campus.jpg"),
};
const int borderWidth = 5;
const int widthRequest = 73;
const int heightRequest = 37;
const int layoutDiameter = widthRequest;
var padding = new Thickness(0, 5, 10, 15);

var avatarView = new Maui.Views.AvatarView
{
WidthRequest = 73,
HeightRequest = 37,
ImageSource = source,
Padding = padding,
BorderWidth = borderWidth,
WidthRequest = widthRequest,
HeightRequest = heightRequest,
ImageSource = new UriImageSource()
{
Uri = new Uri("https://aka.ms/campus.jpg"),
},
StrokeShape = new Rectangle
{
Clip = new RectangleGeometry()
Expand All @@ -163,12 +180,14 @@ public void ImageSourceParentSize_WhenStrokeShapeSet()
avatarView.Layout(new Rect(0, 0, 73, 73));
avatarView.ImageSource.Should().NotBeNull();
avatarView.Content.Should().BeOfType<Image>();
if (avatarView.Content is Image avatarImage)

if (avatarView.Content is not Image avatarImage)
{
avatarImage.WidthRequest.Should().Be(73);
avatarImage.HeightRequest.Should().Be(37);

avatarImage.Clip.Should().BeOfType<RectangleGeometry>();
throw new InvalidCastException($"{nameof(avatarView.Content)} must be of type {nameof(Image)}");
}

avatarImage.WidthRequest.Should().Be(layoutDiameter - (borderWidth * 2) - padding.Left - padding.Right);
avatarImage.HeightRequest.Should().Be(layoutDiameter - (borderWidth * 2) - padding.Top - padding.Bottom);
avatarImage.Clip.Should().BeOfType<RectangleGeometry>();
}
}
2 changes: 2 additions & 0 deletions src/CommunityToolkit.Maui/Views/AvatarView.shared.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,8 @@ void HandlePropertyChanged(object? sender, PropertyChangedEventArgs e)
#endif
double imageWidth = Width - (StrokeThickness * 2) - Padding.Left - Padding.Right;
double imageHeight = Height - (StrokeThickness * 2) - Padding.Top - Padding.Bottom;
avatarImage.WidthRequest = imageWidth;
avatarImage.HeightRequest = imageHeight;

if (!OperatingSystem.IsIOS() && !OperatingSystem.IsMacCatalyst() && !OperatingSystem.IsMacOS())
{
Expand Down