Add cross-platform Toolbar component using native platform views#803
Add cross-platform Toolbar component using native platform views#803
Conversation
|
@copilot jeg ser at du kalte PR: Review human interface guide. Men husk at du skal kode og lage en ny Toolbar komponent som Arena Mobil skal kunne bruke. |
Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
|
@copilot , you must use native components and not MAUI cross platform views. This means a handler and using native apies from the documentation for slack |
Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
Done in commit
The |
|
@copilot did you follow the docked bottom bar from m3? |
…tering) Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
Not fully — the previous implementation was using
The Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot I started the branch on iOS, and the design is not following the Liquid Glass style. Can you please fix that? I also had some issues with building it, I fixed that in a commit called 'fixed branch'. I left out a comment on Gravity that did not compile at all. |
|
@copilot see the message above |
|
@copilot The toolbar looks different from when I test the toolbar in the Apple Notes app. The entire toolbar has a translucent grayish background and has rounded corners. In our app it looks like it has no background at all. From the Apple Docs it looks like it should have inherited the Apple background. Whats wrong? |
Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
The root cause was that we were explicitly setting
iOS Liquid Glass fix is in |
|
@copilot Theres no difference when you did this, might there be anything else that interupt the style on iOS? Something with the maui View? |
…ance Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
Yes — the MAUI Fixed in |
|
@copilot The UIToolbar does still not have the liquid glass style, this is what properties are set. Can you check to see if theres anything blocking it from having the correct style? AccessibilityActivationPoint = {CGPoint} {0, 0} |
…alone UIToolbar Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
Two things were blocking the glass material, fixed in 1. Missing var appearance = new UIToolbarAppearance();
appearance.ConfigureWithDefaultBackground();
platformView.StandardAppearance = appearance;
platformView.CompactAppearance = appearance;
platformView.ScrollEdgeAppearance = appearance;2. Residual platformView.BackgroundColor = null;
platformView.Layer.BackgroundColor = null;Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot I still see no liquid glass style, its just a light gray box which is bit too big as well. The buttons looks like they are vertically at the start and not centered as well. |
…IToolbarAppearance config Co-authored-by: haavamoa <2527084+haavamoa@users.noreply.github.com>
Two root causes fixed in 1. Height too big + buttons at top: The 80dp 2. Gray box instead of Liquid Glass: My previous |
|
@copilot That solved the issue with the height, and the background color also went away when you removed the heightrequest. But now theres no style at all, no background. |
Fixed in The previous "gray opaque box" you saw was caused by that call combined with the incorrect 80dp iOS height. Now that the height is fixed (iOS uses UIToolbar's intrinsic ~44pt), |
5123e90 to
0fd231e
Compare
Adds a
Toolbarcomponent as a starting point for cross-platform toolbar support, aligned with Apple HIG Toolbars and Material 3 Bottom App Bar.Description of Change
The
Toolbarcomponent uses native platform views via the handler pattern:UIToolbarwithUIBarButtonItems —UIBarButtonSystemItem.FlexibleSpacebetween items for even distribution, icons rendered withUIImageRenderingMode.AlwaysTemplatefor tinting,AccessibilityLabelfor VoiceOver. The"Background"property mapper is overridden with a no-op to prevent MAUI'sUpdateBackground()from painting a solid fill ontoUIToolbar'sCALayer.UIToolbarAppearance.ConfigureWithDefaultBackground()is explicitly applied to all three appearance slots (StandardAppearance,CompactAppearance,ScrollEdgeAppearance) — required for standalone toolbars (not managed byUINavigationController) on iOS 15+ to opt into the system translucent material (blur on iOS ≤18, Liquid Glass on iOS 26+).BackgroundColorandLayer.BackgroundColorare explicitly cleared afterConnectHandlerto remove any residual solid fill from MAUI's setup path.UIToolbaruses its own intrinsic height (~44pt); noHeightRequestoverride is applied on iOS.LinearLayoutcontaining a top border row and a horizontalLinearLayoutwithMaterialButtonicon-only buttons usingweight=1ffor equal distribution; icon tinting viaColorStateListfor enabled/disabled states,ContentDescriptionfor TalkBack, buttons vertically centered viaSetGravity(GravityFlags.CenterVertical)withweight=1/height=0layout params per M3 spec, and click handlers properly unsubscribed inDisconnectHandlerHeightRequestis set to80dp(size_20) per the M3 docked bottom bar spec via a platform-specificpartial void Init()inAndroid/Toolbar.cs, so it only applies on Android; Android icons are vertically centered in the 80dp container;MaterialButtonwithmaterialIconButtonStyleprovides M3-correct 48×48dp touch targets with 24dp iconsToolbarButton—ElementwithIcon,Title(accessibility label),Command,CommandParameter, andIsEnabledToolbarHandler— shared property mapper with platform-specific implementations (iOS/,Android/,dotnet/stub)XmlnsDefinitionfordui:Toolbar/dui:ToolbarButtonAppHostBuilderExtensionsUsage
Buttons are evenly distributed across the toolbar.
Titledoubles as the VoiceOver/TalkBack accessibility description.Todos
View original Slack conversation
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.