Xamarin Forms - Apresentando o Visual State Manager (VSM) - II

 Neste artigo vou apresentar o Visual State Manager que foi introduzido na versão 3.0 do Xamarin Forms.

Continuando a primeira parte do artigo veremos como implementar o Visual State Manager usando estilos.

Geralmente, é necessário compartilhar a mesma marcação do Visual State Manager entre duas ou mais views. Nesse caso, é mais indicado colocar a marcação em uma definição de estilo.

Neste exemplo vamos definir 3 views Entry :

  1. A view Entry normal;

  2. A view Entry usando o VSM;

  3. A view Entry que iremos usar para habilitar a 2a. view Entry;

A seguir vamos definir um estilo que vai ser aplicado a todas as views Entry.

Recursos Usados

Usando o projeto Xamarin.Forms

Vamos usar o projeto  XF_VSM1 criado no artigo anterior e incluir uma nova Content Page com o nome VSMPage1.xaml.

Para poder exibir esta página basta alterar o código do arquivo App.xaml.cs conforme abaixo:

....
	public App ()
	{
		InitializeComponent();
		MainPage = new VSMPage1();
	}
...

1- Definindo a marcação VSM usando estilos

Vamos definir o código abaixo no arquivo VSMPage1.xaml :

No código estamos definindo três views Entry e um Trigger que esta vinculado a view Entry de nome 'entry3' que vai permitir habilitar a 2a via Entry.

Vamos agora definir a marcação do VSM criando um estilo conforme mostra o código abaixo: 

<?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="XF_VSM1.VSMPage1">
    <StackLayout>

        <StackLayout.Resources>
            <Style TargetType="Entry">
                <Setter Property="Margin" Value="20, 0" />
                <Setter Property="FontSize" Value="18" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="LigthYellow"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Focused">
                                <VisualState.Setters>
                                    <Setter Property="FontSize" Value="Medium" />
                                    <Setter Property="BackgroundColor" Value="LightSalmon" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="LightCoral"/>
                                    <Setter Property="Text" Value="Desabilitado"/>
                                    <Setter Property="TextColor" Value="White"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
            <Style TargetType="Label">
                <Setter Property="Margin" Value="20, 10, 20, 0" />
                <Setter Property="FontSize" Value="Large" />
            </Style>
        </StackLayout.Resources>
        <Label Text="Entry Normal  :" />
        <Entry />
        <Label Text="Entry com VSM :" />
        <Entry>
            <Entry.Triggers>
                <DataTrigger TargetType="Entry"
                             Binding="{Binding Source={x:Reference entry3},Path=Text.Length}"
                             Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Entry.Triggers>
        </Entry>
        <Label Text="Entry para habilitar a 2a. Entry:" />
        <Entry x:Name="entry3"
               Text=""
               Placeholder="Digite algo para habilitar a 2a. Entry" />
    </StackLayout>
</ContentPage>

No estilo definido praticamente repetimos a marcação que já explicamos na primeira parte do artigo.

Agora, todas as views Entry desta página respondem da mesma maneira aos seus estados visuais.

Executando o projeto teremos o seguinte resultado:

Na próxima parte do artigo veremos como criar seu próprio estado visual.

Pegue o código do projeto compartilhado aqui:  XF_VSM2.zip

"Sabendo que, se o nosso coração nos condena, maior é Deus do que o nosso coração, e conhece todas as coisas."
1 João 3:20

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti