-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update MD files with new naming and contents
- Loading branch information
Showing
3 changed files
with
34 additions
and
134 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # Code of Conduct | ||
|
|
||
| This project has adopted the [Microsoft Open Source Code of | ||
| Conduct](https://opensource.microsoft.com/codeofconduct/). | ||
| For more information see the [Code of Conduct | ||
| FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or | ||
| contact [opencode@microsoft.com](mailto:opencode@microsoft.com) | ||
| with any additional questions or comments. |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,135 +1,33 @@ | ||
| # Emblazon - Home of Experimental Mobile Blazor Bindings | ||
| # Experimental Mobile Blazor Bindings | ||
|
|
||
| [](https://devdiv.visualstudio.com/Personal/_build/latest?definitionId=12095&branchName=master) | ||
|
|
||
| ## What is Emblazon? | ||
| ## What is Experimental Mobile Blazor Bindings? | ||
|
|
||
| Emblazon enables using Blazor to target native UI renderers (as opposed to web/HTML renderers). This repo contains implementations that target Xamarin.Forms and Windows Forms. | ||
| Experimental Mobile Blazor Bindings is a new framework for building mobile apps using C# and .NET. Experimental Mobile Blazor Bindings uses Razor syntax to define UI components and behaviors of an application. The underlying UI components are based on Xamarin.Forms elements. | ||
|
|
||
| This is a sample `Hello, World!` component: | ||
|
|
||
| ## Start Emblazoning! | ||
| ```xml | ||
| <ContentPage> | ||
| <StackLayout> | ||
|
|
||
| ### Required software to use Emblazon and for contributors | ||
| <Label Text="Hello, World!" | ||
| FontSize="20" | ||
| HorizontalTextAlignment="TextAlignment.Center" /> | ||
|
|
||
| Emblazon and its related projects require: | ||
| </StackLayout> | ||
| </ContentPage> | ||
| ``` | ||
|
|
||
| 1. [Visual Studio 2019 16.3](https://visualstudio.microsoft.com/vs/) or newer | ||
| * For Blazor Native, the Xamarin workload must be enabled in Visual Studio | ||
| * For BlinForms, you must run on Windows (that's the `in` of BlinForms!) | ||
| 2. [.NET Core 3.0 SDK](https://dotnet.microsoft.com/download) | ||
|
|
||
| ## Let's get started! | ||
|
|
||
| ### Create a Blazor Native project | ||
| Get started by reading the [Getting Started]() document and the related walkthroughs. | ||
|
|
||
| 1. In Visual Studio, create a Xamarin.Forms Mobile App project | ||
| 1. Select the Blank app template | ||
| 1. Add the Emblazon NuGet package feed by adding a new `NuGet.config` file to the solution directory: | ||
|
|
||
| ```xml | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <configuration> | ||
| <packageSources> | ||
| <add key="Emblazon Feed" value="https://devdiv.pkgs.visualstudio.com/_packaging/Emblazon/nuget/v3/index.json" /> | ||
| </packageSources> | ||
| </configuration> | ||
| ``` | ||
| ## Contributing | ||
|
|
||
| 1. In the solution's shared project (the one that isn't Android or iOS), make these changes: | ||
| 1. Change the top `<Project>` node to use the Razor SDK `<Project Sdk="Microsoft.NET.Sdk.Razor">` | ||
| 1. In the `<PropertyGroup>` section, add this node to set the Razor language version: `<RazorLangVersion>3.0</RazorLangVersion>` | ||
| 1. Add a reference to Blazor Native in the `<ItemGroup>` containing other package references: `<PackageReference Include="Microsoft.Blazor.Native" Version="0.1.71-beta" />` (update to a newer build as needed) | ||
| 1. Delete `MainPage.xaml` and `MainPage.xaml.cs` | ||
| 1. Delete `App.xaml` and `App.xaml.cs` | ||
| 1. Add a new class file called `App.cs` to the project | ||
| 1. Add these `using` statements: | ||
|
|
||
| ```c# | ||
| using Microsoft.MobileBlazorBindings; | ||
| using Microsoft.Extensions.DependencyInjection; | ||
| using Microsoft.Extensions.Hosting; | ||
| using Xamarin.Forms; | ||
| ``` | ||
|
|
||
| 1. Replace the app class's code with this code: | ||
|
|
||
| ```c# | ||
| public class App : Application | ||
| { | ||
| public App() | ||
| { | ||
| var host = Host.CreateDefaultBuilder() | ||
| .ConfigureServices((hostContext, services) => | ||
| { | ||
| // Register app-specific services | ||
| }) | ||
| .Build(); | ||
|
|
||
| host.AddComponent<MainPage>(parent: this); | ||
| } | ||
|
|
||
| protected override void OnStart() | ||
| { | ||
| // Handle when your app starts | ||
| } | ||
|
|
||
| protected override void OnSleep() | ||
| { | ||
| // Handle when your app sleeps | ||
| } | ||
|
|
||
| protected override void OnResume() | ||
| { | ||
| // Handle when your app resumes | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 1. Add a Razor Component to the project named `_Imports.razor` with these contents: | ||
|
|
||
| ```c# | ||
| @using Microsoft.MobileBlazorBindings.Elements | ||
| @using Xamarin.Forms | ||
| ``` | ||
|
|
||
| 1. Add a Razor Component to the project named `MainPage.razor` | ||
|
|
||
| ```html | ||
| <ContentPage> | ||
| <StackLayout> | ||
| <Button Text="Add!" OnClick="@OnAdd" /> | ||
| <Label Text="@($"The button has been clicked {counter} times!")" /> | ||
| </StackLayout> | ||
| </ContentPage> | ||
|
|
||
| @code { | ||
| int counter; | ||
|
|
||
| void OnAdd() | ||
| { | ||
| counter++; | ||
| } | ||
| } | ||
| ``` | ||
| 1. You're ready to go! Run the Android or iOS project to launch your new Blazor Native-based app! | ||
|
|
||
|
|
||
| ## NuGet feed | ||
|
|
||
| Browse the latest packages here: https://devdiv.visualstudio.com/Personal/_packaging?_a=feed&feed=Emblazon | ||
|
|
||
|
|
||
| ## Solution structure | ||
|
|
||
| There are 3 main areas: | ||
|
|
||
| 1. [Emblazon](src/Emblazon) - Base framework for Blazor rendering to native UI frameworks. | ||
| 2. [BlinForms](src/BlinForms.Framework) - Blazor rendering to Windows Forms. | ||
| * Check out the [BlinForms sample app](samples/BlinFormsSample). | ||
| 3. [Microsoft.Blazor.Native](src/Microsoft.Blazor.Native) - Blazor rendering to Xamarin.Forms. | ||
| * Check out the [Blazor Native sample todo app](samples/MobileBlazorBindingsTodo). | ||
|
|
||
|
|
||
| ## Comparison projects | ||
|
|
||
| To compare Blazor Native with Xamarin.Forms, see the [Xamarin.Forms Todo XAML sample](samples/XamarinFormsTodoXaml/XamarinTodoXaml/XamarinTodoXaml). | ||
| 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. | ||
|
|
||
| Thank you! |