dotnet / mobileblazorbindings

Experimental Mobile Blazor Bindings - Build native and hybrid mobile apps with Blazor

Experimental Mobile Blazor Bindings

Getting Started

Check out the documentation for how to build your first app: https://docs.microsoft.com/mobile-blazor-bindings

What is it?

Mobile Blazor Bindings enable developers to build native and hybrid mobile apps using C# and .NET for Android, iOS, Windows, macOS, and Tizen using familiar web programming patterns. This means you can use the Blazor programming model and Razor syntax to define UI components and behaviors of an application. The UI components that are included are based on Xamarin.Forms native UI controls, which results in beautiful native mobile apps. In hybrid apps you can embed Blazor web UI built with HTML directly in the app in any composition, all running in the same app process. No web servers.

Here is a sample Counter component that renders native UI, which may look familiar to Blazor developers, that increments a value on each button press:

<StackLayout>
    <Label FontSize="30">You pressed @count times </Label>
    <Button Text="+1" OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Notice that the Blazor model is present with code sitting side by side the user interface markup that leverages Razor syntax with mobile specific components. This will feel very natural for any web developer that has ever used Razor syntax in the past. Now with the Experimental Mobile Blazor Bindings you can leverage your existing web skills and knowledge to build native and hybrid mobile apps using C# and .NET for Android, iOS, Windows, macOS, and Tizen.

Here is the code above running in the Android Emulator:

More info on Mobile Blazor Bindings

To get started, all you need is the .NET Core 3.1 SDK, Visual Studio or Visual Studio for Mac, and the ASP.NET and web development and Mobile development with .NET (Xamarin.Forms) workloads installed.

Get started by reading the Getting Started section in the docs and read through the related walkthroughs.

Contributing

As an experimental project, there are several active areas of development and we're looking for your feedback to help set the direction for this project. Please check it out and let us know any feedback you have on the project by logging issues in this repo.

Code of Conduct

This project has adopted the code of conduct defined by the Contributor Covenant to clarify expected behavior in our community.

For more information, see the .NET Foundation Code of Conduct.

Thank you!

mobileblazorbindings's Issues

Build nice looking weather app sample

Something like this: https://github.com/jamesmontemagno/app-pretty-weather

Write "Getting Started with Experimental Forms binding for Blazor" doc

Getting Started with Experimental Forms binding for Blazor

1. Installing the Packages
2. Walkthrough - Hello World
3. The ToDo App Walkthrough
4. Weather App Walkthrough
5. Integrating into an existing Forms App
6. Upcoming Features
7. Advanced: Installing from Source
8. Advanced: Contributing

Support default properties for inner values for things like text

Several control have a Text property where it would be nice to allow it to be set as an inner value.

Before:

<Button FontSize="12" Text="Hello!" />

After:

<Button FontSize="12">
    Hello!
</Button>

Lots of element with a Text property could use this, plus perhaps other properties of other elements.

The <Label> component is a bit trickier because it supports both a Text property as well as inline <Span> elements to produce complex formatted text. So, this issue is to track support for inline text in general, plus adding support for Button.Text and Span.Text. Label's inline text support is tracked here: #87

Ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.XXX' and 'Xamarin.Forms.XXX'

OS: Windows 10 Pro - Build 1903
IDE: Visual Studio 2019 - 16.4.2
.NET SDK: .NET Core 3.1

---

The project builds and runs successfully but there are always these annoying errors in the error window:

Severity	Code	Description	Project	Suppression State
Error	CS0104	'Button' is an ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.Button' and 'Xamarin.Forms.Button'	BlazorMobile	Active
Error	CS0104	'Label' is an ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.Label' and 'Xamarin.Forms.Label'	BlazorMobile	Active
Error	CS0104	'StackLayout' is an ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.StackLayout' and 'Xamarin.Forms.StackLayout'	BlazorMobile	Active
Error	CS0104	'Frame' is an ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.Frame' and 'Xamarin.Forms.Frame'	BlazorMobile	Active

Add Stepper component

Entry Control text property not bound to Component?

I've been playing around with the Bindings example and tried to make a simple Todo App and run into an issue with the Entry component in the bindings library.
It seems the Text property of the control isn't bound to underlying control properly.
To access text I had to do something like so:

var control = ((EntryHandler)InputElement.ElementHandler).EntryControl;
string todo = control.Text;
control.ClearValue(Xamarin.Forms.Entry.TextProperty);

Naturally this means accessing the underlying control which i'd rather not do :)

Is this a known issue?

Rename to Blazor Native

Delegate parent/child responsibility to handlers

Right now the native control manager has built-in knowledge of every parent/child relationship. It should instead delegate (perhaps optionally?) the responsibility to the parent and/or child handlers so they can introspect on things like sibling index, etc.

Ensure null values are supported by all component attributes

Null values are a short-hand for "reset value". Need to go through all Handlers and ensure they reset the native control's property to the appropriate value (e.g. true/false/0/null)

No Razor component template in VS Mac 8.4

Unlike on Windows, I don't see a template to add a .razor template. The only option is the web style.

Q: Xamarin XAML to HTML

I'm loving the concepts of blazor that can be used to create mobile applications using the Xamarin native controls of the mobile platform; I was wondering if there was any view on using the same concept with the Xamarin XAML syntax rendering to HTML a true cross-platform-user-interface render anywhere ;)

great work guys

Support for Cupertino,Fluent,Material UI Component and Custom Controls Cross Platform

Is there a way to use Cupertino widget with MobileBlazor binding on Android just like a Flutter?
Is it planned?
When will Sliders, Progress Bars will be implemented?
Please have a big team working on this technology, its good and in future will Web, Win UI will be supported ??
Like Uno Drop the Bindings Name, please ...
That was too much to ask ...
Really Love Blazor Mobile Technology, good luck and please make it real.

Convert Todo App to match Xamarin.Forms sample functionality

Match what this app does:
https://github.com/xamarin/xamarin-forms-samples/tree/master/Todo/Todo

Create 'dotnet new' project template

• Basic app outline w/ tabs: Counter, About
• Counter.razor component used in main app
• nuget.config to point to AzDO feed
• _Imports.razor

How to support controls that require templates?

Here are the docs for Xamarin.Forms: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/control-templates/creating

To support the nice templated controls such as CollectionView and CarouselView we'll need some way to create templates.

Here's an old commit in a branch where I started poking at this: d18cf9d

Build error on template

I get this error when trying to build the new template Android project.

Can not resolve reference: Microsoft.Bcl.AsyncInterfaces, referenced by System.Text.Json. Please add a NuGet package or assembly reference for Microsoft.Bcl.AsyncInterfaces, or remove the reference to System.Text.Json. FirstMobileBlazorBindingsApp.Android

Can not resolve reference: System.Diagnostics.EventLog, referenced by Microsoft.Extensions.Logging.EventLog. Please add a NuGet package or assembly reference for System.Diagnostics.EventLog, or remove the reference to Microsoft.Extensions.Logging.EventLog. FirstMobileBlazorBindingsApp.Android

A Unit Test Framework for MobileBlazorBindings

I'm very excited to see Blazor and Xamarin.Forms together. I hope this project pass its experimental mode soon so we could use it in production.

I worked with Razor Components Testing Library a little which gives us ability to write unit tests for Blazor components. I was thinking if it's possible to do the same concept for Xamarin.Forms.

I wrote some code as a proof of concept here (MobileBlazorBindings.Tests) and I think it works. We can write some unit tests for Blazor Mobile Components.

This is what a component and a unit test looks like:

<ContentPage>
    <StackLayout>
        <Button Text="Increment" OnClick="IncrementCount" />
        <Label Text="@("The button was clicked " + count + " times")" />
    </StackLayout>
</ContentPage>

@code
{
    int count;
    void IncrementCount()
    {
        count++;
    }
}

var page = await TestContext.Start<Counter>();

var label = page.FindFirst<Label>();
var button = page.FindFirst<Button>();

Assert.Equal("The button was clicked 0 times", label.Text);

button.Click();

Assert.Equal("The button was clicked 1 times", label.Text);
            
button.Click();
button.Click();
            
Assert.Equal("The button was clicked 3 times", label.Text);

Now I want to expand this into a full feature library, but since I'm not too much familiar on how Xamarin Forms internally works, before I start I wanted to ask for guidance to make sure that I'm on the right path. So I would appreciate it anyone could take a moment and checkout the code (MobileBlazorBindings.Tests) and give me a hint.
@Eilon @SteveSandersonMS @jamesmontemagno @egil

Add Shell component

Support High DPI in Blinforms

Tried to enable it quickly in the sample app and BlinFormsHostedService but apparently wasn't enough to make it look correct:

It is high DPI, but controls aren't all rendered at correct size, which makes me think maybe the BlinFormsRenderer needs updating.

Web deployment

For companies that work with Xamarin.Forms for Mobile and with WPF / UWP for Desktop and that we need to deploy to the Web without using JavaScrpit / HTML / CSS, Mobile Blazor Bindings is a great option, however, there is currently a problem: we have to use HTML + CSS to deploy on Web and Desktop (through PWA / Electron) and we have to use XF XAML to deploy on mobile. The ideal situation is to use XF XAML and deploy to all types of devices, not just Mobile (Web + Desktop + Mobile), with a single markup language for the view. This is ideal for companies that come from the desktop world. For companies that come from the web world, it is the other way around, the ideal situation would be to continue using HTML + CSS and deploy to Mobile, without having to learn XF XAML.

This is possible in part now using Xamarin.Forms + Uno Platform WebAssembly Renderers for Xamarin.Forms, the problem is that, on the one hand, UNO Platform is not yet very developed and the tests we have done are not satisfactory either in functionality or in performance, and also, it gives more peace of mind that behind a project of this complexity is Microsoft, not a smaller company.

Make it easier to get to the Xamarin.Forms control from the Blazor component

Add git tag to release commit

Released date and Supporting CSS questions

I'm so happy to see such of project is under development, i have some questions,

• Is this project is planned to be released with .NET 5?

• Is this going to be the final name for the project? because i think it will make more sense to just drop "Bindings" name.

• Do i need to download Xamarin workload to start using "Mobile Blazor"?

• Does it allow me to use full CSS? like including bootstrap and using it in styling?

Thanks in advanced

Add Image component

[iOS] Crash on startup of default template

The app starts to launch, and then crashes. Using the default template.

MobileBlazorBindings: 0.1.173-beta
Xamarin.Forms: 4.3.0
iOS: 13.3

Same app runs fine on Android emulator.

