Xamarin Forms Visual Previewer

A Visual Designer to view your XAML pages is one of the most requested features of Xamarin Forms. Xamarin now has the XAML Previewer for Xamarin Forms available in Visual Studio and Xamarin Studio. Unfortunately it isn’t a Visual Designer, its a Visual Previewer, but you can view XAML files for Android and iOS directly in the previewer, to give you an idea of what it will look like. However, no previewer can be perfect with the amount of Android fragmentation.

From Xamarin Forms 2.2+ and the stable channel of Xamarin, you now have access to the XAML previewer.

Launch Previewer

Visual Studio

Go to View > Other Windows > Xamarin.Forms Previewer.

selectpreviewer

Xamarin Studio

When you open a xaml page, press the Preview button in the top right hand corner to enable / disable the designer.

xamarinstudiopreviewer

Previewer

When you open a XAML page you will see the previewer and it will show the visual design with these parameters.

  • iOS (on Windows you need an active connection to a Mac)
  • Android
  • Tablet
  • Phone
  • Landscape
  • Portrait

Visual Previewer

You must build your Android project first or you will get this error.

androidbuild

However after this you can edit the XAML and it will update. You do not need to Save or Rebuild your project each time, it will update as you update XAML.

On the first load you may need to wait for some initialization to complete. I have found this may take up to a minute.

progress

Design Data

When you have a ListView or other bound data it will be hard to see what it actually looks like in the designer. To compensate for this you can add design time data to bind to your view.

First I create a static class, with a static model I can Bind to. Inside here I just put a list of my data.

public class Data
{
    private static DataViewModel dataViewModel;
    public static DataViewModel ViewModel => dataViewModel ?? (dataViewModel = new DataViewModel());
    public class DataViewModel
    {
        public ObservableCollection<string> NameList { get; set; }
                     = new ObservableCollection<string>()
                       {
                           "Adam",
                           "Bob",
                           "Sara",
                           "Malcolm",
                           "Jessica"
                       };
     }
 }

In your XAML page, ensure you have a reference to the namespace and assembly this class is in. Set your BindingContext to the DataViewModel and set your ListView to bind with NameList.

<?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:Previewer;assembly=Previewer"
             x:Class="Previewer.MainPage"
             BindingContext="{x:Static local:Data.ViewModel}">
    <ListView ItemsSource="{Binding NameList}"> 
    </ListView>
</ContentPage>

datapreviewer

Microsoft MVP | Xamarin Certified Developer |
Exrin Creator | Xamarin Forms Developer | Melbourne, Australia

Related Posts

