在 C# [Xamarin Forms] 中创建复杂布局答案

【问题标题】：Creating an Complex Layout in C# [Xamarin Forms]在 C# [Xamarin Forms] 中创建复杂布局
【发布时间】：2017-09-13 10:09:43
【问题描述】：

在我的应用程序中，我需要一个保存用户个人资料的页面，但我一直在努力以 xamarin 表单创建复杂的 UI。

我在 xamarin 文档上看到了这一点，但我不确定如何使用 XAML，而且他们没有任何示例说明如何在 c# 中获得相同的外观。任何帮助将不胜感激！

文档页面：https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/stack-layout/

XAML 代码：

<?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="TheBusinessTumble.StackLayoutPage"
BackgroundColor="Maroon"
Title="StackLayouts">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon">
                <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100" VerticalOptions="Start" Color="Gray" />
                <Button BorderRadius="30" HeightRequest="60" WidthRequest="60" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" />
                <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon">
                    <Label Text="User Name" FontSize="28" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold" />
                    <Entry Text="Bio + Hashtags" TextColor="White"
                        BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
                </StackLayout>
                <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5">
                    <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start">
                        <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                        <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                    </StackLayout>
                    <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                        <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" />
                        <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
                    </StackLayout>
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
                    <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Interests:" TextColor="White"
                        HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
                    <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
                <StackLayout Orientation="Horizontal">
                    <Label FontSize="14" Text="Ask me about:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/>
                    <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" />
                </StackLayout>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

我目前拥有的：

public class ProfilePageCS : ContentPage
{
    public ProfilePageCS()
    {
        var layout = new StackLayout();

        var boxOne = new BoxView
        {
            Color = Color.Blue,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 450
        };

        var boxTwo = new BoxView
        {
            Color = Color.Green,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 175
        };

        layout.Children.Add(boxTwo);
        layout.Children.Add(boxOne);
        layout.Spacing = 0;
        Content = layout;
    }
}

【问题讨论】：

这专门称为 XAML。
开枪！好的，谢谢指正
所以您的问题本质上是“请为我将这段巨大的 XAML 翻译成 C#”？这并不适合 SO。向我们展示您正在尝试构建的 UI 模型并就您遇到问题的部分提出特定问题可能更合适。
对不起，我不是这么想的。我很难理解如何使用 c# 实现相同的目标。我基本上想要做的是将屏幕分成 30% 的顶部，其余部分是下半部分。在上半部分，我想将一张带有标签的图片居中。在过去的 8 个小时里我一直在做这个，但根本无法前进:(
看，这个问题比你实际问的要好得多。我个人会从 Grid 开始，其中第一行是 30%，第二行是 70%。

标签： c# xml user-interface xamarin.forms

【解决方案1】：

如果您刚开始使用 Xamarin Forms，那么学习 XAML 并使用它来描述页面而不是使用代码确实值得。

您采用的方法会导致代码难以阅读和维护。您最终会在同一个文件中同时使用 UI 和业务逻辑。您将无法使用 MVVM 模式，并且单元测试变得更加困难。

Here is the first page 在帮助您精简 XAML 的系列中。互联网上还有很多其他资源。

这是您上面描述的布局的 XAML。

<?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="Example.Pages.MainPage">

    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="7*"/>
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0">
            <Image Source="image.png"/>
            <Label Text="Image Caption"/>
        </StackLayout>

    </Grid>

</ContentPage>

【讨论】：

【解决方案2】：

您可以只使用 XAML 编译。 https://developer.xamarin.com/guides/xamarin-forms/xaml/xamlc/

您只需将属性应用到类，您将获得与使用 C# 相同的好处（即性能），但您将能够轻松地以声明方式定义您的元素（即与 XAML 一样）。

【讨论】：