【问题标题】:In Xamarin XAML, how do I set a Constraint on a RelativeLayout using a Style?在 Xamarin XAML 中,如何使用样式在 RelativeLayout 上设置约束?
【发布时间】:2016-10-17 23:06:49
【问题描述】:

我正在努力制定 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

【问题讨论】:

    标签: xaml xamarin.forms


    【解决方案1】:

    试试这个:

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

    【讨论】:

    • 谢谢。那确实可以构建和运行;但是,我认为 Xamarin 布局模型中可能存在错误,因为当我将约束移动到样式中时会出现不一致的行为。它不像 CSS,是吗,将规则移动到样式中会降低它在决定应用什么的算法中的分数?我将把它作为 Xamarin 的一个 bug 提出来。
    • 可以通过在元素上提供不同的内联设置来覆盖样式中设置的属性,但规则比 CSS 简单得多。但是 Xamarin.Forms 对没有为布局指定足够的信息非常敏感,这表现为不一致的行为。由于此答案解决了原始问题,请将其标记为已接受的答案。要弄清楚布局发生了什么,除了向 Xamarin 提交错误之外,您还可以使用页面的两个版本的屏幕截图提出另一个问题。
    • 我的错误。我可以踢自己。尝试应用如上所示的样式时,我忘记将“{StaticResource...}”放在说明符中。因此,要 100% 清楚,@DavidS 的答案是完全正确的,并且效果很好。再次感谢您。
    猜你喜欢
    • 1970-01-01
    • 2019-03-23
    • 2014-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多