Как разместить контент в строках, используя FlexLayout и CSS - PullRequest
Новая
       70

Как разместить контент в строках, используя FlexLayout и CSS

0 голосов
/ 24 сентября 2018

Я работаю над дизайном экрана входа в систему, используя Xamarin.FlexLayout и CSS

Окончательный дизайн должен выглядеть следующим образом:

enter image description here

Мой текущий код XAML: 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>

    <ContentPage.Resources>
        <StyleSheet Source="/Assets/Styles/App.css" />
    </ContentPage.Resources>

    <FlexLayout Direction="Column" AlignItems="Center" JustifyContent="SpaceBetween">

        <!-- Header -->
        <FlexLayout x:Name="FlexLayoutHeader" Direction="Row" AlignItems="Center" JustifyContent="Center">
            <Label Text="ola" FlexLayout.Basis="10%" />
            <Label x:Name="LblTitle" Text="" />
        </FlexLayout>

        <!-- Content -->
        <Entry x:Name="EntryEmail" Placeholder="" HorizontalOptions="Start" />

        <Entry x:Name="EntryPassword" IsPassword="true" Placeholder="" HorizontalOptions="Start"  />

        <Button x:Name="BtnLogIn" Text="" Command="{Binding LogInCommand}" />

        <Label x:Name="LblForgotPassword" Text="">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding ForgotPasswordCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>

        <Label x:Name="LblSignUp" Text="">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding SignUpCommand}" NumberOfTapsRequired="1"></TapGestureRecognizer>
            </Label.GestureRecognizers>
        </Label>

        <!-- Footer -->
        <FlexLayout x:Name="FlexLayoutFooter" Direction="Column" AlignItems="Center" JustifyContent="SpaceEvenly">
            <Label x:Name="LblFooter" Text="" />
        </FlexLayout>

    </FlexLayout>

</ContentPage>

Конечно, мой текущий XAML довольно далек от окончательного дизайна, но я не могу понять, как работает размещение в FlexLayout.

Буду признателен за вашу помощь

...