What is the <views:...> command in Xaml and how do I use it/find reference for it?

Question

Trying to implement the nifty animation solution described here: https://www.kymphillpotts.com/simple-animation-with-xamarin-forms/

But when I cut and paste this code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Animation.AnimationPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Animation" xmlns:views="clr-namespace:Animation.Views" 
BackgroundColor="#181818">
<Grid Padding="0" ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="AUTO" />
    </Grid.RowDefinitions>

    <Image x:Name="MainImage" Grid.Row="0" Grid.RowSpan="2" Aspect="AspectFill" Source="mugello.jpg">
        <Image.GestureRecognizers>
            <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped" />
        </Image.GestureRecognizers>
    </Image>

    <views:ExpandBar x:Name="ExpandBar" Grid.Row="1" Padding="0" TranslationY="1" VerticalOptions="End" />

    <views:DescriptionPane x:Name="BottomFrame" Grid.Row="1" IsVisible="true" Text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass." VerticalOptions="End" />

    <views:Title x:Name="Title" Grid.Row="0" Margin="0,40,0,0" HorizontalOptions="Start" VerticalOptions="Start" />
</Grid>

I end up with a lot of errors around the <views:...> code, saying “missing an assembly reference?”

This is a particularly hard thing to search Google for, because when you search <views:..., even if you include the quotation marks, google just discard the punctuation and you end up simply getting tons of pages on MVVM.

It would be awesome if somebody could tell me how to use this command, and probably even better, how to find documentation on it!

Answer 1

Okay, it's partially a namespace thing, but that's not the whole story, and for the sake of anyone else encountering this confusion, here's the whole answer.

First off, yes, the namespace thing is how the word views gets in there, and it's in this line at the start of the file:

xmlns:views="clr-namespace:Animation.Views"

...the word views there can be anything, btw, as long as you use it consistently in the rest of the commands on the same page. This basically just points to the path where the view definitions are.

And that's the other part of this, that for this to work, there must be other Xaml files somewhere with ContentView definitions. And the part of the namespace definition that comes after clr-namespace: has to indicate the namespace declared at the head of the codebehind for those other Xaml files.

And, crucially, those other files are not shown on the blog post that the original code comes from.

It's possible that part is totally obvious to people with more experience. But it wasn't to me.

So for a complete example here's a Xaml file that would define a view called ContentDingle:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.ContentDingle">
    <Grid ColumnSpacing="0" RowSpacing="0">
        <Label 
            Text="I can now be referenced with the views command!"
            VerticalOptions="Center" />
    </Grid>
</ContentView>

...and the only change necessary to the code-behind is to change the superview to ContentView instead of ContentPage.

And then here's how you can reference it in a different Xaml file, with no modification necessary to the codebehind:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    x:Class        ="MyApp.ContactDingleShowingPage"
    xmlns         ="http://xamarin.com/schemas/2014/forms"
    xmlns:x        ="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views    ="clr-namespace:MyApp"
    BackgroundColor="#181818">
    <Grid>
        <views:ContentDingle/>
    </Grid>
</ContentPage>

The part of this that all the other answers were missing is the explanation of the separate files, and how they should be declared, and how to reference them. This is probably noob stuff, again, but hopefully it's of help to other noobs out there.

Answer 2

You wouldn't get those errors only if you replace your above code with this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Animation.AnimationPage" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Animation" xmlns:views="clr-namespace:Animation.Views" BackgroundColor="#181818">

<Grid Padding="0" ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="AUTO" />
    </Grid.RowDefinitions>

    <Image x:Name="MainImage" Grid.Row="0" Grid.RowSpan="2" Aspect="AspectFill" Source="mugello.jpg">
        <Image.GestureRecognizers>
            <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped" />
        </Image.GestureRecognizers>
    </Image>

    <views:ExpandBar x:Name="ExpandBar" Grid.Row="1" Padding="0" TranslationY="1" VerticalOptions="End" />

    <views:DescriptionPane x:Name="BottomFrame" Grid.Row="1" IsVisible="true" Text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass." VerticalOptions="End" />

    <views:Title x:Name="Title" Grid.Row="0" Margin="0,40,0,0" HorizontalOptions="Start" VerticalOptions="Start" />
</Grid>

This is the code I found from the link you provided, surely there is a Contentpage and it has the namespace defined in it. I don't know why you did not find it.

as others have already told you, view here is a namespace. Learn what a namespace is from Here