Fixed improper rendering of ThumbimageSource in Slider by NirmalKumarYuvaraj · Pull Request #27472 · dotnet/maui

NirmalKumarYuvaraj · 2025-01-30T12:33:47Z

Issue Details

The ThumbImage set on the slider is rendering too large in view.

Root Cause

The image source dimensions are not being properly scaled .

Description of Change

Implementing a custom resizing logic to resize the image before rendering it on the slider to ensure optimal display and improve user experience.

Validated the behaviour in the following platforms

Android
Windows
iOS
Mac

Issues Fixed

Fixes #13258

Output

Before	After

jsuarezruiz

Seeing the behavior on Android and iOS makes me doubt, does it not happen on Windows? Is it not necessary to resize?

jsuarezruiz · 2025-01-30T12:47:41Z

src/Core/src/Platform/Android/SliderExtensions.cs

+					if (thumbDrawable is BitmapDrawable bitmapDrawable && bitmapDrawable.Bitmap is { } bitmap)
+					{
+						// Define the target size for the thumb image
+						const int TARGET_SIZE = 48; // 48dp - default size of the thumb in Android


Could we get the size from the default thumb drawable and avoid set a specific size here?

@jsuarezruiz ,Using the default thumbsize causes the image to be appear bigger in the view. So i have used the value 48 which will be the default height and width of the thumb.Please let me know if you have any concerns.

code snippet:

var defaultThumbSize = context.GetDrawable(Resource.Drawable.abc_seekbar_thumb_material); var thumbImage = bitmap.Downsize(defaultThumbSize!.IntrinsicWidth, defaultThumbSize.IntrinsicHeight);

Can the const be at the top of the file along with a comment as to where the number came from? Is it from some android xml theme file?

Also, what do you mean by "Using the default thumbsize causes the image to be appear bigger in the view"?

I think Javier is meaning can you read the value from the slider? Like, is there a slider.GetThumb method?

@mattleibow , The seekBar.Thumb?.IntrinsicHeight and IntrinsicWidth return a value of 47 before resizing the thumb. To avoid pixel discrepancies, I rounded this to 48 and made it a constant value. I researched documentation regarding the thumb size. Material Design 2 (circular) suggests that the radius should be 10dp, whereas Material Design 3 (vertically positioned rectangle) recommends a height of 44dp and a width of 4dp. Could you please confirm which approach we should proceed with?

Material 2 - https://m2.material.io/components/sliders/android#discrete-slider
Material 3 - https://m3.material.io/components/sliders/specs

jsuarezruiz · 2025-01-30T12:48:09Z

src/Core/src/Platform/iOS/SliderExtensions.cs

-				var thumbImage = result?.Value;
-
+				var thumbImageSize = result?.Value.Size ?? CGSize.Empty;
+				const float TARGET_SIZE = 28f;


Same as Android comment.

I have updated the measure logic. Please let me know if you have any concerns.

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

jsuarezruiz · 2025-02-03T09:47:28Z

/azp run

azure-pipelines · 2025-02-03T09:47:50Z

Azure Pipelines successfully started running 3 pipeline(s).

jsuarezruiz · 2025-02-04T11:28:00Z

src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/SliderShouldChangeThumbImageAndResetIt.png

Test failing on iOS with small differences:

@jsuarezruiz , i have attached the snapshots. please let me know if you have any concerns.

jsuarezruiz · 2025-02-12T10:17:53Z

/azp run

azure-pipelines · 2025-02-12T10:18:15Z

Azure Pipelines successfully started running 3 pipeline(s).

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue13258.cs

jfversluis · 2025-02-19T10:23:23Z

@NirmalKumarYuvaraj please address feedback, thanks!

NirmalKumarYuvaraj · 2025-02-27T11:25:24Z

@NirmalKumarYuvaraj please address feedback, thanks!

@jfversluis , I have addressed the feedback and modified the changes. Please let me know if you have any concern.

jsuarezruiz · 2025-02-27T13:11:18Z

src/Core/src/Platform/Android/SliderExtensions.cs

+			thumbDrawable.SetBounds(0, 0, thumbSize, thumbSize);
+			thumbDrawable.Draw(canvas);
+
+			BitmapDrawable finalDrawable = new BitmapDrawable(context.Resources, bitmap);


Used using statements to ensure proper disposal of BitmapDrawable:

using (BitmapDrawable finalDrawable = new BitmapDrawable(context.Resources, bitmap)) { seekBar.SetThumb(finalDrawable); }

@jsuarezruiz , I have updated the code changes. please let me know if you have any concerns.

src/Core/src/Platform/Android/SliderExtensions.cs

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

jsuarezruiz · 2025-03-07T07:44:37Z

/rebase

jsuarezruiz · 2025-03-07T07:45:51Z

/azp run

azure-pipelines · 2025-03-07T07:46:11Z

Azure Pipelines successfully started running 3 pipeline(s).

rmarinho · 2025-03-18T15:56:01Z

/rebase

rmarinho

Small comments and improvements

src/Core/src/Platform/Android/SliderExtensions.cs

src/Graphics/src/Graphics/Platforms/iOS/UIImageExtensions.cs

src/Core/src/Platform/iOS/SliderExtensions.cs

jsuarezruiz · 2025-07-01T07:00:17Z

/azp run MAUI-UITests-public

azure-pipelines · 2025-07-01T07:01:01Z

Azure Pipelines successfully started running 1 pipeline(s).

jsuarezruiz · 2025-07-01T07:10:31Z

src/Core/src/Platform/Android/SliderExtensions.cs

+
+		static void SetThumbDrawable(SeekBar seekBar, Android.Content.Context context, Drawable thumbDrawable)
+		{
+			int thumbSize = (int)context.ToPixels(TARGET_SIZE);


// Validate thumb size if (thumbSize <= 0) return;

jsuarezruiz · 2025-07-01T07:12:20Z

src/Core/src/Platform/Android/SliderExtensions.cs

+		}
+
+		static void SetThumbDrawable(SeekBar seekBar, Android.Content.Context context, Drawable thumbDrawable)
+		{


// Check if we're setting the same drawable to avoid unnecessary work if (ReferenceEquals(seekBar.Thumb, thumbDrawable)) return;

Added the code changes

jsuarezruiz

@NirmalKumarYuvaraj Could you rebase and fix the conflicts? Thanks in advance.

kubaflo · 2026-02-14T14:15:22Z

Hi @NirmalKumarYuvaraj looks like a stale PR. Closing it for now, if you feel that this shouldn't be closed then please rebase and reopen

NirmalKumarYuvaraj · 2026-02-16T08:44:38Z

@kubaflo , Could not reopen this PR. so created new one #34064

dotnet-policy-service bot added the community ✨ Community Contribution label Jan 30, 2025

jsuarezruiz added the area-controls-slider Slider label Jan 30, 2025

jsuarezruiz suggested changes Jan 30, 2025

View reviewed changes

sheiksyedm added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Jan 30, 2025

NirmalKumarYuvaraj marked this pull request as ready for review February 4, 2025 04:49

NirmalKumarYuvaraj requested a review from a team as a code owner February 4, 2025 04:49

NirmalKumarYuvaraj requested review from PureWeen and mattleibow February 4, 2025 04:49

jsuarezruiz suggested changes Feb 4, 2025

View reviewed changes

jsuarezruiz suggested changes Feb 12, 2025

View reviewed changes

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue13258.cs Outdated Show resolved Hide resolved

jsuarezruiz suggested changes Feb 27, 2025

View reviewed changes

jfversluis added this to the .NET 9 SR6 milestone Feb 28, 2025

jfversluis requested a review from jsuarezruiz February 28, 2025 13:48

github-actions bot force-pushed the fix-13258 branch from 928250f to 357ae53 Compare March 7, 2025 07:45

PureWeen added this to MAUI SDK Ongoing Mar 18, 2025

github-project-automation bot moved this to Todo in MAUI SDK Ongoing Mar 18, 2025

PureWeen moved this from Todo to Ready To Review in MAUI SDK Ongoing Mar 18, 2025

github-actions bot force-pushed the fix-13258 branch from 357ae53 to 9a4eb81 Compare March 18, 2025 15:56

rmarinho requested changes Mar 18, 2025

View reviewed changes

github-project-automation bot moved this from Ready To Review to Changes Requested in MAUI SDK Ongoing Mar 18, 2025

NirmalKumarYuvaraj added 6 commits June 26, 2025 10:13

Added snap shots

4343440

Update SliderExtensions.cs

d7194e8

Updated code changes

79fe6fb

updated snaps

59a67a3

added issue link to script file

8565a38

Resaved Mac snaps

4602a97

NirmalKumarYuvaraj force-pushed the fix-13258 branch from 46d5b62 to 4602a97 Compare June 26, 2025 04:43

Update SliderExtensions.cs

64a5b7d

jsuarezruiz reviewed Jul 1, 2025

View reviewed changes

Update SliderExtensions.cs

51cfa6c

PureWeen modified the milestones: .NET 9 SR9, .NET 9 SR10 Jul 3, 2025

PureWeen modified the milestones: .NET 9 SR10, .NET 9 SR12 Aug 4, 2025

PureWeen modified the milestones: .NET 9 SR12, .NET 10 SR1 Sep 10, 2025

jsuarezruiz reviewed Oct 31, 2025

View reviewed changes

PureWeen modified the milestones: .NET 10 SR1, .NET 10.0 SR2 Nov 4, 2025

PureWeen modified the milestones: .NET 10.0 SR2, .NET 10 SR4 Dec 13, 2025

PureWeen modified the milestones: .NET 10.0 SR4, .NET 10 SR5 Jan 21, 2026

kubaflo closed this Feb 14, 2026

github-project-automation bot moved this from Changes Requested to Done in MAUI SDK Ongoing Feb 14, 2026

NirmalKumarYuvaraj mentioned this pull request Feb 16, 2026

Fixed improper rendering of ThumbimageSource in Slider #34064

Open

Conversation

NirmalKumarYuvaraj commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue Details

Root Cause

Description of Change

Issues Fixed

Output

Uh oh!

jsuarezruiz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jsuarezruiz commented Feb 3, 2025

Uh oh!

azure-pipelines bot commented Feb 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Feb 12, 2025

Uh oh!

azure-pipelines bot commented Feb 12, 2025

Uh oh!

Uh oh!

jfversluis commented Feb 19, 2025

Uh oh!

NirmalKumarYuvaraj commented Feb 27, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jsuarezruiz commented Mar 7, 2025

Uh oh!

jsuarezruiz commented Mar 7, 2025

Uh oh!

azure-pipelines bot commented Mar 7, 2025

Uh oh!

rmarinho commented Mar 18, 2025

Uh oh!

rmarinho left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jsuarezruiz commented Jul 1, 2025

Uh oh!

azure-pipelines bot commented Jul 1, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz left a comment

Choose a reason for hiding this comment

NirmalKumarYuvaraj commented Jan 30, 2025 •

edited

Loading