In Xamarin XAML, how do I set a Constraint on a RelativeLayout using a Style?

Question

I am struggling to work out the XAML syntax to apply constraints to a RelativeLayout using a Style.

The first piece of Xamarin XAML below shows a pair of nested RelativeLayout elements used to construct a simple layout (the inner element simply puts a margin around an area to which I can add other content). This version of the code builds and runs fine on iOS and Android.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App2.Page1">
    <RelativeLayout BackgroundColor="Gray">
        <RelativeLayout BackgroundColor="Maroon"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.9,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.9,Constant=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.05,Constant=0}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.05,Constant=0}">
            <BoxView Color="Yellow"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"/>
        </RelativeLayout>
    </RelativeLayout>
</ContentPage>

What I would like to do it use the same layout on multiple pages, so I want to put the RelativeLayout constraints into a Style. This second piece of code does not parse or run, but I hope it shows what I am trying to achieve. If I can get the right syntax for this, the idea is that the Style can then be moved out into a shared file, so I can easily re-use it across multiple instances of ContentPage.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App2.Page2">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="LayoutStyle" TargetType="RelativeLayout">
                <Setter Property="BackgroundColor" Value="Maroon"/>
                <Setter Property="HeightConstraint">
                    <Setter.Value>"Type=RelativeToParent,Property=Height,Factor=0.9,Constant=0"</Setter.Value>
                </Setter>
                <Setter Property="WidthConstraint">
                    <Setter.Value>"Type=RelativeToParent,Property=Width,Factor=0.9,Constant=0"</Setter.Value>
                </Setter>
                <Setter Property="YConstraint">
                    <Setter.Value>"Type=RelativeToParent,Property=Height,Factor=0.05,Constant=0</Setter.Value>
                </Setter>
                <Setter Property="XConstraint">
                    <Setter.Value>"Type=RelativeToParent,Property=Width,Factor=0.05,Constant=0</Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <RelativeLayout BackgroundColor="Gray">
        <RelativeLayout Style="LayoutStyle">
            <BoxView Color="Yellow"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.25,Constant=0}"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.25,Constant=0}"/>
        </RelativeLayout>
    </RelativeLayout>
</ContentPage>

Please can anyone help me out with the syntax for doing this?

This is a link to a complete example (which obviously requires Xamarin to be installed and needs the nuget packages to be restored): XAML Layout Example

Answer 1

Try this:

<ResourceDictionary>
    <Style x:Key="LayoutStyle" TargetType="RelativeLayout">
        <Setter Property="BackgroundColor" Value="Maroon"/>
        <Setter Property="RelativeLayout.HeightConstraint" Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.9,Constant=0}"/>
        <Setter Property="RelativeLayout.WidthConstraint" Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.9,Constant=0}"/>
        <Setter Property="RelativeLayout.YConstraint" Value="{ConstraintExpression RelativeToParent,Property=Height,Factor=0.05,Constant=0}"/>
        <Setter Property="RelativeLayout.XConstraint" Value="{ConstraintExpression RelativeToParent,Property=Width,Factor=0.05,Constant=0}"/>
    </Style>
</ResourceDictionary>