UWP Tips Early Look - Rapid XAML Toolkit (Beta)

Note: The Rapid XAML Toolkit isn't UWP-specific. You can leverage these tools for WPF and Xamarin.Forms development. XAML developers, check it out today!

In today's tip, we will have a peek at a cool project still in early beta stages, the Rapid XAML Toolkit. What is this toolkit? From their readme.md on GitHub:

These tools aim to reduce the time and effort required to get the basics working and allow you to customize the UI to meet your preferences or the specific needs of your app. We can't and don't try to create the whole app for you but we can make creating and working with XAML faster easier.

In short, the toolkit can take a set of properties from a ViewModel in your project and generate XAML controls in your corresponding View.
To give this a try, you will need to download the source and run it in an experimental instance of Visual Studio. Get the full instructions from the getting started guide here. No VSIX file is available yet to run the toolkit in VS itself. That will be coming later. Let's give it a try.
You should have completed these steps from the getting started guide:

1. Clone or download the Rapid XAML Toolkit solution
2. Open and build the solution
3. Run/Debug the toolkit solution in an experimental VS instance

Now, in the newly started instance of Visual Studio, create a new UWP project.



You could also open an existing UWP project, if you have one handy. If not, add a new ViewModel, some model classes, and set up your data context, using your favorite MVVM toolkit/method. One other thing you will need to set up is in the Rapid XAML Toolkit settings in your VS options:



Select a Profile and click "Set as Active". This will control how your copied ViewModel data is prepared and converted to XAML for your view. Save your settings, return to one of your viewmodel classes and highlight some properties to be copied. Then right-click and select the Rapid XAML menu:



You can either copy the converted XAML to your clipboard or send it to your VS Toolbox to be dragged to your view(s). Next, open a view and paste those properties into the XAML editor.



For this given ViewModel data that was copied:

public string PatientName { get; private set; }

public int SSN { get; set; }

public DateTimeOffset VisitDate { get; set; }

public string VisitNotes { get; set; }

public decimal CurrentWeight { get; }

public ObservableCollection<Medication> Prescriptions { get; set; }

For reference, this is the Medication model class:

public class Medication
{
     public int Id { get; set; }
     public string Name { get; set; }
     public string UnitOfMeasure { get; set; }
     public double Strength { get; set; }
}

You will have this XAML markup pasted:

<TextBlock Text="{Binding PatientName}" />

<Slider Minimum="0" Maximum="100" x:Name="SSN" Value="{Binding SSN, Mode=TwoWay}" />

<DatePicker Date="{Binding VisitDate, Mode=TwoWay}" />

<TextBox Text="{Binding VisitNotes, Mode=TwoWay}" />

<TextBlock Text="{Binding CurrentWeight}" />

<ListView ItemsSource="{Binding Prescriptions}">
     <ListView.ItemTemplate>
         <DataTemplate x:DataType="model:Medication">
             <StackPanel>
                 <TextBlock Text="{x:Bind Id, Mode=OneWay}" />
                 <TextBlock Text="{x:Bind Name, Mode=OneWay}" />
                 <TextBlock Text="{x:Bind UnitOfMeasure, Mode=OneWay}" />
                 <TextBlock Text="{x:Bind Strength, Mode=OneWay}" />
             </StackPanel>
         </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

I'll grant that it doesn't create the prettiest UI, but it is still an early beta and very little editing is required from this point to create something usable. Here is what the generated view looks like to a user:



Keep an eye on this project. I have a feeling it is going to eventually be a big time-saver for Windows devs. If you are the adventurous type, go out and download the beta source today. Have an idea to improve the toolkit? Create an issue on GitHub and start a discussion.

Happy coding!

del.icio.us Tags: uwp,rapid xaml toolkit,mvvm