System.PlatformNotSupportedException: Operation is not supported on this platform.
  at System.IO.FileSystemWatcher.StartRaisingEvents () [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.UnknownUnix.cs:23 
  at System.IO.FileSystemWatcher.StartRaisingEventsIfNotDisposed () [0x00019] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.cs:664 
  at System.IO.FileSystemWatcher.set_EnableRaisingEvents (System.Boolean value) [0x0001d] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.cs:163 
  at Microsoft.Extensions.FileProviders.Physical.PhysicalFilesWatcher.TryEnableFileSystemWatcher () [0x00038] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.FileProviders.Physical.PhysicalFilesWatcher.CreateFileChangeToken (System.String filter) [0x00033] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.FileProviders.PhysicalFileProvider.Watch (System.String filter) [0x00024] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.Configuration.FileConfigurationProvider.<.ctor>b__1_0 () [0x00016] in <9ec7d2c6e7554a1f850c7aff61ce2685>:0 
  at Microsoft.Extensions.Primitives.ChangeToken+ChangeTokenRegistration`1[TState]..ctor (System.Func`1[TResult] changeTokenProducer, System.Action`1[T] changeTokenConsumer, System.Action state) [0x0001b] in <188ebf9f0e17409ba16a3263816f0064>:0 
  at Microsoft.Extensions.Primitives.ChangeToken.OnChange (System.Func`1[TResult] changeTokenProducer, System.Action changeTokenConsumer) [0x0001c] in <188ebf9f0e17409ba16a3263816f0064>:0 
  at Microsoft.Extensions.Configuration.FileConfigurationProvider..ctor (Microsoft.Extensions.Configuration.FileConfigurationSource source) [0x00035] in <9ec7d2c6e7554a1f850c7aff61ce2685>:0 
  at Microsoft.Extensions.Configuration.Json.JsonConfigurationProvider..ctor (Microsoft.Extensions.Configuration.Json.JsonConfigurationSource source) [0x00000] in <8ee38c187c6b4daab5dd2c1ede9b3141>:0 
  at Microsoft.Extensions.Configuration.Json.JsonConfigurationSource.Build (Microsoft.Extensions.Configuration.IConfigurationBuilder builder) [0x00007] in <8ee38c187c6b4daab5dd2c1ede9b3141>:0 
  at Microsoft.Extensions.Configuration.ConfigurationBuilder.Build () [0x0001a] in <df2ca259d3bf4c2fa98021b4434110b3>:0 
  at Microsoft.Extensions.Hosting.HostBuilder.BuildAppConfiguration () [0x0005c] in <07930773021a4a4eb35f7d8403f80d9c>:0 
  at Microsoft.Extensions.Hosting.HostBuilder.Build () [0x0002c] in <07930773021a4a4eb35f7d8403f80d9c>:0 
  at FirstMobileBlazorBindingsApp.App..ctor () [0x00008] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp/App.cs:12 
  at FirstMobileBlazorBindingsThread started: <Thread Pool> #6
App.iOS.AppDelegate.FinishedLaunching (UIKit.UIApplication app, Foundation.NSDictionary options) [0x00007] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp.iOS/AppDelegate.cs:26 
  at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)
  at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.3.0/src/Xamarin.iOS/UIKit/UIApplication.cs:86 
  at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0000e] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.3.0/src/Xamarin.iOS/UIKit/UIApplication.cs:65 
  at FirstMobileBlazorBindingsApp.iOS.Application.Main (System.String[] args) [0x00001] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp.iOS/Main.cs:17
