Windows Universal App XAML e WPF

  • View
    155

  • Download
    2

Embed Size (px)

Text of Windows Universal App XAML e WPF

WPF

WPF

XAML

XAMLProgramao declarativaExtensible Application Markup Language (XAML)

Linguagem de marcao para interfaces grficas

Facilita a colaborao entre designers e desenvolvedoresSeparao entre cdigo e contedo (Programao - Lgica)

Manipulao facilitada para ferramentas

Arquivos XAML, quando representados como texto, so arquivos XML que geralmente tem a extenso .xaml

Sintaxe de atributoPropriedades de um objeto com frequncia podem ser expressas como atributos do elemento de objeto. A sintaxe de atributo a sintaxe mais simplificada de configurao de propriedades e a mais intuitiva para o desenvolvedores que j usaram alguma linguagem de marcao

Click here

Controles de Layout - GridTrs definies para altura e largura de linhas e colunas

Fixo - especificado em pixel independenteAutomtico - o tamanho necessrioProporcional - tamanhos relativos ao espao total (suporta multiplicadores ou pesos), mudam se o painel redimensionado

Controles de Layout - Grid

1 /3 do espao 1 /3 do espao 1 /3 do espao1 /4 do espao 2 /4 do espao 1 /4 do espao1 /4 do espao 2 /4 do espao 1 /4 do espao

Controles de Layout - GridPropriedades RowSpan e ColumnSpan

Especificar o nmero de linhas ou colunasElementos podem se expandir por linhas e colunas

2 clulas

4 clulas

Desafio

Aprendemos como usar diferentes controles de layouts e assim podemos organizar os elementos que quisermos para os nosso aplicativos.

Agora vamos praticar, usando os controles que foram apresentados e vamos criar o que esto nessas imagens abaixo em XAML, e como vimos o que devemos considerar principalmente na escolha do controle como o posicionamento de cada um funciona. Desafio

Controles de UIControles so objetos individuais ou compostos que possibilitam uma relao iterativa entre si e com o usurio

Ex.: Button, CheckBox, ListBox, TextBox, etc

Controles de TextoApresentam uma string de texto

Texto simples somente de leituraTextBlock

Caixa de entrada de textoSuporta linha simples ou mltiplas linhasTextBox

Caixa de entrada de texto mascaradaPasswordBox

Texto com formatao ricaRichTextBlock e RichEditBox

Controles de Texto

TextBlock using Inlines

Microsoft Innovation Centers (MIC) are facilities that provide world class resources and support for students, entrepreneurs and startups. MICs work broadly across their communities, providing services, solutions and programs that meet the needs of many audiences, including Students, Entrepreneurs, Governments, and Local Industries.

Resource ControlsSource propriedade que atribui o contedo do controle como uma URL absoluta ou relativa

Ex.: Image, MediaElement, WebView

Content ControlsContent propriedade que atribui o contedo do controle (qualquer objeto possvel de ser renderizado)

Ex: Button, CheckBox, etcEsses tipos de controles aceitam somente um nico contedo filho

Contedo obtido atravs de ToString() ou OnRender()

Importante: mudar o contedo de um controle no muda suas caractersticas bsicas (pense no comportamento de um Button); para alterar caractersticas mais profundas utiliza-se o control template

Sintaxe do tipo"Property Element"Content Controls

Contedo

Controles de BotoSo controles com ao associada

Dispara eventos de clickButton

HyperlinkButton

Dispara uma navegao entre pginasClique

Item ControlsItems propriedade que indica a coleo de objetos do tipo de item apropriado para o controle

ItemsSource propriedade que indica uma coleo IEnumerable como fonte de dados

Ex.: ListBox (ListBoxItem), ComboBox (ComboBoxItem), FlipView (FlipViewItem), etc

Item Controls

ObservableCollection Uris = new ObservableCollection();Uris.Add(new Uri("https://dev.windowsphone.com/dashboard"));Uris.Add(new Uri("https://appdev.microsoft.com/storeportals/"));Uris.Add(new Uri("http://dev.windows.com/"));UriBox1.ItemsSource = Uris;

Elementos Grficos2D e 3DAcelerao de hardwarePreferncia por desenhos vetoriaisCaractersticas

Categorias de elementos

Figuras (Shapes)Pincis (Brushes)Transformaes (Transforms)

BrushesSolidColorBrush: diferentes preenchimentos para cores slidas LinearGradientBrush: preenchimento para gradientes linearesImageBrush: preenchimento para imagensWebViewBrush: usado para processar o contedo de um controle WebView como uma soluo para o fato de que o prprio WebView sempre prestados em cima de outros controles.Responsvel pela formatao dos controles

