Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

Adds UWP support to Shell #6015

Merged
merged 48 commits into from
Sep 17, 2019
Merged

Adds UWP support to Shell #6015

merged 48 commits into from
Sep 17, 2019

Conversation

dotMorten
Copy link
Contributor

@dotMorten dotMorten commented Apr 26, 2019

This is a replacement PR of #5936 (I messed up the rebase). There's some good discussions in that PR though.

Description of Change

This is the first stab at adding UWP renderers for Shell

Issues Resolved

#2415

API Changes

public class ShellRenderer : NavigationView, IVisualElementRenderer, IAppearanceObserver, IFlyoutBehaviorObserver
{
   public ShellRenderer();
   protected internal Shell Element { get; private set; }
   protected virtual void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e);
   protected virtual void OnElementSet(Shell shell);   
}
[EditorBrowsable(EditorBrowsableState.Never)]
public sealed class ShellSectionRenderer : NavigationView, IAppearanceObserver
{
}
public class ToolbarItemRenderer : Windows.UI.Xaml.Controls.Button
{
	public ToolbarItemRenderer();
	public ToolbarItem ToolbarItem { get; set; }
	public static readonly DependencyProperty ToolbarItemProperty;
}
public static class PageExtensions
{
   // Added overload that allows specifying the page transition animation
   public static bool Navigate(this Windows.UI.Xaml.Controls.Frame frame, ContentPage page, Windows.UI.Xaml.Media.Animation.NavigationTransitionInfo infoOverride);
}

Known issues while it's a draft-PR:

  • 1. Navigation isn't working fully working.
  • 2. Only FileImageSource are supported for icons (limitation of NavigationViewItem and AppBarItem - considering to use a different kind) Also see issue Proposal: Create IconSource from Bitmap stream microsoft/microsoft-ui-xaml#601
  • 3. Release builds fail to render the side pane (this one got me stumped, as no errors are reported - it's just completely missing anything but the contents from the visual tree)
  • 4. Toolbar not implemented

It might be worth considering adding the WinUI dependency. This would mean 16299 can be continued to be used, but it does require one extra setup step to add a theme resource to App.xaml, as well as adding the dependency. In the future though, this library is where all new UWP components will be added, so sooner or later that's going to happen anyway.

Platforms Affected

  • UWP

Behavioral/Visual Changes

None

Before/After Screenshots

Before:
image

After (Gastropods, Default Shell Template, Xappy):

Shell_3apps_gif

Note:

Testing Procedure

Use @davidortinau's Gastropods sample. It seems fully functional from what I can tell.
You can also use this repo: https://github.com/dotMorten/Xamarin.Forms.UWPShell.Sample
(the sub-module points to this PR) which includes 3 different Shell samples, as well as the gallery sample.

PR Checklist

  • Has automated tests
  • Rebased on top of the target branch at time of PR
  • Changes adhere to coding standard

@dotMorten dotMorten mentioned this pull request Apr 26, 2019
7 tasks
@dotMorten
Copy link
Contributor Author

dotMorten commented Apr 26, 2019

Not everything in the gallery sample app works. List below screenshot of progress so far.
To run, clone the repo https://github.com/dotMorten/Xamarin.Forms.UWPShell.Sample including the submodule and run the ShellSample.UWP project. Click Controls Gallery then SwapRoot - Store Shell.

If you want to help out, I'd like help with the below unchecked items.

image

Checked = it is working, message after with issue if it's not

@samhouts samhouts added this to In Review in v4.1.0 Apr 26, 2019
@dotMorten dotMorten marked this pull request as ready for review April 29, 2019 15:41
@dotMorten dotMorten mentioned this pull request May 5, 2019
26 tasks
@samhouts samhouts added this to In Review in v4.2.0 May 29, 2019
@samhouts samhouts removed this from In Review in v4.1.0 May 29, 2019
@PureWeen PureWeen mentioned this pull request Jun 3, 2019
@mzhukovs
Copy link

mzhukovs commented Jun 6, 2019

Really glad to see that someone is making the effort to support to UWP, and I am sure many others are as well. Just wondering if there is any sense of when this would make it into a preview/release?

@dotMorten
Copy link
Contributor Author

We're hoping to do a live-streamed code-review next week

@dgerding
Copy link

Any updates? Really at a WAIT AND SEE attitude with Xamarin Forms until there is equal ground development footing for Windows platforms (UWP) alongside XF iOS and XF Android.

@sharpwood
Copy link

When can this project update this feature to the visual studio template?

@dotMorten
Copy link
Contributor Author

@dgerding sorry we're a little delayed. I'm overwhelmed and hard to find common time do the PR Review.
@sharpwood first it'll have to be merged, then probably a few more fixes here and there (this PR gets us ~80% there). I'm assuming you won't see it in the template until after this ships in a real release, but you can easily add it yourself afterwards.

@samhouts samhouts removed the request for review from paymicro June 17, 2019 22:10
@Spookenator
Copy link

Hey guys! Wondering what the status of this is.
Really excited about using the shell in UWP.

@SebastianKruseWago
Copy link

Is there any ETA for Shell in UWP?

@dotMorten
Copy link
Contributor Author

I'm sorry this haven't moved faster. I hit some regressions when syncing up with master, and I've been completely swamped with work and family-related stuff, so just haven't had much time to really sit down and try and address it. However I'm more than happy to take PRs for my branch.

Copy link
Contributor Author

@dotMorten dotMorten left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh! My dirty laundry!

Copy link
Member

@rmarinho rmarinho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple of small changes, it works fine locally.

Xamarin.Forms.Platform.UAP/PageExtensions.cs Outdated Show resolved Hide resolved
Xamarin.Forms.Platform.UAP/Shell/ShellHeaderRenderer.cs Outdated Show resolved Hide resolved
Xamarin.Forms.Platform.UAP/Shell/ShellHeaderRenderer.cs Outdated Show resolved Hide resolved
Xamarin.Forms.Platform.UAP/Shell/ShellRenderer.cs Outdated Show resolved Hide resolved
Xamarin.Forms.Platform.UAP/Shell/ShellRenderer.cs Outdated Show resolved Hide resolved
Xamarin.Forms.Platform.UAP/Shell/ShellRenderer.cs Outdated Show resolved Hide resolved
v4.3.0 automation moved this from In Progress to In Review Sep 16, 2019
@samhouts samhouts moved this from In Review to In Progress in v4.3.0 Sep 16, 2019
@samhouts samhouts removed the DO-NOT-MERGE-!!! 🛑 This is in progress and needs to be updated before it can be merged. label Sep 17, 2019
@rmarinho rmarinho merged commit aeafec9 into xamarin:4.3.0 Sep 17, 2019
v4.3.0 automation moved this from In Progress to Done Sep 17, 2019
@dotMorten
Copy link
Contributor Author

image

@samhouts samhouts added this to the 4.3.0 milestone Sep 18, 2019
@dotMorten dotMorten deleted the uwp-shell-2 branch September 19, 2019 04:56
@dgerding
Copy link

Hi All,
Just wondering if I should try and add a "uwp + shell" project by following the uwp wireup demoed in
https://github.com/dotMorten/Xamarin.Forms.UWPShell.Sample

Thanks again for all the hard work.

@PureWeen
Copy link
Contributor

@dgerding just follow the steps here https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/windows/installation/ to add a UWP project

We'll have the UWP project as part of the VS templates at some point in the nearish future

@dgerding
Copy link

Thanks @PureWeen

@dgerding
Copy link

dgerding commented Sep 28, 2019

I have a new VS2019 16.3 Xamarin Forms solution using the standard project template and have added a UWP project. Thanks to help from @PureWeen I've got it running. I know UWP support is going to take time and wasn't sure where the right place to report a likely bug.

Short version: The "Add" button in the upper right corner of the Items page in the stock project isn't showing up in UWP... but it does for the Android project. (Can't test iOS yet without a new build machine. )

I'll poke at it a bit more. Any guidance on reporting this in right place appreciated.

image

@PureWeen
Copy link
Contributor

PureWeen commented Sep 28, 2019

@dgerding If you could log a new issue here https://github.com/xamarin/Xamarin.Forms/issues/new/choose with a sample that would awesome!!

We merged the larger body of work so that we can start breaking out the work to be done into smaller issues that we and the community can collectively address.

Just log everything you find that you think is incorrect.

@dgerding
Copy link

Posted a bug report here, #7735, but for those interested, there is a zipped solution attached to that report that anyone can use as a temporary quick start for Xamarin Forms + Shell +UWP.

felipebaltazar pushed a commit to felipebaltazar/Xamarin.Forms that referenced this pull request Oct 16, 2019
* Some basics to get started

* more renderers

* Fix titlebar color

* More shell stuff working

* Hacked some more UI in

* Fix null ref issue

* Move renderer registration outside common code (for now)

* Re-write of the renderers to better use a cleaner UWP approach

* Moved functionality around, bug fixesetc

* Added null check

* Added null-check on appearance and use default colors as fallback

* Handle change in flyout behavior to correctly turn the flyout on/off

* Handle the TabBarIsVisible property

* code formatting

* Ensure FlyoutHeader isn't show if the app starts up with a minimal pane

*  Throw if used on versions lower than Windows 10 1809

* Added null-check for when ShellContent isn't set

* Support tabs in FlyoutItems with Display AsMultipleItems by using the generated FlyoutGroupings instead

* Improve pane behavior and styling

* Undo Android change used during testing

* Fix platform support check