2020-01-10 18:28:58.316995-0600 FirstMobileBlazorBindingsApp.iOS[5500:60922] Unhandled managed exception: Operation is not supported on this platform. (System.PlatformNotSupportedException)
  at System.IO.FileSystemWatcher.StartRaisingEvents () [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.UnknownUnix.cs:23 
  at System.IO.FileSystemWatcher.StartRaisingEventsIfNotDisposed () [0x00019] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.cs:664 
  at System.IO.FileSystemWatcher.set_EnableRaisingEvents (System.Boolean value) [0x0001d] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/System.IO.FileSystem.Watcher/src/System/IO/FileSystemWatcher.cs:163 
  at Microsoft.Extensions.FileProviders.Physical.PhysicalFilesWatcher.TryEnableFileSystemWatcher () [0x00038] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.FileProviders.Physical.PhysicalFilesWatcher.CreateFileChangeToken (System.String filter) [0x00033] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.FileProviders.PhysicalFileProvider.Watch (System.String filter) [0x00024] in <6125f79e68ba4e3e9fe4648a1c0d0d0f>:0 
  at Microsoft.Extensions.Configuration.FileConfigurationProvider.<.ctor>b__1_0 () [0x00016] in <9ec7d2c6e7554a1f850c7aff61ce2685>:0 
  at Microsoft.Extensions.Primitives.ChangeToken+ChangeTokenRegistration`1[TState]..ctor (System.Func`1[TResult] changeTokenProducer, System.Action`1[T] changeTokenConsumer, System.Action state) [0x0001b] in <188ebf9f0e17409ba16a3263816f0064>:0 
  at Microsoft.Extensions.Primitives.ChangeToken.OnChange (System.Func`1[TResult] changeTokenProducer, System.Action changeTokenConsumer) [0x0001c] in <188ebf9f0e17409ba16a3263816f0064>:0 
  at Microsoft.Extensions.Configuration.FileConfigurationProvider..ctor (Microsoft.Extensions.Configuration.FileConfigurationSource source) [0x00035] in <9ec7d2c6e7554a1f850c7aff61ce2685>:0 
  at Microsoft.Extensions.Configuration.Json.JsonConfigurationProvider..ctor (Microsoft.Extensions.Configuration.Json.JsonConfigurationSource source) [0x00000] in <8ee38c187c6b4daab5dd2c1ede9b3141>:0 
  at Microsoft.Extensions.Configuration.Json.JsonConfigurationSource.Build (Microsoft.Extensions.Configuration.IConfigurationBuilder builder) [0x00007] in <8ee38c187c6b4daab5dd2c1ede9b3141>:0 
  at Microsoft.Extensions.Configuration.ConfigurationBuilder.Build () [0x0001a] in <df2ca259d3bf4c2fa98021b4434110b3>:0 
  at Microsoft.Extensions.Hosting.HostBuilder.BuildAppConfiguration () [0x0005c] in <07930773021a4a4eb35f7d8403f80d9c>:0 
  at Microsoft.Extensions.Hosting.HostBuilder.Build () [0x0002c] in <07930773021a4a4eb35f7d8403f80d9c>:0 
  at FirstMobileBlazorBindingsApp.App..ctor () [0x00008] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp/App.cs:12 
  at FirstMobileBlazorBindingsApp.iOS.AppDelegate.FinishedLaunching (UIKit.UIApplication app, Foundation.NSDictionary options) [0x00007] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp.iOS/AppDelegate.cs:26 
  at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)
  at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.3.0/src/Xamarin.iOS/UIKit/UIApplication.cs:86 
  at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0000e] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.8.3.0/src/Xamarin.iOS/UIKit/UIApplication.cs:65 
  at FirstMobileBlazorBindingsApp.iOS.Application.Main (System.String[] args) [0x00001] in /Users/davidortinau/work/FirstMobileBlazorBindingsApp/FirstMobileBlazorBindingsApp.iOS/Main.cs:17

=================================================================
	Native Crash Reporting
=================================================================
Got a SIGABRT while executing native code. This usually indicates
a fatal error in the mono runtime or one of the native libraries 
used by your application.
=================================================================

=================================================================
	Native stacktrace:
=================================================================
	0x104782915 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_dump_native_crash_info
	0x1047770e5 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_handle_native_crash
	0x104781e9b - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : sigabrt_signal_handler
	0x7fff5245b42d - /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/system/libsystem_platform.dylib : _sigtramp
	0x7f8eb082e000 - Unknown
	0x7fff5234ba5c - /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/usr/lib/system/libsystem_c.dylib : abort
	0x1049ac11f - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : xamarin_unhandled_exception_handler
	0x1048385f7 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_invoke_unhandled_exception_hook
	0x104776c99 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_handle_exception_internal
	0x104775129 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_handle_exception
	0x1046f92f9 - /Users/davidortinau/Library/Developer/CoreSimulator/Devices/119E7A4E-1B2A-4EA1-8462-D73AB01C96E6/data/Containers/Bundle/Application/6A7377A3-EB30-45AC-A438-28D052E7C4DB/FirstMobileBlazorBindingsApp.iOS.app/FirstMobileBlazorBindingsApp.iOS : mono_amd64_throw_exception
	0x106cb55b0 - Unknown
	0x10b2d6e4b - Unknown
	0x10b2cbf74 - Unknown
	0x10b28f81b - Unknown

=================================================================
	Basic Fault Address Reporting
=================================================================
Memory around native instruction pointer (0x7fff523bc7fa):0x7fff523bc7ea  ff ff c3 90 90 90 b8 48 01 00 02 49 89 ca 0f 05  .......H...I....
0x7fff523bc7fa  73 08 48 89 c7 e9 85 a2 ff ff c3 90 90 90 b8 53  s.H............S
0x7fff523bc80a  00 00 02 49 89 ca 0f 05 73 08 48 89 c7 e9 6d a2  ...I....s.H...m.
0x7fff523bc81a  ff ff c3 90 90 90 b8 83 01 00 02 49 89 ca 0f 05  ...........I....

