ismlsmile / xamformswpf Goto Github PK

using System.ComponentModel;
using System.Runtime.CompilerServices;
namespace XamFormsWpf.Core.ViewModels
{
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged = delegate { };
protected void RaisePropertyChanged([CallerMemberName] string propertyName = "")
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
    <span style="color:rgb(51,51,51);font-weight:bold">protected</span> <span style="color:rgb(51,51,51);font-weight:bold">void</span> RaiseAllPropertiesChanged()
    {
        PropertyChanged(<span style="color:rgb(51,51,51);font-weight:bold">this</span>, null);
    }
}

}

​

Now add the ContactViewModel class to the ViewModels folder with the following code.  This is the class we will bind our forms to in WPF and Xamarin.Forms.  Notice that this class uses our IoC container to resolve the IHelloService at runtime.  The class also uses our Contact class as a backing object for our data bound contact properties.

using XamFormsWpf.Core.Data;
using XamFormsWpf.Core.Services;
namespace XamFormsWpf.Core.ViewModels
{
public class ContactViewModel : BaseViewModel
{
private Contact _contact;
private IHelloService _helloService = SimpleIoC.Container.Resolve<IHelloService>();
    <span style="color:rgb(51,51,51);font-weight:bold">public</span> <span style="color:rgb(0,134,179)">string</span> Hello { get { <span style="color:rgb(51,51,51);font-weight:bold">return</span> _helloService.SayHello(); } }

    <span style="color:rgb(51,51,51);font-weight:bold">public</span> <span style="color:rgb(0,134,179)">string</span> ContactFirstName
    {
        get { <span style="color:rgb(51,51,51);font-weight:bold">return</span> _contact.FirstName; }
        <span style="color:rgb(0,134,179)">set</span> {
            _contact.FirstName = value;
            RaisePropertyChanged(nameof(ContactFirstName));
        }
    }
    <span style="color:rgb(51,51,51);font-weight:bold">public</span> <span style="color:rgb(0,134,179)">string</span> ContactLastName
    {
        get { <span style="color:rgb(51,51,51);font-weight:bold">return</span> _contact.LastName; }
        <span style="color:rgb(0,134,179)">set</span> {
            _contact.LastName = value;
            RaisePropertyChanged(nameof(ContactLastName));
        }
    }
    <span style="color:rgb(51,51,51);font-weight:bold">public</span> <span style="color:rgb(0,134,179)">string</span> ContactEmail
    {
        get { <span style="color:rgb(51,51,51);font-weight:bold">return</span> _contact.Email; }
        <span style="color:rgb(0,134,179)">set</span> {
            _contact.Email = value;
            RaisePropertyChanged(nameof(ContactEmail));
        }
    }

    <span style="color:rgb(51,51,51);font-weight:bold">public</span> ContactViewModel(Contact contact = null)
    {
        _contact = contact == null ? <span style="color:rgb(51,51,51);font-weight:bold">new</span> Contact() : contact;
        RaiseAllPropertiesChanged();
    }
}

}

​

This is everything we'll need in our Core PCL in order to run the example.  We still have a couple more steps in our View projects to wire up our Views with the View Models and Services, but we'll take care of that next.  Below is a screenshot of what your XamFormsWpf.Core project should look like in the solution window.




Add a WPF project to our solution to target Windows Desktop


Overview

Now it is time to add our WPF project to to the soluion.  In this step, we will add a standard WPF project, and have it reference the XamFormsWpf.Core PCL.




Steps

Right click the solution name and select Add > New Project.  Search for WPF and select WPF Application.  Make sure you select the C# template.  Name the project XamFormsWpf.WPF.





In the new WPF project, add a reference to the XamFormsWpf.Core (Portable) project.

Implementing IHelloService in each platform


Overview

Now we will create a HelloService class in the WPF and Forms projects that provides a custom implementation for WPF and Forms.  We will register this class in each project's App.cs using our SimpleIoC container that replaced DependencyService.




Steps

Create a new class called HelloService in the XamFormsWpf.Core.Forms project with the following code


using XamFormsWpf.Core.Services;
namespace XamFormsWpf
{
class HelloService : IHelloService
{
public string SayHello()
{
return "Hello, Xamarin Forms!";
}
}
}

​

Update the App.xaml.cs class in XamFormsWpf.Core.Forms to use our SimpleIoC container to register our HelloWorld service as the implementation.  Replace the App.xaml.cs code with the following code


using XamFormsWpf.Core.Services;
using Xamarin.Forms;
namespace XamFormsWpf
{
public partial class App : Application
{
public SimpleIoC IoC = SimpleIoC.Container;
public App()
{
IoC.RegisterSingleton<IHelloService, HelloService>();
InitializeComponent();
MainPage = new MainPage();
}
    <span style="color:rgb(51,51,51);font-weight:bold">protected</span> override <span style="color:rgb(51,51,51);font-weight:bold">void</span> OnStart()
    {
        <span style="color:rgb(153,153,136);font-style:italic">// Handle when your app starts</span>
    }

    <span style="color:rgb(51,51,51);font-weight:bold">protected</span> override <span style="color:rgb(51,51,51);font-weight:bold">void</span> OnSleep()
    {
        <span style="color:rgb(153,153,136);font-style:italic">// Handle when your app sleeps</span>
    }

    <span style="color:rgb(51,51,51);font-weight:bold">protected</span> override <span style="color:rgb(51,51,51);font-weight:bold">void</span> OnResume()
    {
        <span style="color:rgb(153,153,136);font-style:italic">// Handle when your app resumes</span>
    }
}

}

​

Create a new class in XamFormsWpf.WPF called HelloService with the following code


using XamFormsWpf.Core.Services;
namespace XamFormsWpf.WPF
{
class HelloService : IHelloService
{
public string SayHello()
{
return "Hello, Windows Desktop!";
}
}
}

​

In XamFormsWpf.WPF, update the App.xaml.cs file with the following code.



using System.Windows;
using XamFormsWpf.Core.Services;
namespace XamFormsWpf.WPF
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
SimpleIoC IoC = SimpleIoC.Container;
protected override void OnStartup(StartupEventArgs e)
{
IoC.Register<IHelloService, HelloService>();
}
}
}


Creating some simple data binding in MainPage and MainWIndow


Overview

The final step is to make use of our ContactViewModel in our Forms and and WPF XAML views.  The Xamarin.Forms and WPF XAML definitions are not interchangeable, meaning we will need to use the different view definitions on each platform, but with our project structure, we can reuse all of our Core PCL content.




First we will update our MainPage.xaml file in our Forms PCL, then we'll move on to provide the same implementation in our WPF project.

Steps

Open the MainPage.xaml file in your XamFormsWpf.Core.Forms PCL and add the following code.





<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamFormsWpf"
             x:Class="XamFormsWpf.MainPage">
  <StackLayout>
    <Label Text="{Binding Hello}" />
    <StackLayout Orientation="Horizontal">
      <Label Text="First Name" />
      <Entry Text="{Binding ContactFirstName, Mode=TwoWay}" />
    </StackLayout>
    <StackLayout Orientation="Horizontal">
      <Label Text="Last Name" />
      <Entry Text="{Binding ContactLastName, Mode=TwoWay}" />
    </StackLayout>
    <StackLayout Orientation="Horizontal">
      <Label Text="Email" />
      <Entry Text="{Binding ContactEmail, Mode=TwoWay}" />
    </StackLayout>
  </StackLayout>
</ContentPage>

​

Now open the MainPage.xaml.cs code-behind file and add the following code.  This will setup some simple controls, a sample Contact, and demonstrate data binding between the two.


using Xamarin.Forms;
using XamFormsWpf.Core.Data;
using XamFormsWpf.Core.ViewModels;
namespace XamFormsWpf
{
public partial class MainPage : ContentPage
{
readonly ContactViewModel _contactViewModel;
public MainPage()
{
// Test contact
var contact = new Contact {
FirstName = "Jimmy",
LastName = "Smith",
Email = "[email protected]"
};
        _contactViewModel = <span style="color:rgb(51,51,51);font-weight:bold">new</span> ContactViewModel(contact);
        BindingContext = _contactViewModel;
        InitializeComponent();
    }
}

}

​

The final step is to implement similar view controls in the WPF project.  In XamFormsWpf.WPF, open MainWindow.xaml and add the following code


<Window x:Class="XamFormsWpf.WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:XamFormsWpf.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Hello}" />
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="First Name" />
                <TextBox Text="{Binding ContactFirstName, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Last Name" />
                <TextBox Text="{Binding ContactLastName, Mode=TwoWay}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Email" />
                <TextBox Text="{Binding ContactEmail, Mode=TwoWay}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

​



Now open the MainWindow.xaml.cs code-behind file and add the following 
code.  This will setup some simple controls, a sample Contact, and 
demonstrate data binding between the two.


using System.Windows;
using XamFormsWpf.Core.Data;
using XamFormsWpf.Core.ViewModels;
namespace XamFormsWpf.WPF
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
readonly ContactViewModel _contactViewModel;
public MainWindow()
{
var contact = new Contact {
FirstName = "Jimmy",
LastName = "Smith",
Email = "[email protected]"
};
        _contactViewModel = <span style="color:rgb(51,51,51);font-weight:bold">new</span> ContactViewModel(contact);
        DataContext = _contactViewModel;

        InitializeComponent();
    }
}

}

​




Conclusion

That's all there is to it! You can now build and run the app by selecting a project as the default startup project.  Below are screenshots of the application running on Android and (of course) WPF.




Android:






WPF:








To summarize, in this tutorial, we've gone through the steps necessary to add support for a WPF project to a Xamarin.Forms solution.  We also created a very simple implementation as an example.  We covered the following topics:



Creating a new solution from the default Xamarin.Forms project template
Adding a Core PCL to our solution, to contain our common code
Add some common code to our Core PCL


Using a simple IoC container to replace Xamarin.Forms DependencyService class
Add a WPF project to our solution to target Windows Desktop
Implementing IHelloService in each platform


Creating some simple data binding in our MainPage and MainWindow views




As usual,
 styling was omitted from this tutorial, but now that you understand these
 core concepts, you can work with the existing solution to add some 
styling of your own.





I truly hope you found this tutorial to be both clear and informative, and please feel free to leave feedback.