首页 文章

在Xamarin XAML中,如何使用Style在RelativeLayout上设置约束?

提问于
浏览
14

我正在努力解决XAML语法,使用 Style 将约束应用于 RelativeLayout .

下面的第一个Xamarin XAML显示了一对用于构造简单布局的嵌套 RelativeLayout 元素(内部元素只是在我可以添加其他内容的区域周围放置边距) . 此版本的代码在iOS和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>

我想做什么在多个页面上使用相同的布局,所以我想将 RelativeLayout 约束放入 Style . 第二段代码不解析或运行,但我希望它能显示我想要实现的目标 . 如果我能为此获得正确的语法,那么可以将 Style 移出到共享文件中,这样我就可以轻松地在 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>

任何人都可以帮我解决这个问题吗?

这是一个完整示例的链接(显然需要安装Xamarin并需要恢复nuget包):XAML Layout Example

1 回答

  • 7

    试试这个:

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

相关问题