=================================================================
	Managed Stacktrace:
=================================================================
=================================================================

Add Event if HasDelegate is ture

Does it improve the performance to only add the events if HasDelegate is true?

https://github.com/xamarin/MobileBlazorBindings/blob/3c8dd676fc6e7882b4fcdd2ae6f1b97162570607/src/Microsoft.MobileBlazorBindings/Elements/VisualElement.cs#L127-L129

Check NuGet package metadata

Descriptions, license, etc.

Multi-direction support for Visual Element (RTL, LTR)

In Xamarin Forms, every VisualElement has a property called FlowDirection.

In MobileBlazorBindings, we need to expose this property to make it more multi-cultural.

This is an example:

<TabbedPage FlowDirection="FlowDirection.RightToLeft">
    <ContentPage Title="Todo">
        <StackLayout>
            <Label FontSize="20" TextColor="Color.Crimson" Text="Todo Items" HorizontalTextAlignment="TextAlignment.Center" />
            <TodoList />
        </StackLayout>
    </ContentPage>
    <ContentPage Title="Counter">
        <Counter />
    </ContentPage>
    <ContentPage Title="About">
        <About />
    </ContentPage>
</TabbedPage>

I think if we only expose the attribute, the Multi-Direction issue will be solved by Xamarin Forms itself:

The default value of FlowDirection for a visual element that has no parent is LeftToRight, even on platforms where FlowDirection is RightToLeft. Therefore, developers must deliberately opt in to right-to-left layout. Developers can choose right-to-left layout by setting the FlowDirection property of the root element to RightToLeft to chosse right-to-left layout, or to MatchParent to match the device layout.

All VisualElements that have a parent default to MatchParent.

An example of RTL page:

Hello World issues

First this is all amazing, thanks. I've tried a few times now and various different things happen but while the app starts in the emulator I never see any text.

The template seems to have set the project to Android 9.0. I thought I read it needed 8.0. Perhaps it simply chose the latest version on my machine or am I am mistaken? I set the emulator to 8.0 but it didn't display when I set it to 9.0 either.

There was an issue re: namespace collisions for Button, Label and others. I managed to resolve them but I figured it should compile and run without error so again something must be up with my installation. It is using Xamarin.Forms 4.3.0.908675 which again I think I need. Will it work if I get latest stable?

Assistance would be appreciated. Thanks.

Failed to build from Source

Here I am building the app from Source.
When I try to run the app, I am greeted with the following errors. I really don't have any idea about these errors and even line number is not mentioned nor the file name or any hint is provided.

steps I followed:

1. cloned repo
2. run int.cmd and run pack.cmd
3. open the solution file
4. selected the HelloWorldAndroidProject.

Have templates show up in Visual Studio / New Project dialog

Currently only 'web' templates can appear without extra steps, but even then, only in the "One ASP.NET" dialog. For example, the Blazor templates do this with a special VS JSON file.

Or, you can use a VSIX to do it: https://github.com/phenning/templateSamples

Grid.ColumnDefinitions?

I'm not experienced with Xamarin so I'm watching a video and trying to apply the lessons. Right off the bat they are using a Grid layout. MBB has a but it doesn't appear to support the Xamarin syntax for Grid.ColumnDefinitions and Grid.ColumnDefinition.

I don't know what to look for a) is the syntax just different or b) there is limited support for grids at the moment or c) something else :-)

Is the basic concept that the Xamarin controls will be mapped into Blazor or that we just use Blazor components at will? Thanks again.

Allow arbitrary text to be wrapped in a <Label> element

[Android] Seeing a blank screen, no content

I created a new project to implement some existing layouts I have, but the page only shows blank. Not sure it's loading at all. Solution attached.

Archive.zip

