Xamarin - Android

Dicas de Xamarin - Forms

Estrutura Básica StackLayout

<?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="XamarinM1.ParOuImpar">
    <ContentPage.Content>
        <StackLayout> 
            <Label Text="Determina se um número é par ou impar" />
            <Entry x:Name="edtValor" Keyboard="Numeric" Placeholder="Informe um número" />
            <Button x:Name="btnExecutar" Text="Executar" />
           <Label x:Name ="lblResp" />
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

No arquivo ParOuImpar.xaml.cs public partial class ParOuImpar : ContentPage
{
public ParOuImpar ()
{
InitializeComponent ();
btnExecutar.Clicked += BtnExecutar_Clicked;
}

private void BtnExecutar_Clicked(object sender, EventArgs e)
{
int n = Convert.ToInt32(edtValor.Text);
string resp = "O número " + edtValor.Text + " é ";
if (n % 2 ==0)
{
resp += "par";
}
else
{
resp += "Impar";
}
lblResp.Text = resp.ToString();
}

Exemplo de Grid

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:LayoutGrid"
            x:Class="LayoutGrid.MainPage">

</ContentPage>

Dicas

Aspect="AspectFill" à redimensiona a imagem, preenchendo toda a tela.
Exemplo: <Image x:Name="foto" Source="before_cookie" Aspect="AspectFill" />
Clicked à Gera evento.
Exemplo: <Button Text="Comer!!!" Clicked="Button_Clicked"/>
No arquivo MainPage.xaml.cs, observe o código gerado abaixo:
private void Button_Clicked(object sender, EventArgs e)
{

}
Deixe o código do botão, conforme abaixo:
private void Button_Clicked(object sender, EventArgs e)
{
Button btn = (Button)sender; // Converte para objeto button
btn.Text="Hummm! Que gostoso!!!"; // Atribui o que está entre aspas, através da propriedade text
foto.Source = "after_cookie"; // Carrega a outra imagem
}
Propriedade Margin à permite especificar a margem do controle.
Exemplo: <Image x:Name="foto" Source="before_cookie" Aspect="AspectFill" Margin="20" />

HorizontalOptions="CenterAndExpand" à Centraliza o conteúdo na horizontal e expande o controle (label, entry, button) para ocupar todo o espaço

VerticalOptions="CenterAndExpand" à Centraliza na vertical
Exemplo: <Label Text="Valor Unitário" HorizontalOptions="CenterAndExpand" />
Obs: Pode ser colocado somente center, porém o efeito não é mesmo, pois ele apenas centralizará na linha ou coluna atual.
<Button Text="-" HorizontalOptions="FillAndExpand"/> à Preenche todo o espaço disponível na tela do dispositivo
HorizontalOptions="EndAndExpand" à Vai para esquerda e se expandir
HorizontalOptions="StartAndExpand" à Vai para o início e se expandir
HorizontalOptions="FillAndExpand" à Preenche e se expandir

Para utilizar mais de um botão, sem especificar a propriedade Name, utilize a codificação abaixo:
private void Button_Clicked(object sender, EventArgs e)
{
Button bt = (Button)sender; // Variável do tipo Button, que vai receber a conversão para o button do objeto sender. O sender é button, que fez a chamada do evento.
}
Obs: A primeira linha (private void... e as chaves), já é gerada automaticamente no arquivo AXML. Exemplo:
<Button Text="-" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked" />

private void Button_Clicked(object sender, EventArgs e)
{
Button btn = (Button)sender; // Converte a variável tipo button btn para botão, através de sender
btn.Text = "Hummm! Que gostoso!!!";
imgFoto.Source = "after_cookie"; // Exibe imagem
}
Navegação Hierárquica
Exemplo:
public App()
{
InitializeComponent();

MainPage = new NavigationPage(new MainPage()); // NavigationPage é para navegação hierárquica // new MainPage();
}

Exemplo:
private async Task Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new PageExemplo()); // Navega para outra página
}
Obs: No private foi necessário alterar para permitir a navegação hierárquica. Esse conceito é conhecido como empilhamento.

Navigation.PushAsync(new Page2()); // Carrega uma página
Navigation.PopToRootAsync(); // Volta para o início (reinicia o app)
Navigation.PopAsync(); // Desempilha a página atual, e volta para o MainPage

CSS – Interno
Exemplo de css interno:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:AppCSS"
x:Class="AppCSS.MainPage">
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
^contentpage {
background-color: deepskyblue;
}
]]>
</StyleSheet>
</ContentPage.Resources>

</ContentPage>
Importante que o Xamarin Forms esteja no mínimo na versão 3.0 e o Visual Studio esteja na versão 15, para garantir o funcionamento do css.

Exemplo de CSS Externo
<ContentPage.Resources>
<StyleSheet Source="/estilo.css" />
</ContentPage.Resources>

No Solution Explorer, botão direito sobre o nome do projeto / Add / Web / Style sheet
Exemplo do arquivo css:
^contentpage { à Indica que é uma informação global o símbolo do ^ da contentpage. Ou seja: todos os contentpage vão ter este comportamento
background-color: deepskyblue;
}

#lbl { à indica pelo símbolo # o nome do componente na mainpage
background-color: yellow;
}

#stacklayout { à todos os stacklayout (não os globais) vão ter a cor de fundo abaixo
background-color: bisque;
}

.lbltitulo { à nome do estilo que será definido na mainpage
margin: 5;
font-style: bold;
font-size: medium;
text-align: center;
}

button { à todos os botões receberão as propriedades abaixo
border-color: blueviolet;
border-width: 3;
color: blue;
}

stacklayout image { à Se existir imagens no stacklaylayout, receberão as propriedades abaixo
height: 200;
width: 200;
}

Obs.: Na classe o nome da mesma é casesentitive.

Views (Controles) – Define como será o seu conteúdo. Ela possui propriedades, como:
- Fonte, cor, alinhamento tanto vertical e horizontal.
Views Básica: Label, Image, Button, BoxView, Listas (ListView), Entry (Entrada de Texto), Editor (Entrada de Texto), Picked, DatePicker, TimePicker, Stepper, Slide, Switch (Todas de Seleção), FeedBack – ActivityIndicator e temos o ProgressBar.

this.BackgroundColor = Color.Azure; // Atribui cor de fundo ao seu código .cs
Exemplo:
ContentView content = new ContentView // Instancia a classe ContentView
        {
            BackgroundColor = Color.Aqua, // Cor de fundo
            HorizontalOptions = LayoutOptions.Fill, // Alinhamento na Horizontal
            Content = new Label // Cria o Label em tempo de execução
            {
                Text = "Seja Bem-Vindo ao Xamarin Form - ContentView", // Conteúdo que será exibido no Label
                FontSize = 15, // Tamanho da fonte
                FontAttributes = FontAttributes.Italic, // Estilo itálico
                TextColor = Color.Black // Cor do Label
            },
            Padding = new Thickness(50)
        };

BoxView – Cria um box gráfico colorido. Ele serve como espaço útil que pode ser reaproveitado depois pelo design. É utilizado quando em um aplicativo, precisa ser inserida uma imagem, ou qualquer outro tipo de objeto, como logotipo.
Exemplo:
BoxView box = new BoxView
{
Color = Color.Blue,
WidthRequest = 250, // Largura do objeto
HeightRequest = 250, // Altura
HorizontalOptions = LayoutOptions.CenterAndExpand, // A partir do centro vai expandido
VerticalOptions = LayoutOptions.Fill
};

Exibindo o ContentView e o BoxView
public PaginaContentVew ()
{
this.Content = new StackLayout
{
Children = // Declara como filho da classe ContentView
{
content, // Exibe o primeiro ContentView
box, // Exibe o BoxView
content2 // Exibe o segundo ContentView
}
};
}
Image – Permite a inserção de imagens
Exemplo:
// Controle Image
Image img = new Image
{
Source = "Assets/chama-violeta-3.jpg", // Busca a imagem que será exibida no Controle Image
Aspect = Aspect.AspectFit,
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.CenterAndExpand,
WidthRequest = 250,
HeightRequest = 250
};

public PaginaContentVew ()
{
this.Content = new StackLayout
{
Children = // Declara como filho da classe ContentView
{
content, // Exibe o primeiro ContentView
//box, // Exibe o BoxView
img, // Exibe a imagem
content2 // Exibe o segundo ContentView
}
};
Classe TapGestureRecognizer – Reconhecimento de Toque na Imagem
Exemplo:

public class PaginaReconhecimentoToque : ContentPage
{
// Controle Image
Image img = new Image
{
Source = "Assets/chama-violeta-3.jpg", // Busca a imagem que será exibida no Controle Image
Aspect = Aspect.AspectFit,
VerticalOptions = LayoutOptions.Fill,
HorizontalOptions = LayoutOptions.CenterAndExpand,
WidthRequest = 250,
HeightRequest = 250
};
public PaginaReconhecimentoToque()
{
var TapGestureRecognizer = new TapGestureRecognizer(); // Classe para reconhecimento de toque em imagens
TapGestureRecognizer.Tapped += (s, e) => // Quando ocorrer o evento Tapped
{
img.Opacity = .4; // Transparência
};

img.GestureRecognizers.Add(TapGestureRecognizer);

ContentView content = new ContentView // Instancia a classe ContentView
{
BackgroundColor = Color.Aqua, // Cor de fundo
HorizontalOptions = LayoutOptions.Fill, // Alinhamento na Horizontal
Content = new Label // Cria o Label em tempo de execução
{
Text = "Seja Bem-Vindo ao Xamarin Form - Reconhecimento de Toque na Imagem", // Conteúdo que será exibido no Label
FontSize = 15, // Tamanho da fonte
FontAttributes = FontAttributes.Italic, // Estilo itálico
TextColor = Color.Black // Cor do Label
},
Padding = new Thickness(50)
};

this.Content = new StackLayout
{
Children = // Declara como filho da classe ContentView
{
content, // Exibe o primeiro ContentView
//box, // Exibe o BoxView
img, // Exibe a imagem
}
};
}

Imagem de fundo:
XAML:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.Page"

BackgroundImage="bg.png">

Materiais
https://material.io/tools/icons/?style=baseline
http://fabiomilson.github.io/