30 Comments

  1. JohnS

    Would you really recommend Xamarin Forms?
    I found it buggy and incomplete in features, performance and tooling and based on the activity on GitHub, there’s no real progress from the XF team on fixing bugs or implementing key features. There’s someone outside the team who’s been doing some stuff, but it’s not realistic to be one man show.
    Delacroix is probably the only one from XF team doing something, he’s working on the XamlC and some other stuff.
    Despite the publicity they’re doing, Xamarin doesn’t really have a team dedicated to XamarinForms.

    1. Adam Pedley

      I find the core Xamarin Forms experience stable these days and its easy enough to add any native feature needed if XF doesn’t have it. I have quite a few production apps out there on XF, and though I know edge cases and bugs keep appearing, they are fixing them with each release.

      Stephane Delacroix is certainly coding away, but so is Sam, Jason, Rui, Elija and Paul. They are all part of the team and have been active over the last few months as you can see from: https://github.com/xamarin/Xamarin.Forms/graphs/contributors.

      They certainly lost a bit of momentum with the Microsoft acquisition, no doubt as they are all getting used to their new roles and collaboration they have to do with other MS teams. I would just give them until early next year to pick up momentum again.

      Though their work has never really been the problem. Its their communication on whats happening that is normally the cause of most developers grief. They never handle it very well, keeping devs in the dark and marketing promises keep making them push out software before its ready. Xamarin 4.2.0 being the prime example.

      Though tying this back into topic, this Visual Previewer is the buggiest thing I have seen from Xamarin in a long time, its certainly living up to its Preview name.

    2. Venetasoft

      We are using Forms from three years and we developed some big b2b apps with it.
      I can say there were very problematic versions in the past, but now it s very stable.
      As regards lacking features, we only feel the need of a “Blend for Xamarin Forms”, but there are quite no limits to what you can do with Xamarin. All the iOS and Android APIs are perfectly mapped.

  2. JohnS

    I’ve been watching closely what’s going on, because I am preoccupied about what I deliver to my customers.
    Sometimes I had to find not so nice workarounds, but the real pain point are more complicated bugs like in the ListView(such a basic control yet still buggy), the memory leaks in the Xamarin Forms and performance. These are very worrying if you’re interested to deliver high quality apps.
    Even with all the code open sourced, it’s really not practical to think someone could fix all the issues by himself.

    Along the 6 months, since March 22, when there was the first import of XF source code in the GitHub open source repo, Jason did 43 commits.
    https://github.com/xamarin/Xamarin.Forms/commits/master?author=jassmith
    None of the commits contains one feature or bug fix in framework from him.
    They are all either just merge of someone else work, or some few fixes or updates in the documentation.

    This isn’t a framework ready for prime time and high quality apps, even if the apps are not complicated.

    1. Adam Pedley

      You do need to make sure you have compiled the project. Once you have done that I would try restarting VS.

      As I mentioned its really unstable at the moment. It took me a few tries to get it working.

      1. Venetasoft

        Microsoft should have paid the guy behind Gorilla, or hire him for this project… No much respect for the dev community (still asking us 30℅ with 1℅ market share, there is no business on the Store with these conditions…)

  3. Yaroslav

    It will not work ?
    public ObservableCollection Phones { get; set; }
    = new ObservableCollection()
    {
    new Phone {Title=”Galaxy Note 7″, Company=”Samsung”, Price=60000 },
    new Phone {Title=”Galaxy S 7″, Company=”Samsung”, Price=50000 },
    new Phone {Title=”Lumia 650″, Company=”Microsoft”, Price=10000 },
    new Phone {Title=”Lumia 950″, Company=”Microsoft”, Price=29000 },
    new Phone {Title=”Elite x3″, Company=”HP”, Price=55000 },
    new Phone {Title=”iPhone SE”, Company=”Apple”, Price=38000 },
    new Phone {Title=”iPhone S 6″, Company=”Apple”, Price=50000 }
    };

  4. Vinicius Filenga

    Is it necessary to put any kind of tag inside the XAML Page?

    Tried rebooting VS for quite a feel times but still no success

    1. Adam Pedley

      No tag is needed. I would try with a sample project first to see if you can get it working that way with the bare minimum. Unfortunately at the moment this software is very hard to get working. I don’t personally use it just yet. It might be best to wait for another few versions.

    1. Adam Pedley

      There is no Preview button in VS 2015, that is only for Xamarin Studio (or VS for Mac). You just need to open it via the link in the menu and it will open a new window and show you a preview window.

  5. Rob Edwards

    I can’t find the preview button on my version of Xamarin Studio for Mac. I’m running 6.1.2 and downloaded the sample code for exercise 1 of the XAM130 course from Xamarin University. I added the XAML form as the class told us, but even after compiling and relaunching XS, still no preview button in the XAML editor.

    1. Adam Pedley

      The designer they have is the one they will be building. Because WPF and XF XAML are so different they can’t just bring it across. We will just have to wait to see how this evolves over time.

      1. Will Hsu

        I have looking forward to this feature for months. Unfortunately it doesn’t work for me.The forms previewer shows a progress bar and a label says “Initializing renderer”,but nothing happened next.Do you have any idea about the cause of this case?

        1. Adam Pedley

          Unfortunately not. Its in a preview state at the moment and very buggy. I would try with a very simple app, and restart Visual Studio as well. It took me a few tries just to even get it working. I would recommend GorillaPlayer at the moment.

  6. Alan

    Hi Adam; clean install of Visual studio for mac, following the instructions, getting started Xamarin Forms and the renderer (preview) just hangs, with spinning circle.

    have tried closing and re-opening, making sure project is built, Xamarin Forms nuget is up to date etc, no luck. Any suggestions?

    1. Adam Pedley

      Visual Studio for Mac is still in preview and having a preview IDE with preview feature is probably going to be impossible to work. Try with Xamarin Studio, if you can get that to work, then I would wait on the VS for Mac until its officially released and the team responsible for the Previewer have had a chance to update.

  7. Tony Lugg

    If you are patient, Xamarin Forms is fantastic. It sure beats Tools for Cordova we were previously using. The previewer is really bad, but it will improve with MS owning it. My question is, where is the UWP support. The previewer is only iOS and Android? I can’t understand the ongoing lack of attention to the UWP platform, given MS is now involved. Have they, themselves, given up on it?

    1. Adam Pedley

      Windows / UWP has always been an issue with me. Xamarin continue to assure me its just as high a priority as the other platforms, and I even heard they are moving to a UWP first approach when they develop features for Xamarin, but their actions continue to disprove that. I certainly believe they won’t give up on UWP, but I am not sure it will ever get the attention iOS and Android get, and thats just putting attention where the user base is.

      WPF support is coming soon though, so it might be the beginning of a change, as the number of platforms they support is starting to increase quite a bit.

  8. Craig Johnson

    I don’t intend to look a gift Forms.Previewer in the mouth, just please know it is very bad right now due to Java.exe maxing out all cores and continuously consuming memory until the system goes down.

Leave A Comment?