Question

在我的应用中，我需要一个能保存用户个人资料的页面，但我一直在努力用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;
    }
}

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

Answer 2

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

您只需将一个属性应用于该类，您将获得使用C＃（即性能）的相同好处，但您将能够轻松地在声明性中定义您的元素（即与XAML一样）。

用C＃创建复杂布局[Xamarin Forms]

2 个答案: