XAMARIN FORMS Aula 17 - Design da tela de login, navigation

Hoje vamos configurar a Navigation Page, e criar o design da tela de login no Xamarin Forms. Nesta aula, vamos também incluir content pages e manipular rapidamente o XAML e o code behind em C# no nosso visual studio, utilizando o Xamarin Forms, nesta aula.

Código XAML utilizado na aula:

 <Grid>

        <StackLayout>

            <!-- Titulo -->

            <StackLayout Padding="80" VerticalOptions="Start" HorizontalOptions="Center">

                <Label Text="LOGIN" FontSize="Title" TextColor="Black" FontAttributes="Bold"/>

            </StackLayout>

            <!-- Tela de login -->

            <StackLayout VerticalOptions="Center">

                <Frame BackgroundColor="Transparent" Margin="20">

                    <StackLayout>

                        <Label Text="E-mail" FontSize="Body" TextColor="Black" HorizontalOptions="Start"/>

                        <Entry x:Name="TXTEmail" Keyboard="Email" ReturnType="Next"

                           ClearButtonVisibility="WhileEditing"/>

                        <Label Text="Senha" FontSize="Body" TextColor="Black" HorizontalOptions="Start"/>

                        <Entry x:Name="TXTSenha" Keyboard="Default" ReturnType="Done" IsPassword="True"

                           ClearButtonVisibility="WhileEditing" />

                    </StackLayout>

                </Frame>

                <Button x:Name="BTNLogar" Text="Logar" BackgroundColor="Black" TextColor="White"

                    CornerRadius="20" HorizontalOptions="Center"/>

                <Button x:Name="BTNCriar" Text="Não tem uma conta? Criar uma conta."

                    FontAttributes="Italic" TextTransform="None"

                    BackgroundColor="Transparent" TextColor="Gray" 

                    CornerRadius="20" HorizontalOptions="Center"

                        

                        />

            </StackLayout>

        </StackLayout>

        <!-- Botão de "Sobre" -->

        <StackLayout VerticalOptions="End">

            <Button x:Name="BTNSobre" Text="Sobre"

                    FontAttributes="Italic" TextTransform="None"

                    BackgroundColor="Transparent" TextColor="Gray" 

                    CornerRadius="20" HorizontalOptions="Center"/>

        </StackLayout>

        <BoxView x:Name="BVTelaPreta" Color="Black" Opacity="0.5" IsVisible="false"/>

        <ActivityIndicator x:Name="ACTRoda" Color="white" IsVisible="false" IsRunning="False" Scale="0.2"/>

    </Grid>

Abraços e até a próxima!

Seja meu patrão: https://www.patreon.com/newbieaulas/

Para encontrar mais aulas como esta, ou outras diferentes, acesse nosso índice clicando aqui!