In Xamarin XAML, wie setze ich einen Constraint auf einem RelativeLayout mit einem Style?

Question

Ich habe Schwierigkeiten, die XAML-Syntax zu erarbeiten, um Constraints auf eine RelativeLayout unter Verwendung einer Style anzuwenden.

Das erste Stück von Xamarin XAML unten zeigt ein Paar verschachtelte RelativeLayout Elemente, die zum Erstellen eines einfachen Layouts verwendet werden (das innere Element legt einfach einen Rand um einen Bereich, zu dem ich anderen Inhalt hinzufügen kann). Diese Version des Codes erstellt und läuft gut auf iOS und 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> 

Was Ich mag würde, es zu tun das gleiche Layout auf mehreren Seiten verwenden, so möchte ich die RelativeLayout Zwänge in eine Style setzen. Dieser zweite Teil des Codes analysiert nicht oder läuft nicht, aber ich hoffe, er zeigt, was ich zu erreichen versuche. Wenn ich die richtige Syntax dafür bekommen kann, ist die Idee, dass die Style kann dann in eine gemeinsame Datei verschoben werden, so dass ich es problemlos über mehrere Instanzen von ContentPage wiederverwenden kann.

<?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> 

Bitte kann mir jemand mit der Syntax dafür helfen?

Dies ist ein Link zu einem vollständigen Beispiel (die offensichtlich Xamarin erfordert installiert werden und benötigt die nuget Pakete wiederhergestellt werden): 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>