Fixed iOS button flickering animation with is Top or Bottom ContentLayout when text it updated at run time #25662
Conversation
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
jsuarezruiz
added
area-layout
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
Very interesting find :) |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
Compared to the previous button content alignment behavior, my fix causes the image to shift by 1 pixel. As a result, some test cases failed on the iOS platform. Therefore, I replaced the images with new ones generated by CI. |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
jsuarezruiz
requested changes
Nov 22, 2024
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/rebase |
|
@tj-devel709 this looks like a reasonable change to me... any concerns with the approach here? |
github-actions
bot
force-pushed
the
fix-25487
branch
from
fccde3d to
dcd6141
Compare
There was a problem hiding this comment.
Copilot reviewed 21 out of 22 changed files in this pull request and generated no suggestions.
Files not reviewed (1)
- src/Controls/tests/TestCases.HostApp/Issues/Issue25487.xaml: Language not supported
Comments skipped due to low confidence (2)
src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue25487.cs:18
- The test case should explicitly verify that the flickering issue is resolved by checking the button's position before and after the text change.
App.Tap("ToggleTextButton");
src/Controls/tests/TestCases.HostApp/Issues/Issue25487.xaml.cs:11
- [nitpick] The variable name '_isToggled' is ambiguous. It should be renamed to '_isButtonTextToggled' to better describe its purpose.
bool _isToggled;
NirmalKumarYuvaraj
added
the
partner/syncfusion
|
Azure Pipelines successfully started running 3 pipeline(s). |
NirmalKumarYuvaraj
changed the title
NirmalKumarYuvaraj
changed the title
|
This PR issue has already been resolved with this PR #26018, so we can close it. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue Details
Modifying a button's text from a long string to a short one (or vice versa) with the image and content layout set to 'Top' causes the image to shift momentarily from the center to the start position before returning to the center.
Root Cause
When the button content layout is set to 'top' or 'bottom,' the ImageInsets adjusts based on the text width. Whenever the text width changes, this causes the ImageInsets to be modified in real-time, resulting in an image flicker when updating the text.
Description of Change
If the content layout is set to 'Top' or 'Bottom,' we can calculate the image insets for the button based on its width and the image width.
Validated the behaviour in the following platforms
Issues Fixed
Fixes #25487
Output
Before.IOS.mov
After.IOS.mov
Before.MAC.mov
After.Mac.mov
Android
Android.mov