State Triggers no Blend

Em posts anteriores, vimos que o Blend for Visual Studio é capaz de automatizar algumas tarefas, de forma que conseguimos trocar a criação de código por apenas alguns cliques. Também vimos uma forma de criar transições animadas do layout da tela, usando VisualStates. Hoje, veremos como ativar essas mudanças de estado automaticamente quando algum objeto tem uma propriedade alterada, usando o Blend for Visual Studio 2015.

Para exemplificar, vamos criar uma aplicação que possui 2 estados: o primeiro com uma caixa de informações colapsada, e outro com ela expandida. O estado atual será definido por um checkbox.

state_triggers_no_blend_19_resultado_contraidostate_triggers_no_blend_20_resultado_expandido

Criando a aplicação

Abra o Blend e crie um novo aplicativo Universal Windows em branco. Vamos chamá-lo de StateTrigger.

state_triggers_no_blend_01_novo_projeto

No projeto recém criado, abra o MainPage.xaml. Usaremos aqui um retângulo para representar a caixa. Clique na ferramenta Rectangle e o insira na página.

state_triggers_no_blend_02_inserir_retangulo

Para inserir o checkbox, precisamos clicar com o botão direito na ferramenta Button e selecionar a opção CheckBox. Insira o objeto na página, em cima do retângulo.

state_triggers_no_blend_03_inserir_checkbox

state_triggers_no_blend_04_checkbox_inserido

Vamos mudar o texto do checkbox para “Expandir”. Clique no mesmo, vá na propriedade Common > Content, do lado direito da tela, e digite “Expandir”.

state_triggers_no_blend_05_mudar_texto_checkbox

Hora de criar os estados. Do lado esquerdo da tela, onde se encontra o Solution Explorer, clique na aba States.

state_triggers_no_blend_06_aba_states

Clique em Add State Group

state_triggers_no_blend_07_add_state_group

Um novo grupo será criado, chamado VisualStateGroup. Vamos criar um estado dentro desse grupo. Clique em Add state.

state_triggers_no_blend_08_add_state

Temos agora dois estados: o estado Base, que contém nossa caixa de informações colapsada, e o outro que acabamos de criar, onde a mesma estará expandida. Assegure-se de que o novo estado está selecionado (ele deve possuir um ícone vermelho ao lado do nome; se não estiver, basta clicar nele) e altere o tamanho do retângulo, deixando-o maior.

state_triggers_no_blend_09_alterar_tamanho_retangulo

Nota: esse ícone vermelho significa que as alterações feitas na página estão sendo gravadas e estarão disponíveis somente naquele estado. Se ele não estivesse presente, ao mudarmos o tamanho do retângulo, isso seria alterado na base também.

Temos os dois estados prontos. Só falta criar o trigger para alterá-los. Clique no ícone ao lado do nome do estado, Edit Adaptive Triggers.

state_triggers_no_blend_10_edit_adaptive_triggers

Uma janela se abrirá para escolhermos qual trigger usar. Abra a lista de itens e escolha <Other Type>.

state_triggers_no_blend_11_other_type

Escolha a opção State Trigger e clique em Ok.

state_triggers_no_blend_12_state_trigger

Clique em Add.

state_triggers_no_blend_13_add

Para fazer um bind do trigger com o checkbox, precisaremos futuramente clicar no mesmo. Para isto, vamos arrastar a janela do Editor de StateTriggers de forma que o checkbox fique visível.

Na janela do editor, na parte Properties > Miscellaneous, existe atualmente uma única propriedade: isActive. Ela indica se aquele estado estará ativo ou não. Do lado direito, há um quadradinho com opções para criar bindings para o isActive. Vamos clicar nesse quadradinho, e então escolher Bind to Element.

state_triggers_no_blend_14.1_clicar_bind_to_element.PNG

state_triggers_no_blend_15_bind_to_element

Clique no checkbox. Se ele não estiver visível (caso a janela do editor de StateTriggers esteja sobrepondo esta área, por exemplo), também é possível clicar no nome do elemento em Objects and Timeline.

state_triggers_no_blend_16_clicar_nome_checkbox

Uma janela aparecerá onde podemos escolher qual propriedade do checkbox vai ativar a mudança de estados. Vamos escolher isChecked. Clique em Ok e, em seguida, Ok novamente.

state_triggers_no_blend_17_escolher_propriedade_checkbox

state_triggers_no_blend_18_editor_triggers_ok

Pronto! Ao rodarmos a aplicação, vemos que o estado atual – caixa expandida ou colapsada – é ativado conforme a propriedade isChecked do checkbox está ativada ou não.

state_triggers_no_blend_19_resultado_contraidostate_triggers_no_blend_20_resultado_expandido

Podemos fazer a troca de estados com qualquer propriedade de qualquer elemento. Não deixe de experimentar outras opções!

Até a próxima!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s