* Use FileImageSourcePathConverter on NavigationViewItem instead of a custom control (so I deleted ShellNavigationViewItemRenderer which is no longer needed).
Ensure `FileImageSourcePathConverter` won't throw if it didn't get a FileImageSource.
Move the flyout data templates into a resource so they can be overridden and compiled.

* Delete renamed file

* Use a resource instead of parsing a string template

* Handle search box property changes

* Update page title on property change

* Update bottombar when shellitems change

* Guard against API usage not present

* Platform check comments

* Fix problem running in release mode (use Bindable to generate XamlMetadata

* Trigger rebind of menu items source when collection changes

* Added support for Toolbar

* Fix searchbox behavior (still lacks expand/collapse feature)

* Add overload for defining the navigation transition

* Use different navigation transitions based on navigatin direction

* Hides header with show / hide nav command

* collapses header area on hide nav

* Move to use WinUI

* Fix runtime issues after merge.

* - rebase fixes

* - rebase fixes

* - fix spaces/tabs

* - flags, hide apis, delete assembly info

* - set flag on UWP CG

* - expose renderer creations and make them all public

* - formatting fixes

* - address PR comments

* - fix header so it's full width and swappable
felipebaltazar pushed a commit to felipebaltazar/Xamarin.Forms that referenced this pull request Oct 16, 2019
* Some basics to get started

* more renderers

* Fix titlebar color

* More shell stuff working

* Hacked some more UI in

* Fix null ref issue

* Move renderer registration outside common code (for now)

* Re-write of the renderers to better use a cleaner UWP approach

* Moved functionality around, bug fixesetc

* Added null check

* Added null-check on appearance and use default colors as fallback

* Handle change in flyout behavior to correctly turn the flyout on/off

* Handle the TabBarIsVisible property

* code formatting

* Ensure FlyoutHeader isn't show if the app starts up with a minimal pane

*  Throw if used on versions lower than Windows 10 1809

* Added null-check for when ShellContent isn't set

* Support tabs in FlyoutItems with Display AsMultipleItems by using the generated FlyoutGroupings instead

* Improve pane behavior and styling

* Undo Android change used during testing

* Fix platform support check

* Use FileImageSourcePathConverter on NavigationViewItem instead of a custom control (so I deleted ShellNavigationViewItemRenderer which is no longer needed).
Ensure `FileImageSourcePathConverter` won't throw if it didn't get a FileImageSource.
Move the flyout data templates into a resource so they can be overridden and compiled.

* Delete renamed file

* Use a resource instead of parsing a string template

* Handle search box property changes

* Update page title on property change

* Update bottombar when shellitems change

* Guard against API usage not present

* Platform check comments

* Fix problem running in release mode (use Bindable to generate XamlMetadata

* Trigger rebind of menu items source when collection changes

* Added support for Toolbar

* Fix searchbox behavior (still lacks expand/collapse feature)

* Add overload for defining the navigation transition

* Use different navigation transitions based on navigatin direction

* Hides header with show / hide nav command

* collapses header area on hide nav

* Move to use WinUI

* Fix runtime issues after merge.

* - rebase fixes

* - rebase fixes

* - fix spaces/tabs

* - flags, hide apis, delete assembly info

* - set flag on UWP CG

* - expose renderer creations and make them all public

* - formatting fixes

* - address PR comments

* - fix header so it's full width and swappable
@edamreed
Copy link

Hi, thanks for the good work on this, been waiting for Shell on UWP for a while.

I just switched my xamarin forms app to enable shell on the UWP.
My menu is working on iOS and Android but on UWP renders as below
image

I'm using this syntax:-

<FlyoutItem Title="Dashboard">
        <FlyoutItem.Icon>
            <FontImageSource Color="Black" Glyph="{x:Static fa:FAIcons.chart}" FontFamily="{StaticResource FontAwesomeSolid}" Size="30"/>
        </FlyoutItem.Icon>
        <Tab>
            <ShellContent Title="Charts" ContentTemplate="{DataTemplate views:ChartsPage}"/>
        </Tab>
</FlyoutItem>

Am I using something thats not supported?
All NuGet packages are updated to latest stable.

Thanks

@PureWeen
Copy link
Contributor

@edamreed it's still experimental on the UWP side (hence the flag)

We've merged this larger PR in so that we can start addressing the smaller issues more aggressively with more PRs :-)

So if you could log your issue then we can put it out there for someone (or us) to resolve and get merged in

@edamreed
Copy link

edamreed commented Oct 24, 2019

Thanks PureWeen, are the details I entered above enough to log a issue with?

@PureWeen
Copy link
Contributor

@edamreed

#8207

@edamreed
Copy link

Thanks

@HTUlv412
Copy link

Any advance?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
No open projects
v4.3.0
  
Done
Development

Successfully merging this pull request may close these issues.

None yet