SolidColorBrush

LinearGradientBrush

Ex.: texto movido para o ponto (9,6) a partir de seu ponto inicial (0,0).

Ponto Origem (0,0)(9,6)

Skew TransformColoca um objeto em perspectiva atravs de ngulos especificados, AngleX e AngleY. Cria uma iluso 3-D nos objetos 2-D

Ex.: texto em perspectiva num ngulo de 20 no eixo X e 10 no ngulo Y.

Eventos e Comandos

EventosOs conceitos de eventos em Windows Runtime so semelhantes ao modelo de evento nas linguagens de programao mais usadas

Define-se um mtodo para tratar o evento quando este mesmo for disparado

Manipuladores de EventosPara objetos que so elementos da interface do usurio e foram declarados em XAML, o cdigo de manipulador de eventos definido na classe parcial que opera como o code-behind de uma pgina XAML. Manipuladores de eventos so mtodos que voc escreve como parte da classe parcial associada ao XAML

Microsoft Innovation Center

private void btName_Click(object sender, RoutedEventArgs e){ Button bt = (Button)sender; if (bt != null) {bt.Foreground = new SolidColorBrush(Colors.SpringGreen); } }

Manipuladores de Eventos - AdicionandoXAML no a nica forma de atribui um manipulador de eventos a um objeto

Voc registra o manipulador fazendo referncia ao nome do mtodo manipulador de eventos no lado direito do operador

btName.Click += btName_Click;btName.Click += new RoutedEventHandler(btName_Click);Obs.: Se voc est usando cdigo para adicionar manipuladores de eventos a objetos que aparecem na interface do usurio em tempo de execuo, uma prtica comum adicionar esses manipuladores em resposta a um evento de ciclo de vida do objeto ou de retorno de chamada como, por exemplo, Loaded ou OnApplyTemplate, de maneira que os manipuladores de eventos no objeto relevante estejam prontos para eventos iniciados pelo usurio no tempo de execuo

Vinculao de Dados (Data Binding)

Vinculao de DadosVinculao (data binding) o processo de estabelecer uma conexo entre valores de propriedades de objetos

Usualmente a fonte um elemento de dados (do ViewModel) e o alvo um componente de interface com o usurio (view)Vinculao tambm acontece entre dois elementos do XAML (esse o tipo mais simples de vinculao)Baseado em um padro Observer para a notificao de alterao dos dados vinculados

Vinculao de Dados - FuncionamentoVinculao (data binding) o processo de estabelecer uma conexo entre valores de propriedades de objetos

Target Object - Objeto Alvo os componentes do XAML (ex. TextBox, Listbox, etc)Dependency Property - A propriedade do objeto que vai receber o dado (ex. Text, Source, etc)Source Object - fonte dos dados (ex. um objeto Pessoa)Property - Um caminho para o valor no Source Object(ex. propriedade Nome)Value Converter - Conversor de valores entre as propriedades caso necessrio (ex. Data de Nascimento)Source ObjectPropertyValue ConverterBindingTarget ObjectDependency Property

Vinculao de Dados

DateTime currentTime = DateTime.Now;txtData.DataContext = currentTime;

Binding ModeSource Object - currentTimeProperty - DayOfWeekTarget Object - txtDataDependency Property - Text

Vinculao de DadosObjeto Binding configura a vinculao

Para especificar a fonte ElementName nome do elemento fonte Source nome do objeto (que no elemento) fonte Usualmente utiliza-se DataContext no elemento alvo RelativeSource caminho do elemento na rvore visual relativo ao objeto alvo Path caminho para a propriedade fontePara especificar o modo de funcionamento Mode especifica a direo do fluxo de dados Converter especifica um objeto de converso de dadosPrincipais propriedades

Vinculao de DadosPropriedade Mode do objeto Binding permite configurar a direo do fluxo de dados

OneWay origem automaticamente atualiza o destino, mas atualizaes do destino no se propagam para a origem; modelo padroTwoWay qualquer alterao na origem ou destino propagada para o outroOneTime origem inicializa o valor do destino quando a vinculao criada, mas no propaga alteraes subsequentes

Vinculao de DadosPadro Observer para notificao de alteraes caso a fonte seja um objeto de negcio de uma aplicao

Objetos devem implementar servios de notificao, como a interface INotifyPropertyChanged ou INotifyCollectionChanged

Para colees utiliza-se usualmente ObservableCollection que j implementa as propriedades necessrias

Vinculao de DadosComo devemos utilizar a propriedade Mode do objeto Binding de forma a facilitar o desenvolvimento e minimizar a quantidade de cdigos para determinadas aes?

Vinculao de Dados