[Request] Add a guide for contributing control wrappers and properties

I'd like a guide for how to add properties to existing controls, such as Button which is currently missing font size and borders, and new controls such as BoxView.

That in addition to a backlog of known work items would be great to enlist help.

Is code behind supported?

BTW Is this the place to ask questions? I wanted to be sure that code behind for components was supported. It appears to have worked in the case of my HelloWorld.razor.cs file. And I assume these are subclasses of ComponentBase?

Thanks.

Sneak preview known issues

List of known issues in the preview:

1. The only CSS style selectors that are supported are the ones that reference an element's type (for example: label { color: red; }). However, Id selectors (#elementId { ... }) and class selectors (.className { ... }) are not yet supported.
   • This is currently a limitation of Xamarin.Forms: xamarin/Xamarin.Forms#2678
2. The default template on iOS (and UWP) can throw an exception at app startup:
   • The issue is tracked here: #30
3. Several harmless errors might show up in Visual Studio, such as 'Button' is an ambiguous reference between 'Microsoft.MobileBlazorBindings.Elements.Button' and 'Xamarin.Forms.Button'. These errors can be safely ignored.
   • This issue is tracked here: #49

Selectable itemlist

I need to populate a list(drop down list)of items, where the user should be able to select one item. I have not been working with Blazor before, but I presume I need to use SelectableItemsView, but that's not included yet?

Tool to wrap Xamarin.Forms components for Mobile Blazor Bindings usage

Open default .razor file when template is created in VS

uwp project missing

by generating project described in blog
https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/

creates android and ios project missing uwp projects , why hate for windows from Microsoft ?
we need UWP app along side with this projects.

Label does not update when variable is set from an event.

It's simple to replicate. Create an event handler and update a string variable which is tied to a label in the razor page. The label will not update.
If you throw a button on the page and update the variable with a += ""; the label will update with the data.

Relative width of GridColumns not working

It seems it doesn't compute the relative width, with gridunittype.star , correctly.

Example of code

  <Grid>
            <Layout>
                <ColumnDefinition GridUnitType="GridUnitType.Star" Width="1" ></ColumnDefinition>
                <ColumnDefinition GridUnitType="GridUnitType.Star" Width="3" ></ColumnDefinition>
            </Layout>
            <Contents>
                @foreach (var tipper in tippersManager.Tippers)
                {
                    <TipperRow tipper="tipper" row="rowCount"></TipperRow>
                    rowCount++;
                }
            </Contents>
        </Grid>

And the component TipperRow:

<GridCell Row="@row" Column="0">
    <Image Source="ImgSource" BackgroundColor="Color.Black"  HorizontalOptions="LayoutOptions.Start" VerticalOptions="LayoutOptions.Center" WidthRequest="1"/>
</GridCell>
<GridCell Row="@row" Column="1">
    <Label Text="@tipper.Name" HorizontalOptions="LayoutOptions.Start" FontSize="25"  VerticalOptions="LayoutOptions.Center"
           FontAttributes="FontAttributes.Bold" />
</GridCell>

as you can see, I would expect, in each row of the grid, an image with Width 1/4 of the total width of the row, (or 1/3 of the label width).

But it seems each gridcell take up to 50% of the available space.

Xamarin.Forms element wrapper state

List of Xamarin.Forms elements that are available in Experimental Forms binding for Blazor.

Note: Some elements have been wrapped, but not all of their properties have been implemented.

• BindableObject
  • Element
    • Application
    • Cell
      • EntryCell
      • SwitchCell
      • TextCell
        • ImageCell
      • ViewCell
    • GestureElement
      • Span
    • FormattedString
    • BaseMenuItem
      • MenuItem
    • NavigableElement
      • BaseShellItem
        • ShellContent
        • ShellGroupItem
          • ShellItem
            • FlyoutItem
            • TabBar
          • ShellSection
            • Tab
      • VisualElement
        • View
          • ActivityIndicator
          • BoxView
          • Button
          • CheckBox
          • DatePicker
          • Image (#10)
          • ImageButton
          • InputView
            • Editor
            • Entry
            • SearchBar
          • ItemsView
            • CarouselView
            • StructuredItemsView
              • SelectableItemsView
                • GroupableItemsView
                  • CollectionView
          • ItemsView<T>
            • ListView
          • Layout
            • Layout<T> (Not Applicable?)
              • AbsoluteLayout - On hold because it requires Attached Properties
              • FlexLayout - On hold because it requires Attached Properties
              • Grid (#12)
              • StackLayout
              • RelativeLayout
            • TemplatedView
              • ContentView
                • Frame
            • ScrollView
          • Label
          • Picker
          • ProgressBar
          • Slider
          • Stepper (#13)
          • Switch
          • TableView
          • TimePicker
          • WebView
        • Page
          • TemplatedPage
            • ContentPage
          • MasterDetailPage
          • NavigationPage
          • MultiPage<T> (Not Applicable?)
            • CarouselPage
            • TabbedPage
          • Shell (#11)

Blazor syntax mismatch

First of, amazing experiment that just started. I'm definitely gonna use, test and help out where I can with this!

Now, onto my "issue" or rather a thing I fell over looking at the syntax in Mobile Blazor Bindings vs normal "Blazor" for ASP.NET Core.

While regular Blazor uses the pattern like for example: @onclick="HelloWorldFunction", Mobile Blazor Bindings uses the old way through onclick="@HelloWorldFunction", the difference ofcoruse being where the @- sign is located.

Are there any plans to change the syntax to be identical with regular ASP.NET Core / WebAssembly Blazor?

Publish nightly packages go GitHub package feed

Extending the Mobile Elements

The project looks quite promising; I'm hoping that it is eventually made part of an official API.

After looking at the source code for the various elements I realized that only a few of the many properties for the Xamarin.Forms elements are exposed, and due to the fact that the underlying native control is not itself exposed as a Blazor parameter, there is no way to set those properties.

In my case I was attempting to use the FlowDirection property to use RTL functionality (I work on some Hebrew language apps from time to time).

I suppose I could write my own components and expose the FlowDirection property as a parameter myself, but I wonder if there is a "better" way to do this.

BTW, I noticed that someone else complained about the error messages indicating ambiguity between the mobile blazor binding elements and the Xamarin Forms ones. I simply substituted the line @using XF = Xamarin.Forms in _Imports.razor for the @using Xamarin.Forms and then applied the prefix XF. to those items that derive from the forms classes. It's not a "perfect" solution, but it eliminated the error messages and didn't require a lot of extra text in the razor files. I found that I could specify the @code{} segment of my files in partial classes to better separate the UI and logic using this technique quite easily.

Hot Reload - what does it take to make it work?

Add Grid component

Syntax something like this:

    <Grid>
        <Layout>
            <RowDefinition Height="40" GridUnitType="GridUnitType.Absolute"></RowDefinition>
            <RowDefinition Height="100" GridUnitType="GridUnitType.Absolute"></RowDefinition>
            <ColumnDefinition Width="1" GridUnitType="GridUnitType.Star"></ColumnDefinition>
            <ColumnDefinition Width="2" GridUnitType="GridUnitType.Star"></ColumnDefinition>
        </Layout>
        <Contents>
            <GridCell Row="0" Column="0" ColumnSpan="2">
                <Label Text="Wide header" BackgroundColor="Color.AliceBlue" />
            </GridCell>
            <GridCell Row="1" Column="0">
                <Switch IsToggled="true" />
            </GridCell>
            <GridCell Row="1" Column="1">
                <Entry Text="Buy cat" />
            </GridCell>
        </Contents>
    </Grid>

IsVisible?

At least I'm trying things :-) Does the IsVisible attribute work? I set it to false on a StackLayout that is in a GridCell but the components in that StackLayout are displayed.

There are also warnings displayed on two properties
Component parameter 'IsVisible' should not be set outside of its component
Component parameter 'BackgroundColor' should not be set outside of its component