Home

Laboratório Prático do MSDN - Center

1. eeeeeeeessssseseeeeeneeneeeeennnnn nnn 12 Tarefa 4 Adicionar um ToolBarTray um StatusBar e um Grid no DockPanel 18 Tarefa 5 Dividir o Grid em Colunas e Linhas amp Adicionar o GridSplitter no Grid 24 Tarefa 6 Adicionar um StackPanel e seus controles de heran a c lula inferior esquerda do Grid 30 Tarefa 7 Adicionar o MyFoldersExpandersControl ao Upper Left Cell do Grid 4 Tarefa 8 Adicionar um ToggleButton para Mostrar Ocultar o Sidebar esseeeeeeeeeesss 42 Tarefa 9 Adicionar um MyInboxExpanderControl Segunda Coluna do Grid 57 Tarefa 10 Adicionar um controle ListView no Display Mall cccccccccccssssseeeeeceeeceeaaeeeseeeeeeeeeeeeaeeeses 58 Tarefa 11 Adicionar controles terceira coluna do Grid no conte do Display Mail 64 Ce nando O Sidebar Vang ado esee E NaS 67 Tarera T Craro Bono SIG DOE srne E A E I E E istud ars 67 Tarefa 2 Editar um Modelo de Controle para os Bot es Sidebar cc eeeeceeeececececeeeeeeeeeeeeeeeeaaeeenees 70 Tarefa 3 Escrever Manipuladores de Eventos para Mostrar Ocultar o Painel de Navega o 74 Personalizando o Controle ListView avanGadO cccccscccccccccessssseecccceceeaeeseeeseceeeeeesauaeeeeeceeeeeeaaaaaneeeeeees 76 Tarefa 1 Edi
2. O LJ Border a Folder List im DockPanel t 0 CormerRadius 0 0 0 0 5634 Items 100 M gn 55 Figura 39 Selecionando a ferramenta Brush Transform para modificar o vetor gradiente Y Layout O vetor gradiente padrao horizontal que significa que o gradiente vai da esquerda para direita Para alterar os pontos iniciais e finais do gradiente necess rio arrastar a cabeca ou a cauda do vetor Posicione o mouse direita da cabeca do vetor gt at ver um adorne de rota o mova o cursor do mouse no sentido hor rio enquanto mant m pressionado o botao esquerdo do mouse e a tecla SHIFT parando quando o vetor gradiente ficar vertical conforme mostrado na figura 40 Figura 40 O vetor gradiente foi girado para uma posi o vertical 6 Para converter este brush para um recurso para reutiliza o posterior clique para abrir a caixa de di logo e insira MyBlueBackgroundGradientBrush como nome do recurso e selecione MyStyles xaml como resource dictionary veja figura 41 Laboratorio Pratico de WPF 47 Create Brush Resource Resource name Key MyBlueBackgroundGradientBrush 1 Edite Define in Application This document Resource dictionary 3 Clique RLS Cancel Figura 41 Convertendo o gradient brush em um recurso 5 Configure outras propriedades do Border da seguinte maneira Appearance e BorderThickness 0 5 0 5 0 5 0 5 e Width Auto Height 31 e Horizontal Alignment
3. 0 RowDefinition Y Appearance I1 RowDefinition ToolTip MaxHeight unendlich MinHeight 35 Y Miscellaneous AllowDrop CommandBindings Collection ContextMenu Cursor DataContext Focusable FocusVisualStyle ForceCursor InputScope IsEnabled Language X Add another item VETE Cancel Figura 30 Editando as propriedades da segunda linha do Grid 5 Vincule a propriedade MaxHeight da segunda linha para o valor do StackPanel ActualHeight a 31 Clique no bot o quadrado pequeno ao lado da propriedade MaxHeight para abrir o menu contextual escolha o item do submenu Data Binding uma caixa de di logo aberta execute as etapas descritas na figura 31 para fazer a ligac o de dados Em casos normais uma caixa delimitadora amarela como g ser exibida ao lado do nome da propriedade para indicar que a propriedade um dado vinculado No entanto devido a um erro no Expression Blend talvez voc n o veja ap s a liga o de dados a propriedade MaxHeight do 1 RowDefinition Apenas ignore a Laborat rio Pr tico de WPF Create Data Binding 39 Data Field Element Prope 1 Clique Explicit Data Context Scene elements findow LayoutRoot Y System Windows Controls DockPanel DutlookUI HOL MyToolBarTrayControl DutlookUI HOL MyStatusBarControl Y System Windows Controls Border Y System Windows Controls Grid System Windows Controls GridSplitter System Windows Controls GridSpl
4. v Window oC 1 Certifique se que DockPanel MEL LayoutRoot esta ativado v im DockPanel MyToolBarTrayControl 1009 man m z A fi Results 4 Defina DockPanel LastChildFill como True 4l 14 Project amp 7 Properties amp Resources Type Grid IWvx ubissa Search Pa aM Y Appearance Opacity Visibility 3 Restaure Width 4 Selecione Bagel Buttom Dock HorizontalAlignme VerticalAlignment Name No Name E w 100 Visible Margin Zindex Y Common Properties Cursor DataContext IsEnabled ToolTip gt Transform gt Miscellaneous Neste momento o controle Grid n o preenche totalmente a rea entre o toolbar barra de ferramentas e o status bar barra de status Para fazer isso volte para Properties do controle DockPanel e marque a propriedade LastChildFill Se voc definir a propriedade DockPanel LastChildFill para true o ltimo elemento de heran a de uma DockPanel sempre preencher o espa o restante independentemente de qualquer outro valor dock que voc adicionado no DockPanel como o ltimo elemento filho portanto ele ir preencher a rea entre MyToolBarTrayControl e definir para o ltimo elemento de heran a No nosso caso Grid MyStatusBarControl Laborat rio Pr tico de WPF 4l OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help Interaction Z WindowLxaml
5. Data sources Fields Y inbox mail Array gt Attachment Categories String File String Flag String From String Importance Boolean Read Boolean Received String Size String Subject String To String XML CLR Object Show Matching Types Only Use a custom XPath expression Figura 55 Vinculando dados LayoutRoot DataContext no inbox mail do inboxDS Assim que tiver acoplado o LayoutRoot DataContext a um XML data source os elementos filho do LayoutRoot como ListView herdam automaticamente as informa es do data source de seu controle pai Isso pode ser confirmado se voc for para o Properties Editor do ListView e consultar se ao lado da propriedade DataContext o XmlDataCollection foi adicionado recentemente 4 Fa a um data bind da propriedade ListView ItemsSource para o contexto de dados especificado a 56 Com ListView selecionado clique no quadrado pequeno ao lado de propriedade ItemsSource na categoria Common Properties selecione Data Binding para abrir a caixa de di logo Create Data Binding Execute as etapas descritas na figura 56 para vincular ListView ItemsSource no elemento mail do contexto de dados especificado voc seleciona a op o Explicit Data Context porque voc est vinculando ItemsSource ao DataContext herdada do controle pai do ListView Laborat rio Pr tico de WPF 61 Create Data Binding Data Field Element Property Explicit Da
6. Subject e eat Mailbox Ronnie Saurenmann WPF Rocks Ronnie Saurenmann Sent Di 13 03 2007 14 57 To Ruihua Jin a Deleted Items Sascha Corti Ruihua Jin WPF Articles on MSDN e e Drafts 23 Interacting with 2D on 3D 23 Stefano Malle Ruihua Jin A good book on markup 4 Inbox 161 in WPF avalon 567 Ken Casada Ruihua Jin Windows Presentation Fot LA Outbox l l l gj Unwanted mail 34 Frank Koch Ruihua Jin user experience Interacting with 2D placed on 3D is now 5 RSS Feeds bd Olaf Feldkamp Ruihua Jin Sample code possible in vl of the Windows Presentation C3 d Y M LU Ronnie Saurenmann Ruihua Jin News Foundation D Search Folders Ronnie Saurenmann Ruihua Jin Where to start o La For Follow Up Ronnie Saurenmann Ruihua Jin Expression In betw shipping Vista and planning the MER next version of WPF we realized that with amp RonnieSaurenmann RuihuaJin Blend AK a clever implementation it was possible to 6 Sascha Corti RuihuaJin WPF Articles on MSDN d Rm provide this feature today on v1 bits and bd Stefano Malle Ruihua Jin A good book on markup gt gt I m happy to report that as of now the Ken Casada Ruihua Jin Windows Presentation Fot binaries and source code to them needed
7. Y Appearance Opacity 100 MyToolBarTrayControl Visibility Visible BorderThickness 0 t 0 Y Objects and Timeline Default Window v Window HorizontalAlignme v E LayoutRoot 1 Duplo Clique v im DockPanel VerticalAlignment MyToolBarTrayControl c 100 E un E Es Margin 2 Duplo Clique Results IN Zindex Int32 Gets or sets a value that represents the order on the z plane in which an element appears Cursor DataContext IsEnabled ToolTip 2 Adicione um MyStatusBarControl no DockPanel Com DockPanel ativado 1 adicione a ferramenta MyStatusBarControl no ToolBox 2 adicione um MyStatusBarControl no DockPanel e defina a propriedade Dock como Bottom 3 Adicione um controle Grid no DockPanel a 13 Um Grid um recipiente de layout usado com muita freq ncia que consiste em colunas e linhas e um controle filho pode ser posicionado em uma c lula ou abranger mais de uma coluna na respectiva linha Vamos adicionar um controle Grid no DockPanel 1 Com DockPanel ativado d um duplo clique na ferramenta Grid no ToolBox 2 Restaure a propriedade Width do Grid e defina a propriedade Dock como Bottom Laborat rio Pr tico de WPF 4 OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help N Interaction 7 Windowlxaml l Y Triggers Event h y Y Objects and Timeline Default O controle Grid 4 Window CD Duplo Clique
8. o Data clique no bot o XML uma caixa de di logo aberta 4 OutlookUI HOL sln Microsoft Expression Blend Sia Ea File Edit View Object Project Tools Window Help N Interaction Z Windowixaml X MyStyles xaml X MySideBarControl xan Project E Properties E Resources E E Assemblyinfo cs gt Ke MyApp xaml 3 nbn gt ke MyFoldersExpandersControl xaml gt ke MyInboxExpanderControl xaml S n GridViewColumn bel MyMailHeaderGridControl xaml gt ke MyNavigationPaneControl xaml M e MySideBarControl xaml E MySideBarControl xaml cs gt ke MyStatusBarControl xaml ke MyStyles xaml gt Ke MyToolBarTrayControl xaml E Outlook 2007 ico Y Objects and Timeline IB simple Stylesxam Window Y Triggers h Seog Tools Actions Help ja Reply 1 8 Reply to All Forward na w n IWvx ubiseg Y Data v E Border XML CLR Object myMainGridFirstColu GridSplitter D 100 B un ES e GridSplitter gt E StackPanel Results e myFoldersExpanders gt B Border e mySidebarControl v E Border e v im DockPanel e MyInboxExpand S ListView 9g o Laboratorio Pr tico de WPF 59 Na caixa de di logo defina o URL for XML data para inbox xml inbox xml j foi configurado como Resource do projeto Clique em OK para fechar a caixa de di logo Add XML Data Source Connection Name XMLDataSource Cancel Figura 53 Definindo o URL for XML data Como
9. RenderTransform 5 g 6 Style Na caixa de di logo nomeie o estilo MyGridViewColumnHeaderStyle e escolha MyStyles xaml como resource dictionary 2 Configure as propriedades do MyGrid ViewColumnHeaderStyle da seguinte maneira e Background MyGridViewColumnHeaderBlueGradientBrush e BorderBrush MyDarkBlueSolidBrush e BorderThickness left O right 0 top 0 5 bottom 0 5 4 Edite MyGridViewColumnHeaderControlTemplate 1 Entre no Template Editor no MyGrid ViewColumnHeaderStyle Em Objects and Timeline clique com o botao direito do mouse em Style para abrir o menu contextual escolha Edit Control Parts Template gt Edit a Copy Na caixa de di logo nomeie o modelo de controle MyGridViewColumnHeaderControlTemplate e escolha MyStyles xaml como resource dictionary A estrutura de controle padrao do MyGrid ViewColumnHeaderControlTemplate semelhante ao seguinte Laboratorio Pratico de WPF 19 OD ControlTemplate Y iE Grid Y E HeaderBorder Y iE Grid E UpperHighlight v E Border im HeaderContent E HeaderHoverBorder E HeaderPressBorder Y E Canvas PART HeaderGripper Figura 75 A estrutura de controle padr o do MyGridViewColumnHeaderControlTemplate 2 Exclua UpperHighlight HeaderHoverBorder e HeaderPressBorder 3 Configure as propriedades do HeaderBorder da seguinte maneira rushes e Background MyGridViewColumnHeaderBlueGradientBrush Appearance e BorderThickness 0 0 0 0
10. n navigation resulting in a satisfying 5634 Items All folders are up to date 3 Connected to Microsoft Exchange v WPF Articles on MSDN Figura 2 O projeto do curso b sico finalizado Voc aprender sobre as seguintes caracter sticas neste curso b sico e Interface com o usu rio do Expression Blend e Controles de layout e design como Grid DockPanel StackPanel etc Controles comuns de interface com o usu rio como Button ToggleButton Border TextBlock List View etc Solid brushes linear gradient brushes Drawing paths Objetos de transforma o Data binding da propriedade de um elemento propriedade de outro elemento Data binding do contexto dos dados de um elemento a uma origem de dados e a uns dados de XML que ligam a propriedade de um elemento a um elemento de XML Data converters Styles Control Templates Property triggers Event handling Laboratorio Pratico de WPF 8 Tarefa 1 Abrir o projeto no Expression Blend O seguinte procedimento descreve como abrir o projeto OutlookUI HOL Basic Initial 1 No Expression Blend clique em File e clique ent o em Open Project A caixa de di logo Open Project aberta 2 V para o diret rio project folder OutlookUI HOLWnitial Projects OutlookUI HOL Basic Initial onde o project folder a pasta em que voc copiou o projeto Selecione OutlookUI HOL sln e clique ent o em Open 4l Open Project x Look in Outloo
11. CellTemplate CellTemplateSelect DisplayMemberBin E HeaderContainers HeaderTemplate HeaderTemplateS h d Figura 58 Adicionando uma segunda coluna com Header To 4 Adicione uma terceira coluna com Header Subject 5 Clique em OK para fechar a caixa de di logo 6 Fa a um data bind da propriedade DisplayMemberBinding de cada coluna a uma propriedade mail se Devido a um erro no Expression Blend n o poss vel fazermos um data binding para a propriedade GridViewColumn DisplayMemberBinding no Expression Blend que significa que n s temos que editar no arquivo XAML diretamente Em Objects and Timeline clique com o bot o direito do mouse no ListView para abrir o menu contextual selecione View XAML para alternar para o modo XAML do Windowl xaml pressione F4 para obter uma exibic o maior do documento Como pode ver o elemento ListView realcado em azul em seu plano de fundo e precisamos adicionar os seguintes textos em vermelho para fazer um data bind da propriedade DisplayMemberBinding de cada coluna dos elementos From To e Subject do XML data source Laborat rio Pratico de WPF 63 Y E ListView DataContext Binding Path DataContext ElementName LayoutRoot Mode Default BorderBrush DynamicResource MyDarkBlueSolidBrush BorderThickness 0 0 5 0 0 DockPanel Dock Top ItemsSource Binding Mode OneWay IsSynchronizedWithCurrentItem True gt lt List View View gt lt GridView gt G
12. DockPanel seja o recipiente raiz de todos os nossos controles n s devemos faz lo cobrir a rea inteira do LayoutRoot Com DockPanel selecionado v para o painel Properties digite Auto nas caixas de texto Width e Height clique nos dois bot es Stretch das propriedades Horizontal Alignment e VerticalAlignment e defina as margens esquerda direita superior e inferior para 0 O que fizemos aqui foi realmente redefinir essas propriedades para seus valores padr o para que voc possa tamb m clicar no quadrado pequeno ao lado da propriedade para abrir o menu contextual e escolher Reset o valor da propriedade definido ent o automaticamente com o valor padr o Laborat rio Pr tico de WPF File Edt View Object Project Tools Window Help Interaction pg windowlxaml F Triggers Event Y Objects and Timeline Default Window LLL Window B LayoutRoot 100585 Results Project E Properties EF Resources dame Mo Name gt ws Name k E E Type DockPanel Search Y Appearance Opacity 100 Visibility Visible Auto Row RowSpan 1 Column O ColumnSp 1 eizontalaAligmme Do S rticalalignment JT i LastChildrill Margin D t Zindex O T Common Properties Cursor DatacContext IsEnabled ToolTip H Transform t Miscellaneous Figura 10 Configurando as propriedades do DockPanel Agora temos um controle DockPanel e vamos preencher o controle DockPane
13. E 8 RonnieSaurenmann RuihuaJin WPF Rocks to do this are available for download here ta Frank Koch Ruihua Jin user experience tm Olaf Feldkamp Ruihua Jin Sample code The download also contains two sample A Ronnie Saurenmann Ruihua Jin News applications amp Contacts no Ronnie Saurenmann Ruihua Jin Where to start Interactive Viewport3DSample and Tasks A Ronnie Saurenmann Ruihua Jin Expression Channel9Demo which illustrate how to 3 RonnieSaurenmann RuihuaJin Blend use the code So if you just want to dive uN 3 G Sascha Corti Ruihua Jin WPF ArticlesonMSDN right in to 2D on 3D that s a good place to b4 Stefano Malle Ruihua Jin A good book on markup start Lj Folder List 7 mk 5634 Items All folders are up to date 3 Connected to Microsoft Exchange v Figura 1 O projeto finalizado As seguintes caracter sticas de WPF sao envolvidas e Controles de layout e design como Grid DockPanel StackPanel etc etc Drawing paths trajetos de desenho Objetos de transforma o Data templates modelos de dados Event handling manipula o de eventos Controles comuns de interface com o usu rio como Button ToggleButton Border TextBlock ListView Solid brushes pinc is s lidos linear gradient brushes pinc is gradientes lineares Data binding liga o de dados data converters conversores de dados Styles estilos control templates modelos de controle template bin
14. Height Auto e Row 0 indice baseado em zero RowSpan 2 Column 1 ColumnSpan 1 Grid RowSpan e Grid ColumnSpan A propriedade Grid RowSpan obt m ou define um valor que indica o n mero total de linhas que abrangem o conte do de heranca dentro de um Grid A propriedade Grid ColumnSpan obt m ou define um valor que indica o numero total de colunas que abrangem o conte do de heran a dentro de um Grid e HorizontalAlignment Left isso configura o elemento GridSplitter para alinhar a borda esquerda da segunda coluna VerticalAlignment Stretch e Margin 0 0 0 0 Laborat rio Pr tico de WPF 26 File Edit View Object Project Tools Window Help N Interaction Z Windowl xaml x Project m Properties amp Resources E Y Triggers myMainGridFirstColumns gg Name my m CE Type GridSplitter 5 Nome Search 6 Defina o Background Y Brushes BorderBrush No brush Event Help A 3 Reply to All mb Forward He vw ba IWvx Uubiseg 4 Enquanto mant m pressionado o bot o ae esquerdo do mouse desenhe OpacityMask No brush o controle GridSplitter do lado a C3 E m esquerdo da segunda coluna MyBlueSolidBrush1 MyBlueSolidBrush2 Y Objects and Timeline MyBorderBlueGradientBrush os MyBrighiBluesolidBrush1 nim MyBrightBlueSolidBrush2 Window E MyBrightorangesolidBrush a MyButtonBlueGradientBrush MyButtonPressedOrangeGradientBr MyDarkBlueSolidBrush MyDarkOrangeSolidBrush B j MyDropDownGrayGr
15. Stretch VerticalAlignment Top e Margin 0 0 0 0 6 Com dpl selecionado configure as propriedades do dp1 da seguinte maneira e Width Auto Height Auto e HorizontalAlignment Stretch VerticalAlignment Stretch e Margin Q 0 0 0 m 7 Com dpl ativado adicione um controle TextBlock no dp1 com as seguintes propriedades e Foreground MyDarkBlueSolidBrush Width Auto Height Auto Dock Left HorizontalAlignment Stretch VerticalAlignment Center Margin left 4 right 0 top 0 bottom O Common Properties e Text Mail e FontSize 16 FontWeight Bold e TextWrapping NoWrap 8 Adicione um controle ToggleButton no dpl com as seguintes propriedades e Name myMainGridToggleButton e Background No brush E e BorderBrush No brush E Width 26 Height Auto Dock Right Horizontal Alignment Stretch VerticalAlignment Center Margin 0 0 0 0 Laborat rio Pr tico de WPF 48 Agora n s temos um ToggleButton mas n o est com a apar ncia que n s queremos n s queremos em vez de um bot o retangular Uma grande vantagem do WPF que os controles n o s o for ados a ter uma apar ncia predefinida ou um comportamento que estamos habituados n s podemos realmente personalizar e controlar estilos do nosso gosto e executar maneira que desejamos Por exemplo um controle Button pode ser retangular pode ser redonda ou ainda pode ter a forma de um avi o Controls Templa
16. a os emails n o lidos serem exibidos em negrito Com MyStyles xaml sendo o arquivo edit vel atual alterne para o View XAML Localize MyListViewItemContainerStyle abra a caixa de di logo Find pressionando CTRL F em seguida digite MyListViewItemContainerStyle na caixa de texto e clique em Find Next e adicione o seguinte texto vermelho no MyList ViewItemContainerStyle Laboratorio Pratico de WPF 84 m listview2 txt Style x Key MyListViewItemContainerStyle TargetType x Type ListViewItem gt Setter Property HorizontalContentAlignment Value Stretch gt Setter Property Padding Value 0 1 5 0 1 5 gt lt Setter Property FontSize Value 11 gt Setter Propertyz Template Value DynamicResource MyListViewItemContainerControlTemplate gt lt Style Triggers gt lt DataTrigger Binding Binding XPath Read Value false gt Setter Propertyz TextBlock FontWeight Value Bold gt lt DataTrigger gt Style Triggers lt Style gt DataTrigger Style ControlTemplate e Data Template todos t m uma cole o de disparadores Um DataTrigger permite que voc defina valores de propriedade quando o valor de propriedade de um objeto de dados coincide com um valor especificado No nosso exemplo definida a espessura da fonte de um item de lista para negrito se a propriedade de Leitura do email correspondente tem o valor falso Note que voc deve especificar as propriedades Binding e Value em
17. o primeiro myMainGridFirstColumnSplitter do divisor da coluna do grid tamb m altera a largura da primeira coluna quando voc o arrasta que por isso que precisamos escrever um event handler para o evento myMainGridFirstColumnSplitter DragDelta co basicS txt private void myMainGridFirstColumnSplitter DragDelta object sender System Windows Controls Primitives DragDeltaEventArgs e trigger the myMainGridToggleButton Checked event when the first grid column width reaches its minimum if myMainGridFirstColumn Actual Width lt myMainGridFirstColumn MinWidth my MainGridToggleButton IsChecked true trigger the myMainGridToggleButton Unchecked event when the first grid column width exceeds its minimum else my MainGrid ToggleButton IsChecked false j Crie e execute o aplicativo F5 Arraste o primeiro divisor da coluna para a esquerda e direita marque o ToggleButton O sidebar aparecer e come ar oculto conforme o esperado Voc pode reclamar que o texto Mail se mant m grudado na posic o n o se preocupe h uma maneira f cil para resolver esse problema apenas faca o seguinte 4 Defina a ordem de myMainGridToggleButton a 51 Clique com o bot o direito do mouse no myMainGridToggleButton para abrir o menu contextual selecione Order gt Send to Back Voc pode ver que myMainGridToggleButton movido acima do TextBlock Mail isso significa que o TextBlock Mail se torna o
18. pinc is styles estilos e control templates modelos de controle Alterne para o painel Resources e clique em MyStyles xaml d uma olhada nos brushes que ir o contribuir para o nosso OutlookUI Laborat rio Pr tico de WPF 12 Tarefa 3 Adicionar um controle DockPanel no LayoutRoot Antes de come ar adicionando controles no seu aplicativo WPF voc deve primeiro tomar uma decis o de qual painel de layout os controles ser o inseridos H tr s pain is de layout usados com freqii ncia Grid DockPanel e StackPanel e Um controle Grid organiza elementos de heran a em um layout de linhas e colunas que constituem uma grade O elemento LayoutRoot fornecido pelo Expression Blend por padr o quando voc inicia com um novo projeto um Grid e Um controle DockPanel organiza elementos de heran a para que eles permane am em uma borda do painel Left Top Right ou Bottom e Um controle StackPanel organiza elementos de heran a em uma nica linha que pode ser orientada horizontalmente ou verticalmente Para o nosso projeto escolhemos um controle DockPanel como o recipiente raiz O procedimento a seguir mostra como adicionar um controle DockPanel no LayoutRoot 1 Em Objects and Timeline d um duplo clique no LayoutRoot para ativ lo Ativac o de controle para adicionar elementos de heranca Voc precisa ativar o elemento antes de adicionar elementos de heran a a ele D um duplo clique no elemento pai em Objects and
19. 4 Configure as propriedades do Border que 0 controle pai do HeaderContent da seguinte e D p o e Brushes e BorderBrush MyDarkBlueSolidBrush Appearance e BorderThickness left O right 0 top 0 5 bottom 0 5 5 Configure as propriedades do PART HeaderGripper que usado para denotar o final de um cabecalho de coluna da seguinte maneira rushes e Background MyBlueSolidBrush1 ayout e Width 1 Height 16 d a e Left Binding Path ActualWidth ElementName Grid Mode Default a 76 Laborat rio Pr tico de WPF 80 Create Data Binding Data Field Element Prope 4 Clique Explicit Data Context Scene elements Properties Y System Windows Controls ControlTemplate Y Gnd Height Double HorizontalAlignment HorizontalAlignment MaxHeight Double MaxWidth Double MinHeight Double MinWidth Double Name String Opacity Double Persistld Int32 VerticalAlignment VerticalAlignment Width Double Show Matching Types Only v Use a custom path expression Figura 76 Vinculando dados PART_HeaderGripper Left para Grid Actual Width e Margin left 1 right 0 top 2 bottom 2 6 Exclua as altera es de propriedade do disparador de propriedade IsMouseOver True a 77 Laborat rio Pr tico de WPF 81 4 OutlookUI HOL sIn Microsoft Expression Blend ae ES File Edit View Object Project Tools Window Help Interaction amp E MyStyl
20. G 85 B 151 A 100 Esta combina o de valores vermelho verde azul e alfa s o iguais ao valor Hexadecimal FF2B5597 como alternativa voc pode digitar diretamente esse valor na caixa de texto correspondente File Edit View Object Project Tools Window Help N YV 4 Er T mi Interaction E MyStylesxaml X WindowLxaml X Project m Properties E Resources E Name lt No Name gt mic Event Type Border l File Edit View Go Tools Actions Help Search 23 X da Renly SB Reply to AINE Y Brushes Background No brush Favorites Folders lt BorderBrush MM m LA Inbox 161 OpacityMask No brush 2 Clique am Unread Mail L7 ES a wy CO eos Clique Color resources Y Objects and Timeline esr Mailbox Ronnie Saurenn I a Deleted Items 85 Default Drafts 23 9 Window Inbox 161 151 avalon 567 U Outbox l L gg Unwanted mail 34 v im LayoutRoot fj RSS Feeds v im DockPanel 4 Edite FF2B5597 MyToolBarTrayControl e Mail MyStatusBarControl 100 A v Window C Brush v E Border 3 Calendar Y Appearance w eid Opacity 100 myMainGridFirstColumns 8 Contacts GridSplitter e GridSplitter c gt 5 StackPanel Notes t 0 e myFoldersExpandersConi CornerRadius 0 0 0 0 1 Clique o ad Folder List T DockPanel e AM Layout ems Visibility Visible vA Tasks BorderThicknes
21. MyBlueSolidBrush2 e HorizontalAlignment Left VerticalAlignment Center e Margin left 4 right 0 top 7 bottom 0 Common Properties e Text Mail e FontWeight Bold 6 Adicione outros cinco botoes Como os seis bot es t m a mesma estrutura e s diferem nas propriedades Image Source e TextBlock Text podemos usar a t cnica de Copiar e Colar para economizar muito trabalho 1 Em Objects and Timeline clique com o bot o direito do mouse no Button para obter o menu contextual indicado e clique em Copy 2 Ative StackPanel localizado no Button 3 Clique com o botao direito do mouse no StackPanel para obter o menu contextual indicado e clique em Paste 4 Repita a etapa 3 para as outras quatro vezes 5 Defina a propriedade Background como MyButtonBlueGradientBrush e restaure a propriedade Width dos ltimos cinco bot es a 28 Uma vantagem no Expression Blend que voc pode configurar propriedades comuns de varios controles selecionados de uma vez Laboratorio Pr tico de WPF 35 4 OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help Interaction Z Windowlxaml X Project KZ Properties E Resources E Y Triggers Name File Edit View Go Tools Actions Help 4 New v e LAS x ga Reply 8 Reply to All pay Event Type Button Search DIUSICS TAvX ubiseg BorderBrush Foreground OpacityMask No brush 2 E EED MyBlueSolidBrush2 Y Obje
22. Row 0 RowSpan 1 Column O ColumnSp 1 HorizontalAlignme VerticalAlignment ft li II Margin 11 75 gt 10 10 833 14333 7 Adicione e edite o property trigger IsChecked True 47 4 48 Como desejamos nossa seta dupla ToggleButton para apontar para a esquerda ou direita dependendo se o usu rio marc lo ou desmarc lo precisamos adicionar um property trigger que ativado quando a propriedade IsChecked fica True Property trigger o mecanismo pelo qual uma altera o em uma propriedade dispara um evento instant neo ou animado que altera outra propriedade Laboratorio Pratico de WPF 4 OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help Interaction 7 MyStyles xaml x Window1 xaml x Event Property Trigger Default MinWidth o IsKeyboardFocused True Properties when active Activated when target element v MinWidth v 2 Clique Ov Focusable Actions when activ checked Clique E 4 Actions when deaci IsEnabled IsFocused IsHitTestVisible IsKeyboardFocused Y Objects and Timeline Default IsMouseOver 4 MyDoubleArrowTog rs IsStylusDirectlyOver IsTabStop IsThreeState EB lt gt Template v iE Grid Path Q Path 52 EE Project m Properties amp Resources E Name lt No Type Path Search 1Wvx ubiseg Y Brushes Name gt m lv Stroke OpacityMask No brush Pa Y Appea
23. Y Triggers 4 Event Y Objects and Timeline Default Window v Window MIL LayoutRoot ME DO DockPanel MyToolBarTrayControl MyStatusBarControl E Grid 100 Results 28 EG Project E Properties amp Resources E lt No Name gt Name A CE Type DockPanel Wx ubiseg Pa m a Y Appearance Opacity 100 Visibility Visible Y Layout Width Auto Height Auto Row 0 RowSpan 1 Column 0 ColumnSp 1 HorizontalAlignme lt VerticalAlignment fI li T LastChildFill v Margin O t 0 Zindex O Y Common Properties Cursor DataContext IsEnabled ToolTip 5 Agrupe Grid em um controle Border para adicionar uma borda azul ao redor do Grid a 15 Em Objects and Timeline clique com o bot o direito do mouse no Grid para abrir o menu contextual selecione Group Into Border Laborat rio Pr tico de WPF 4 OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help Interaction Z Windowlxaml Project K Properties amp Resources amp Y T5 Triggers Name lt No Name gt d Y Event Type Grid IWvx ubBiseg Pa m a b j Y Appearance Opacity 100 Visibility Visible Cut Y Layout Copy Width Y Obj i Objects and Timelir Delete Height Rename Dock Window Group Into Grid Ctrl G HorizontalAlignme StackPanel v Window Eidos DockPanel Align v im DockPanel Auto Size ScrollViewer on MyToolB C
24. controle StackPanel din mico 1 Com grande probabilidade de apenas parte do botao da parte inferior ser exibido 2 O GridSplitter horizontal atualiza sua posi o vertical de pixel por pixel quando voc arrasta o de modo que os bot es nem sempre s o exibidos totalmente 3 O controle StackPanel n o usa a parte inferior quando voc arrasta o GridSplitter horizontal alto o suficiente O primeiro problema pode ser solucionado tornando a segunda linha do Grid alto o suficiente para permitir que todo o StackPanel seja exibido quando o aplicativo for inicializado consulte as etapas 1 4 descritas abaixo Laboratorio Pratico de WPF 36 Para resolver o segundo problema faca o seguinte Va para o Properties editor do controle GridSplitter horizontal da categoria Common Properties defina a propriedade DragIncrement para o valor Height dos nossos bot es ou seja 35 Data binding liga o de dados mostra sua for a quando tentamos resolver o terceiro problema Data binding liga o de dados Data binding o processo de conectar um data source fonte de dados a componentes de interface com o usu rio Isso significa que sempre que os dados forem alterados os componentes da interface ser o opcionalmente refletidos para essas altera es e vice versa Os dois componentes essenciais de um data binding s o uma fonte e um destino A fonte pode ser de um data source XML outro controle etc e o destino um controle No
25. controle TextBlock no StackPanel configure suas propriedades da seguinte maneira e Foreground MyDarkBlueSolidBrush ayout gt C s e HorizontalAlignment Center VerticalAlignment Center e Margin left 2 right 2 top 0 bottom O ommon Properties e Text Inbox C eX e FontWeight Bold e TextWrapping NoWrap Adicione um controle TextBlock no StackPanel configure suas propriedades da seguinte maneira e Foreground amp FF0000FF um solid color brush azul 4 61 Laboratorio Pratico de WPF 69 Y Brushes Background No br OpacityMask No brush Pa Ea E To m Editor 2 Clique Color resources Ms 100 d FFOOOOFF E Brush Figura 61 Definindo a propriedade Foreground do controle TextBlock ayout e HorizontalAlignment Center VerticalAlignment Center Margin left 2 right 4 top 0 bottom 0 ommon Properties e Text 161 ex e TextWrapping NoWrap 7 Adicione um controle Button no mySidebarControl configure suas propriedades da seguinte maneira e Name myNavigationPaneButton e Background MyBrightBlueSolidBrush2 e BorderBrush MyDarkBlueSolidBrush e Foreground MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 ee ayout e Dock Right Common Properties e Content Navigation Pane ex e FontSize 15 e FontWeight Bold 8 Gire o controle mySidebarControl v
26. controle do MyList ViewItemContainerControlTemplate Em Objects and Timeline clique com o botao direito do mouse em Style para abrir o menu contextual escolha Edit Control Parts Template gt Edit a Copy Na caixa de di logo nomeie o modelo de controle MyListViewItemContainerControlTemplate e escolha MyStyles xaml como resource dictionary 2 Exclua o ContentPresenter 3 Com Bd ativado adicione GridViewRowPresenter no Bd 4 Configure as propriedades do Bd da seguinte maneira rushes e BorderBrush MyBlueSolidBrush1 Appearance e BorderThickness left O right 0 top 0 bottom 0 5 5 Exclua as altera es da propriedade padr o do disparador de propriedade IsSelected True e adicione as seguintes altera es de propriedades para o disparador de propriedade IsSelected True rushes e Bd Background MySelectedListItemBlueSolidBrush e Bd BorderBrush Black Insira Black na caixa de di logo Custom Expression Appearance d e Bd BorderThickness 0 5 0 5 0 5 0 5 Insira 0 5 na caixa de di logo Custom Expression Layout e Bd Margin left 0 right 0 top 1 bottom O 6 Excluir as altera es da propriedade padr o do disparador de propriedade IsSelected True e IsSelectionActive False e adicione as seguintes altera es de propriedade no disparador de propriedade e Bd Background MyGraySolidBrush e Bd BorderBrush MyBlueSolidBrush1 7 Saia do editor de modelo de controle 4 Fa
27. depende do valor de Importance do mail que n s disparamos para usar um disparador de dados para definir valores de propriedade diferentes para casos diferentes Alterne para o View XAML do ListView e adicione o seguinte texto vermelho no ListView como o modelo de dados s usado no List View faz sentido definir o modelo de dados localmente lt ListView gt lt ListView Resources gt DataTemplate x Key MylImportanceCellDataTemplate gt Image x Name myImage Stretch None gt lt DataTemplate Triggers gt lt DataTrigger Binding Binding XPath Importance Value true gt Setter Property Source TargetName myImage Value graphics important gif gt listview3 txt lt DataTrigger gt lt Data Template Triggers gt lt DataTemplate gt lt ListView Resources gt lt ListView View gt lt ListView View gt lt ListView gt Adicione o seguinte texto vermelho no ListView no Window1 xaml para criar uma coluna de imagem a lt ListView gt listview3 txt lt ListView View gt lt GridView gt GridViewColumn CellTemplate DynamicResource MyImportanceCellDataTemplate gt lt GridViewColumn Header gt Image Source graphics importance gif Stretch None gt lt Grid ViewColumn Header gt lt GridViewColumn gt lt GridView gt lt ListView View gt lt ListView gt Laborat rio Pr tico de WPF 86 A segunda coluna do ListView mostra se o email
28. myBlueTextBrush E system EA Clique Default myBorderBrush ll Edit Resource myBottomLeftButtonBrush E Convert to New Resource myBrightBlueBackgroundBrush MySidebarButtonStyle Button Template 4 a vw lt gt Template lll Data Binding vim Grid myBrightBlueSolidBrush myBrightOrangeSolidBrush myButtonBackgroundGradientBrush ightBorderBrush LightBrush E LightColorBrush T ContentPresenter MyButtonBorderBrush 10096 MyButtonTextBrush Results myCellBrush Y Appearance myComboBoxContextBackgroundBrush Opacity 100 myDarkBlueTextBrush Visibility Visible v myDarkGreySolidBrush 4 Clique BorderThickness 1 1 E Y myDarkOrangeSolidBrush 2 1 1 myGlyphBrush CornerRadius 0 0 0 0 myHorizontalGridSplitterBackground myInboxExpanderExpandSiteBackground Y Layout Figura 68 Personalizando o disparador de propriedade IsPressed True 7 Adicione e personalize o disparador de propriedade IsMouseOver True e IsPressed False Primeiro adicione um disparador de propriedade IsMouseOver True conforme descrito para IsPressed True veja figura 67 seguida clique no botao no Activated when ent o altere MinWidth para IsPressed e altere True para False Dessa maneira voc obt m uma express o Booleana como el e e2 no nosso caso a express o significa que o disparador de propriedade est ativado quando o usu rio move o mouse sobre o botao e n o clica nele Com a grava o do disparado
29. no plano de fundo e o elemento correspondente no artboard real ado por um contorno limitador azul veja figura 5 Selecione o elemento LayoutRoot e d uma olhada nas suas propriedades Observe que as propriedades sao categorizadas por tipo como Brushes Appearance etc que permitem que voc localize facilmente uma propriedade espec fica Se voc souber o nome de uma propriedade ou parte dele voc tamb m pode digit lo na caixa Search para obter somente as propriedades que voc deseja Lembre se de limpar a caixa Search quando voc n o desejar filtrar mais propriedades Para exibir todas as propriedades de uma determinada categoria clique na seta E se existir File Edit View Object Project Tools Window Help Interaction EZ Windowlxaml X Project KZ Properties Eg Resources KZ Y Triggers Name LayoutRoot Event Type Grid Search IWvx Uubiseg Y Brushes Background No brush OpacityMask No brush Pa Em E Y Appearance Vs Opacity 100 Y Objects and Timeline Visibility Visible Default Window Y Layout v Window Width Height HorizontalAlignme VerticalAlignment CE Ws EX lt gt Man Results ZIndex Y Common Properties Cursor DataContext IsEnabled ToolTip Figura 5 O LayoutRoot o elemento selecionado e O painel Resources painel de recursos O painel Resources mostra todos os recursos definidos para o projeto atual Exemplos de recursos s o brushes
30. nosso caso queremos vincular a propriedade Grid Row 1 MaxHeight ao valor da propriedade StackPanel ActualHeight 1 Selecione o controle Grid 2 No Properties editor expanda a categoria Layout Localize a propriedade RowDefinitions Collection clique no botao uma caixa de di logo em seguida exibida 3 Defina a propriedade Height da primeira linha como 0 5 29 Star sizing Star sizing indica que os tamanhos das linhas sao proporcionais entre eles Por exemplo um Height de 3 produzir uma linha que seja tr s vezes o tamanho de uma linha cujo Height seja definido como Laborat rio Pr tico de WPF RowDefinition Collection Editor RowDefinitions Items Bjo RowDefinition 1 RowDefinition 4 Add another item 37 Properties Y Appearance ToolTip Y Miscellaneous AllowDrop CommandBindings Collection ContextMenu Cursor DataContext Focusable FocusVisualStyle ForceCursor InputBindings Collection InputScope IsEnabled Language en us Name OverridesDefault5t Cancel Figura 29 Configurando a propriedade Height da primeira linha como 0 5 4 Configure as propriedades da segunda linha 1 RowDefinition da seguinte maneira a 30 e Height 0 5 e MinHeight 35 este o valor de Height do Button a fim de evitar que o StackPanel comece escondido na tela Laboratorio Pratico de WPF 38 RowDefinition Collection Editor RowDefinitions Items Properties
31. pode ver um novo data source chamado inboxDS foi adicionada no projeto O elemento da raiz inbox dentro do elemento inbox uma matriz de elementos mail e cada elemento mail cont m v rios elementos filho que especificam as propriedades do mail relacionado veja figura 54 Y Data XML CLR Object Data Window nome do data source aelemento raiz Ru Gui omento filho do Attachment altera Categories St File String Flag String From String Importance Boolean Read Boolean Received String Size String Subject String To String Figura 54 A estrutura de dados XML do inboxDS 3 Fagaum data bind com data context do LayoutRoot no inboxDS a 55 Data Context Data context um conceito que permite elementos como ListView no nosso Projeto herdarem as informa es de seus elementos pai como LayoutRoot no nosso Projeto sobre o data source que usado para vincula o bem como outras caracter sticas de vincula o como o path Laboratorio Pratico de WPF 60 Selecione LayoutRoot na categoria Common Properties clique no pequeno quadrado ao lado da propriedade DataContext para abrir o menu contextual selecione Data Binding A caixa de di logo Create Data Binding aberta Execute as etapas descritas na figura 55 para ligar a propriedade LayoutRoot DataContext no inbox mail do inboxDS Create Data Binding Data Field Element Property Explicit Data Context
32. qu Reply Reply E mm Event Type Border Y Brushes Background No brush OpacityMask No brush CJ E E MyBlueSolidBrush1 MyBlueSolidBrush2 T myBorderBlueGradientBrush Ins 4 Clique Y Objects and Timeline EP MyBrightBlueSolidBrush2 Default E MyBrightOrangeSolidBrush Window u MyButtonBlueGradientBrush MyButtonPressedOrangeGradientBr v Window MyDarkBlueSolidBrush v im LayoutRoot MyDarkOrangeSolidBrush v im DockPanel EN MyDropDownGrayGradientBrush MyToolBarTrayControl TO We Hea pum E MyStatusBarControl o 1 Certifique se E grid EUG Border esta Opacity 100 penes Visibility Visible Results V Y Appearance vorderThickness 5 XN ComerRadius 0 0 0 0 6 Defina as propriedades idth Height e Dock 7 Com Grid selecionado configure as propriedades do Grid da seguinte maneira e Width Auto Height Auto Laborat rio Pr tico de WPF 24 Tarefa 5 Dividir o Grid em Colunas e Linhas amp Adicionar o GridSplitter no Grid A pr xima etapa dividir o Grid em tr s colunas e duas linhas e adicionar GridSplitters no Grid 1 Divida o Grid em tr s colunas e duas linhas a 17 1 Em Objects and Timeline d um duplo clique no Grid para ativa lo Pressione F4 para obter a imagem inteira do Grid Para retornar ao modo de exibi o original pressione F4 novamente 2 Clique na ferramenta Selection BS no ToolBox 3 Sobre o artboard mova o pont
33. vel durante o Laborat rio Pr tico assim n s preparamos diversos projetos que voc pode come ar sob o project folder OutlookUI HOLnitial Projects sentindo se livre para escolher seu pr prio ponto de partida A seguinte tabela lhe d uma vis o geral Ponto de partida Nome do projeto OutlookUI HOL Basic Initial OutlookUI HOL Basic6 Initial OutlookUI HOL Basic8 Initial Basico etapa 10 OutlookUI HOL Basic10 Initial Avancado Sidebar OutlookUI HOL Basic Final Avancado ListView OutlookUI HOL Basic Final Laboratorio Pratico de WPF 7 Construindo uma r plica da interface com o usuario do MS Outlook 2007 B sico Neste curso b sico n s construiremos um aplicativo de WPF com todos os componentes importantes que voc encontra no MS Outlook 2007 Depois que voc terminar o curso b sico seu aplicativo ter a seguinte apar ncia File Edit View Go Tools Actions Help Y 3jjNew v e LAS x Ed Reply Reply to All a Forward ad vw hn J Send Receive v 5 Lid P Mail lt lt Favorites Folders Sascha Corti Inbox 161 Sent Mi 14 03 2007 10 52 LB Unread Mail To Ruihua Jin 23 Sent Items Mail Folders 3 eat Mailbox Ronnie Saurenmann From Subject Hi Ruihua S Im Sascha Corti Ruihua Jin WPF Articles on MSDN ra 3 Inbox ed Stefano Malle Ruihua Jin A good book on markup WPF These are the latest articles on WPF up on avalon 567 Ken Casada Ruihua Jin Windows Presentation Foun
34. A good book on markup WPF Ruihua Jin WPF Articles on MSDN I Ruihua Jin Windows Presentation Foundation Intro Ruihua Jin WPF Rocks Ruihua Jin user experience Ruihua Jin Sample code Ruihua Jin News Ruihua Jin Where to start Ruihua Jin Expression Figura 70 O controle ListView com o estilo padr o Nosso objetivo atingir o estilo MS Outlook 2007 3 From G B Sascha Corti Stefano Malle Ld Ken Casada Frank Koch Olaf Feldkamp OD To Ruihua Jin Ruihua Jin Ronnie Saurenmann Ruihua Jin Ruihua Jin Ruihua Jin Ronnie Saurenmann Ruihua Jin Ronnie Saurenmann Ruihua Jin Ronnie Saurenmann Ruihua Jin 4 Ronnie Saurenmann Ruihua Jin Subject WPF Articles on MSDN good book on markup WPF Windows Presentation Foundation Intro WPF Rocks user experience Sample code News Where to start Expression Blend Y n Figura 71 O ListView estilo Outlook Neste curso avancado voc aprender sobre e personalizar o estilo de cabe alhos de coluna e personalizar o estilo de itens de lista e adicionar imagens nas colunas para representar dados e classificar a lista Entre os demais dois novos conceitos Importantes envolvidos s o e data triggers disparadores de dados e data templating modeladores de dados Laboratorio Pratico de WPF T1 Tarefa 1 Editar o estilo dos cabecalhos de colunas 1 Entre no Template Editor no ListView Em Objec
35. F e Angle O a Relative LayoutTransform a gt A F e Angle 90 p Figura 49 Editando a propriedade Angle do LayoutTransform Relative e Visibility Hidden Conforme descrito acima desejamos obter a primeira coluna do grid minimizada e o sidebar exibido quando o myMainGridToggleButton for marcado Para obter esse efeito precisamos escrever um event handler manipulador de eventos para o evento myMainGridToggleButton Checked Volte ao modo de exibi o padr o e escreva um event handler para o evento myMainGridToggleButton Unchecked Event Handling manipula o do evento Event handling o mecanismo que permite intera es flex veis entre componentes de programas Para reagir a um determinado evento voc deve registrar um event handler para o evento assim que esse evento for disparado seu event handler chamado Eventos t picos s o eventos GUI Graphical User Interface Interface Gr fica com o Usu rio como cliques do mouse pressionar chaves etc 1 Escreva um event handler para o evento myMainGridToggleButton Checked 50 Laboratorio Pratico de WPF 55 Sie ez OutlookUI HOL sIn Microsoft Expression Blend File Edit View Object Project Tools Window Help N Interaction amp E MySideBarControlxaml X Windowixaml X MyStyles xai Project E Properties E Resources E Name myMainGridToggleButton B Type ToggleButton 2 Clique Checked Y Triggers Event File Edit View Go Tools Actio
36. F Modifique o vetor gradiente Cada gradiente mapeado por um vetor voc modifica o vetor gradiente para definir os pontos iniciais e finais do gradiente Para obter o vetor gradiente exibido no controle clique na ferramenta Brush Transform no ToolBox veja figura 39 Laborat rio Pr tico de WPF 46 amp l OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help N Interaction mw MyStylesxaml X WindowLxaml X Project amp Properties E Resources E Y Triggers Name lt No Name gt Type Border Event File Edit View Go Tools Actions Help Search wl New v 3 X ga Reply d Reply to Al Wvx ubiseg Y Brushes BorderBrush OpacityMask No brush Vetor gradiente Va m E a E J UN Editor m Color resources prse Mail Folders E Y Objects and Timeline 837 Mailbox Ronnie Saurenn 174 a Deleted Items Default J Drafts 23 1 Inbox 161 J avalon 567 Outbox L Window gj Unwanted mail 34 7 v im LayoutRoot LES RSS Feeds Window HFFAEDIFF 4 v im DockPanel E E MyToolBarTrayControl e Mail i MyStatusBarControl J v E Border e 3 Calendar 3 D iE Grid 3 D Options im myMainGridFirstColumnt Contacts Y Appearance GridSplitter j Opacity 100 GridSplitter Visibility Visible Ro a nos q Notes BorderThickness O myFoldersExpandersConi
37. Grid real ado em azul no seu plano de fundo Pressione F4 para obter uma exibi o maior do arquivo 2 Adicione dois elementos GridSplitter no elemento Grid 20 Laborat rio Pr tico de WPF 28 File Edit View Object Project Tools Window Help WindowLxaml lt Window 2 xmins http schemas microsoft com winfx 2006 xaml presentation xmins x http schemas microsoft com winfx 2006 xaml xml lang en US xmlns OutlookUI HOL clr namespace OutlookUI HOL xmlns d http schemas microsoft com expression blend 2006 xmlns mc http schemas openxmlformats org markup xmlns local clr namespace OutlookUI HOL x Class OutlookUI_HOL Window1 x Name Window 10 Title Inbox Microsoft Outlook TI Width 800 Height 600 gt T2 a ES lt Grid x Name LayoutRoot Background x Null gt 15 lt DockPanel LastChildFill True gt 16 lt OutlookUI_HOL MyToolBarTrayControl DockPanel Dock Top gt 17 lt OutlookUI_HOL MyStatusBarControl DockPanel Dock Bottom gt 18 Border Width Auto Height Auto BorderBrush DynamicResource MyBorderBlueGradientBrush BorderThickness 19 Grid Width Auto Height Auto gt 20 lt Grid ColumnDefinitions gt 21 lt ColumnDefinition Width 0 252 gt 22 lt ColumnDefinition Width 0 371 gt 23 ColumnDefinition Width 0 377 gt 24 lt Grid ColumnDefinitions gt 1 Adicione esses dois elementos 25 lt Grid RowDefinitions gt GridSplitter ao elemento Grid 26 lt RowDefiniti
38. Grid se ele nao estiver ativo 2 Adicione a ferramenta GridSplitter do Asset Library no ToolBox Agora quando voc abre a caixa de di logo de Asset Library a guia atual ser Custom Controls Caso a ferramenta GridSplitter seja localizada na categoria Controls primeiro voc deve alternar para a guia Controls a fim de usar a ferramenta GridSplitter 3 Clique na ferramenta GridSplitter no ToolBox 4 Sobre o artboard desenhe um controle GridSplitter vertical no lado esquerdo da segunda coluna 5 Configure as propriedades do GridSplitter da seguinte maneira e Name myMainGridFirstColumnSplitter Nome do controle exclusivo para refer ncia program tica Em WPF nem todos os controles t m que ser nomeado Em Objects and Timeline controles sem nome s o mostrados como Control No entanto se voc deseja se referir a um controle programado em c digo VB C voc deve dar a esse controle um nome exclusivo No nosso caso como voc ver n s devemos escrever um c digo de tratamento de evento para os eventos dos GridSplitters para ativar um comportamento mais avancado que por isso que ele deve ser nomeado Os c digos C e XAML diferenciam mai sculas de min sculas Como ambos os c digos XAML e C diferenciam mai sculas de min sculas voc deve prestar aten o em letras mai sculas e min sculas enquanto edita arquivos XAML e seus respectivos c digos CH e Background MyBorderBlueGradientBrush e Width 5
39. IsPressed True 4 78 Laboratorio Pratico de WPF File Edit View Object Project Tools Window Help Interaction K Y Triggers Event Default 7 IsPressed True Height n def IsEnabled False Property Trigger 4 Properties when active HeaderBorder Background MyGridViewCol HeaderContent Margin 1 1 0 0 o Activated when target element v IsPressed v True Y 41 Actions when activating 4 Actions when deactivating Y Objects and Timeline Default MyGridViewColumnHeaderControlTemplate Grid on v ControlTemplate E Grid 49 LI HeaderBorder v E Border im HeaderContent Y Canvas PART HeaderGripper MyStyles xaml Windowl1 O Trigger recording Is on a a GridViewCo umnHeader y 10096 Results n e u Project CAUsersW ruihuj EUROF Project CAUsersW ruihuj EUROF C Windows Microsoft NET Frar C Windows Microsoft NET Frar OutlookUI HOL gt C Users v rui The build has successfully compl ES Project 4 IWvx ubisaa Properties E Resources Name HeaderBorder Type Border Search Y Brushes canas PF OpacityMask No brush Va ES E To HE MyButtonPressedorangeGradientBrush MyDarkBlueSolidBrush EE MyDarkorangesolidBrush MyDropDownGrayGradientBrush EE MyDropDownGraySolidBrush1 EE MyDropDownGraySolidBrush2 MyGridViewColumnHeaderBlueGradientBrush MyGridViewColumnHeaderButtonPressedBlueGradientBru
40. Laboratorio Pratico do MSDN Linha de construcao de aplicativos empresariais com Windows Presentation Foundation Ruihua Jin Ronnie Saurenmann ronnies microsoft com Su a Microsoft Traduzido por Murilo Junot murilo teixeira 9 makesys com br Web Designer Makesys Versao do original 1 0 Ultima atualizac o Maio 2007 Vers o da tradu o 1 0 ltima atualiza o Abril 2008 j om mcm o NL Windows 1 0 Windows 3 0 Windows 95 Windows XP l Windows Vista WPF Laboratorio Pratico de WPF 3 Indice Sobre este Laborat rio Pr tico LP Hands On Lab eese emen nemen 5 DODEFE OO VOC Ae IN io aa wg ene UI a pOr Ens DIL Su TIL ER TNI MN MUNI C PEN UM UNI UNE 5 Organiza o deste Laborat rio Pr tico osssemeseanuoiscadadiada midis deendondesgnndfinga idiadacimi SURE U erue quisa evo aS ced tono din eU E donde 6 Descritivo dos T picos Usados Nesta Documentag o eeessssssseeeessseeeeeeeee enne eene nnn nennen 6 TOYS IS COIN CA PINO TD mem 6 Construindo uma r plica da interface do usu rio do MS Outlook 2007 B sico eeeeesssrsss 7 Tarefa 1 Abrir o projeto no Expression BIA casamos dus ineo stanno Demo eo ttmku hex dao aa cut enem acata ga a Duden ads 8 Tarefa 2 Familiarizar com o Expression Blend cc cecccsscccccccceeeeseseeeceeeeeeeaeeseeecceeeeseeaeesseeeeeeseeeaaeaenees 9 Tarefa 3 Adicionar um controle DockPanel no LayoutRoot
41. Resource Resource name Key MySidebarButtonStyle Apply to all Define in Application This document Resource dictionary MyStyles xaml New Cancel Figura 63 Definindo o nome e o resource dictionary para o estilo MySidebarButtonStyle Laboratorio Pratico de WPF 71 O modelo de controle padr o para um bot o tem a estrutura de controle conforme mostrado na figura 64 Chrome T ContentFresenter Figura 64 A estrutura de controle do estilo padrao de botao Para nosso projeto queremos que a estrutura de controle aparente como o seguinte v Template ET Grid T ContentPresenter Figura 65 A estrutura de controle do nosso estilo de bot o personalizado 2 Em Objects and Timeline clique com o bot o direito do mouse no Chrome para abrir o menu contextual escolha Delete para excluir Chrome 3 Adicione um controle Grid no Template 4 Adicione um controle Border que voc pode localizar no Asset Library no controle Grid configure suas propriedades como segue e Background TemplateBinding Background EN 66 Clique no quadrado pequeno ao lado da propriedade Background para abrir o menu contextual escolha o item de submenu Template Binding Background Y Brushes Background C Custom Expression C Convert to Local Value Local Resource EPECULESSIE Data Binding Template Binding BorderBrush Foreground OpacityMask Figura 66 Ligando o template p
42. Timeline no painel Interaction depois disso ser exibida uma caixa amarela delimitadora em torno do nome do elemento que indica que o elemento est ativo e voc pode agora adicionar elementos filho a ele veja figura 6 Sele o de controle vs ativa o de controle Para editar as propriedades de um elemento voc s precisa selecionar o elemento Clique no elemento uma vez em Objects and Timeline Voc pode selecionar um elemento sem ativ lo Voc tamb m pode usar a ferramenta Selection n do Toolbox para selecion lo e ativar o respectivo elemento com um duplo clique no artboard Objects and Timeline Default Window Window E LayoutRoot Um elemento ativado tem uma caixa limitadora amarela ao redor de seu nome Figura 6 O LayoutRoot o elemento ativo 2 Adicione a ferramenta DockPanel no Toolbox a 7 O icone a indica que h uma introdu o detalhada na tela do Expression Blend O numero ao lado dele o numero da figura Sugerimos que voc sempre d uma olhada primeiro na figura se houver uma Laborat rio Pr tico de WPF 13 A ferramenta DockPanel n o mostrada no ToolBox por padr o portanto voc deve primeiro adicionar a ferramenta DockPanel no ToolBox Clique no bot o Asset Library gt no ToolBox para abrir a caixa de di logo Asset Library que exibe todas as ferramentas dispon veis para o projeto Para localizar rapidamente a ferramenta DockPanel digite DockPan
43. VerticalAlignment Top Common Properties e DataContext MS Internal Data XmlDataCollection Como MyMailHeaderGridControl tamb m um controle filho de LayoutRoot ele herda automaticamente as informa es do data source de LayoutRoot DataContext No Properties Editor do MyMailHeaderGridControl voc pode ver o DataContext XmlDataCollection isso porque nenhuma vinculac o de dados expl cita do MyMailHeaderGridControl DataContext se faz necess rio O MyMailHeaderGrid Control tem quatro controles TextBlocks para exibir os elementos Subject From Received e To do mail correspondente A ligac o de dados das propriedades TextBlock Text para XPath Subject XPath From XPath Received e XPath To j foram definidas no controle personalizado Com dp3 ativado adicione um controle Frame no dp3 e configure suas propriedades da seguinte maneira Frame Frame um controle de conte do que fornece a capacidade de navegar e exibir o conte do Conte do pode ser qualquer tipo de objeto NET Framework 3 0 e arquivos HTML No nosso projeto os E mails s o arquivos HTML localizados sob o diret rio project folder OutlookUI HOILWnitial Projects Current Project resources Laboratorio Pratico de WPF 65 e Dock Top Common Properties e NavigationUlVisiblity Hidden e DataContext MS Internal Data XmlDataCollection herdadas do LayoutRoot DataContext 7 Vincule os dados da propriedade Frame Source para XPath File e converta c
44. a um controle Image e um controle TextBlock 4 Adicione um controle Image no StackPanel criado na etapa 3 1 Ative StackPanel localizado no Button 2 Alterne para a guia Project 3 Em OutlookUI HOL expanda a pasta graphics e d um duplo clique no arquivo de imagem mail ico 4 Configure as propriedades do controle Image da seguinte maneira Layout e Width 21 Height 21 e Margin left 0 right 0 top 5 bottom 0 Laborat rio Pr tico de WPF 34 5 Adicione um controle TextBlock no StackPanel criado na etapa 3 1 Ative StackPanel localizado no Button se ele n o estiver ativo 2 Selecione a ferramenta TextBlock no ToolBox a 27 Clique com o botao direito do mouse no pequeno tri ngulo inclu do na ferramenta TextBox no ToolBox para obter uma lista dos outros recursos semelhantes e selecione entao TextBlock Fd TextBox zn RichTextBox PasswordBox am label 5 FlowDocumentsScrollViewer Figura 27 Selecionando a ferramenta TextBlock 3 D um duplo clique na ferramenta TextBlock no ToolBox para adicionar um controle TextBlock no StackPanel 4 Configure as propriedades do controle TextBlock da seguinte maneira O Expression Blend n o indica corretamente o Properties editor depois que voc adiciona um controle TextBlock Apenas selecione outro controle e selecione entao o controle TextBlock outra vez para editar suas propriedades Lembre se desse truque e Foreground
45. achment 1 nenhuma imagem mostrada 1 Adicione o seguinte texto no ListView Resources do ListView a T em E listview3 txt lt Data Template x Key MyAttachmentCellDataTemplate gt Image x Name myImage Source graphics attachment gif Stretch None gt lt Data Template Triggers gt lt DataTrigger Binding Binding XPath Attachment Value 1 gt Setter Property Source TargetName my Image Value x Null gt lt DataTrigger gt lt Data Template Triggers gt lt Data Template gt Laboratorio Pratico de WPF 87 2 Adicione o seguinte texto vermelho no ListView no Windowl xaml para criar uma terceira coluna de imagem a E 3 2 listview3 txt lt ListView gt lt ListView View gt lt GridView gt GridViewColumn CellTemplate DynamicResource MyAttachmentCellDataTemplate gt lt GridViewColumn Header gt Image Source graphics attachment gif Stretch None gt lt Grid ViewColumn Header gt GridViewColumn GridViewColumn Header From gt lt GridView gt lt ListView View gt lt ListView gt Laborat rio Pr tico de WPF 88 Tarefa 4 Classificar a lista Uma lista sem a funcionalidade de classifica o dificilmente uma lista til portanto a pr xima etapa adicionar a funcionalidade de classifica o para permitir que o usu rio classifique a lista por Importance Read Attachment Sender Receiver e Subject A lista classific
46. ada elemento File em seu local de arquivo correspondente o qual o valor atual da propriedade Frame Source Em inbox xml os arquivos para os mails sao especificados como lt File gt mail htm lt File gt nos elementos mail Como os locais de arquivo atuais para esses mails project folder OutlookUI HOLWnitial Projects Current Project resources mail htm necess rio primeiro converter mail htm para o path absoluto correspondente project folder OutlookUI HOLnitial ProjectsiCurrent Project resources mail htm antes de definir a propriedade Frame Source Isso feito usando um Converter Converter conversores Para converter dados durante a vincula o voc deve criar uma classe que implementa a interface IValueConverter que inclui os m todos Convert e ConvertBack Os conversores podem alterar os dados de um tipo para outro converter dados com base nas informa es culturais ou modificar outros aspectos de apresentacao Ao implementar a interface ValueConverter uma boa pr tica decorar a implementac o com um atributo ValueConversion para indicar s ferramentas de desenvolvimento os tipos de dados que envolveram na convers o 1 Adicione a seguinte classe MyFrameSourceConverter no namespace OutlookUI HOL no Windowl xaml cs E basici1 txt ValueConversion typeof string typeof string public class MyFrameSourceConverter IValueConverter public object Convert object value Type targetType object
47. ada quando o usu rio clica em um determinado cabe alho da coluna Dependendo da ordem de classifica o crescente ou decrescente adicionamos uma seta para cima ou para baixo no cabe alho da coluna como mostrado na figura 79 From a From Y Figura 79 Cabe alho da coluna com a seta para cima ou para baixo As diferentes apresenta es dos cabe alhos da coluna s o novamente obtidas usando modelos de dados 1 Adicione os seguintes modelos de dados no ListView Resources do ListView m FEI lt Data Template x Key MyArrowUpColumnHeaderTemplate gt lt StackPanel Orientation Horizontal gt lt TextBlock Text Binding Path Stroke Thickness 1 Fill DynamicResource MyBlueSolidBrush2 Data M 0 4 L 3 5 0 L 7 4 Z Margin 10 7 0 0 gt listview4 txt StackPanel lt DataTemplate gt lt Data Template x Key MyArrowDownColumnHeaderTemplate gt lt StackPanel Orientation Horizontal gt lt TextBlock Text Binding gt Path Stroke Thickness 1 Fill DynamicResource MyBlueSolidBrush2 Data M 0 0 L 3 5 4 L 7 0 Z Margin 10 7 0 0 gt lt StackPanel gt lt Data Template gt 2 Adicione o seguinte texto vermelho ao elemento ListView no Windowl xaml para registrar o manipulador de eventos myGridViewColumnHeader Click eh Es lt ListView ButtonBase Click myGridViewColumnHeader Click x Name myListView gt listview4 txt 3 Adicione o seguinte c digo classe Wind
48. adientBrush Default 7 Defina as propriedades do Layout idht 5 Height Auto Row 0 Column 1 Ipn E RowSpan 2 ColumnSpan 1 HorizontalAlignment Left erticalAlignment Stretch Margin 0 0 0 0 V All folders are up 0 i gn Es E Width 5 Figura 18 Adicionando um controle GridSplitter no Grid do lado esquerdo da segunda coluna Y Layout 3 Adicione um segundo controle vertical de GridSplitter do lado direito da segunda coluna do Grid e adicione entao um controle horizontal de GridSplitter na primeira coluna e na parte inferior da primeira linha do Grid Como voc j sabe adicionar um GridSplitter no Grid voc n o precisa perder tempo no segundo e no terceiro item N s preparamos trechos XAML que voc pode copiar e ent o colar diretamente no arquivo Windowl1 xaml As seguintes etapas mostram como fazer isso 1 Alterne para o modo XAML do Grid a 19 Em Objects and Timeline clique com o bot o direito do mouse no Grid para abrir o menu contextual escolha View XAML para alternar para o modo XAML Laborat rio Pr tico de WPF 27 Cut Copy Objects and Timeline Default Delete Window CE Group Into Window Ungroup Y E LayoutRoot Order Yv im DockPanel Align MyToolBarTrayt Auto Size MyStatusBarCo Change Layout Type m Border myMainGridFirstColumn Figura 19 Alternando para o modo XAML do Grid Como pode ver o c digo XAML do elemento
49. amentas para ver seus nomes Algumas das ferramentas incluem um tri ngulo pequeno que voc pode clicar com o botao direito para abrir uma lista de outros recursos dispon veis Para ter uma lista completa dos recursos clique no botao Asset Library Biblioteca do recurso gt 3 O painel Interaction painel de Intera o e A se o Triggers disparadores Sob Triggers no painel Interaction voc pode definir o disparador da propriedade ou o disparador do evento para algum controle e A se o Objects and Timeline objetos e linha do tempo Se voc tem um arquivo XAML como Windowl1 xaml aberto no artboard no modo Design a estrutura hier rquica do documento XAML indicada sob Objects and Timeline Uma seta mostrada ao lado de um elemento se este elemento tem elementos de heran a clique na seta para expandir ou esconder o elemento Para um aplicativo de WPF o elemento da raiz Window ou Page e voc pode desenhar v rios controles de sua pr pria escolha sob o elemento Window ou Page Z s Durante este LP voc pode encontrar o seguinte problema o artboard de repente se torna branco e voc acredita que perdeu todo o seu trabalho N o entre em p nico apenas certifique se de que esteja indicado ao lado de todos os seus controles na se o Objects and Timeline como est indicado ao lado de LayoutRoot na figura 4 O cone o indica que os controles relacionados e seus elementos de heran a s o vis veis no artboa
50. ara a propriedade Background O pequeno quadrado ao lado de propriedade Background quando ativado em laranja indica que a propriedade Background um template ligado Template Binding Liga o de Template Template binding usado para vincular as propriedades no template s propriedades do controle ao qual o template aplicado No nosso caso template binding do Border Background para o Button Background tem o efeito que quando definimos a propriedade Background de um botao cujo estilo definido como MySidebarButtonStyle estamos realmente nos referindo propriedade Background do controle Border no modelo de controle Laborat rio Pr tico de WPF 12 e BorderBrush TemplateBinding BorderBrush e BorderThickness TemplateBinding BorderThickness e Margin 0 0 0 0 5 Adicione um controle ContentPresenter que voc pode localizar no Asset Library no controle Grid configure suas propriedades como segue e HorizontalAlignment Center VerticalAlignment Center e Margin 0 0 0 0 Content Presenter Um content presenter um espa o reservado no modelo de controle para exibir o conte do do controle ao qual o modelo aplicado Isso pode ser o valor de uma propriedade Content em um Button por exemplo ou uma propriedade Text em um TextBox 6 Adicione e personalize o disparador de propriedade IsPressed True a 67 EN 68 Y Triggers Event Property Trigger Default O Minwidth 0 IsKeyboa
51. barControl Tarefa 1 Criar o Bot o Sidebar A figura 59 mostra a apar ncia do sidebar sua estrutura hier rquica de controle aparece ilustrada na figura 60 Navigation Pane Ly Inbox 161 Figura 59 O sidebar Y im mySidebarControl Y Button v 3 StackPanel Image T TextBlock Inbox T TextBlock 161 myNavigationPaneButton Figura 60 A estrutura hier rquica de controle do sidebar 1 Com Grid ativado adicione um controle DockPanel no Grid configure suas propriedades da seguinte maneira e Name mySidebarControl e Width Auto Height 27 e HorizontalAlignment Left VerticalAlignment Stretch e LastChildFill True Marcado Laborat rio Pr tico de WPF 68 g 3 4 5 e Margin left 0 right 0 top 32 bottom 7 Adicione um controle Button no mySidebarControl configure suas propriedades da seguinte maneira e Background MyBrightBlueSolidBrush2 e BorderBrush MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 Adicione um controle StackPanel no Button configure suas propriedades da seguinte maneira e Width Auto Height Auto e Orientation Horizontal dicione um controle Image no StackPanel configure suas propriedades da seguinte maneira e Width 16 Height 16 e HorizontalAlignment Center VerticalAlignment Center e Margin left 4 right 2 top 0 bottom O e Source graphics inbox gif e Stretch Fill dicione um
52. ce no projeto 2 Vincular dados do LayoutRoot DataContext para o path inbox mail do XML data source do inboxDS Todos os elementos de heran a do LayoutRoot ent o herdam as informa es do data source LayoutRoot DataContext automaticamente Suas propriedades DataContext est o todas implicitamente definidas no MS Internal Data XmlDataCollection 3 Vincular dados da propriedade ListView ItemsSource ao contexto expl cito de dados 4 Configurar a propriedade ListView IsSynchronizedWithCurrentItem herdada do Selector como true para garantir que MyMailHeaderGridControl e Frame sempre se referem ao item selecionado no ListView Propriedade Selector IsSynchronizedWithCurrentItem A propriedade Selector IsSynchronizedWithCurrentItem obt m ou define um valor que indica se um Selector deve manter o SelectedItem sincronizado com o item atual na propriedade Items Voc pode definir a propriedade IsSynchronizedWithCurrentItem para true para garantir que o item selecionado sempre corresponde propriedade CurrentItem no ItemCollection Por exemplo suponha que h dois controles ListView com suas propriedades ItemsSource definidas para a mesma fonte Defina IsSynchronizedWithCurrentItem como true em ambos os controles ListView para garantir que o item selecionado em cada ListView seja o mesmo 5 Gravar declara es Binding para os elementos que exibem informa es mail como o conte do sender receiver subject e mail 1 Para o Gr
53. contra Por exemplo no caso de um botao n s podemos definir sua propriedade Background para azul em seu estado Default e n s tamb m podemos definir sua propriedade Background para laranja caso o usu rio mova o mouse sobre ele e finalmente a propriedade Background pode ser vermelha quando o usu rio clica nele Laborat rio Pr tico de WPF 33 Faca o seguinte para definir a propriedade Style do Button para MyBottomLeftButtonStyle Miscellaneous e Style MyBottomLeftButtonStyle 26 Expanda a categoria Miscellaneous clique no quadrado pequeno ao lado da propriedade Style para abrir o menu contextual clique em Local Resource e selecione MyBottomLeftButtonStyle Y Miscellaneous AllowDrop ClickMode Press Clip Command CommandParamet Comm Style evi Reset Contentld Custom Expression Convert to Local Value v MyBottomLeftButtonStyle Local Resource SimpleButton Ml Edit Resource Convert to New Resource E Data Binding Template Figura 26 Ajustando a propriedade Style do controle Button para MyBottomLeftButtonStyle 3 Adicione um controle StackPanel no Button Primeiramente ative Button depois d um duplo clique na ferramenta StackPanel no ToolBox e em seguida configure as propriedades do StackPanel da seguinte maneira e Width Auto Height 26 e Orientation Horizontal O controle StackPanel adicionado nessa etapa deve conter dois elementos de heran
54. cts and Timeline I MyBorderBlueGradientBrush E MyBrightBlueSolidBrush1 E Window 3 Defina o Back round E Default _ MyButtonBlueGradientBrush gt MyButtonPressedOrangeBorderSoli OOO MyButtonPressedOrangeGradientBr MyDarkBlueSolidBrush MyDarkOrangeSolidBrush GridSplitter Mail i 7 E StackPanel e 8g j MyDropDownGrayGradientBrush v E StackPanel Y Appearance TextBlock M e O G Button S o Fin t 02 02 CNA TA en OS 2222 Clique mantendo SOS Button 2 pressionada a tecla Shift METTE Restaure o Width Width Auto G 0 MAES Figura 28 Definindo as propriedades Background e Width dos ltimos cinco bot es v E Border v iE Grid myMainGridFirstColu GridSplitter Sugerimos que voc fa a a seguinte etapa opcional ap s ter conclu do o curso b sico ou o curso avan ado Corrigir as propriedades Image Source e TextBlock Text dos ltimos cinco bot es Os valores das propriedades sao e mage Source graphics calendar ico TextBlock Text Calendar e mage Source graphics contacts ico TextBlock Text Contacts e mage Source graphicsMasks ico TextBlock Text Tasks e mage Source graphics notes ico TextBlock Text Notes e Image Source graphics folder ico TextBlock Text Folder List Crie e execute o projeto F5 Arraste o GridSplitter horizontal para cima e para baixo como pode ver ha tr s problemas com o comportamento do
55. datic MSDN 1 3 Outbox Ronnie Saurenmann Ruihua Jin WPF Rocks o L gj Unwanted mail 34 p Digital Media Add Video to Controls a RSS Feeds Frank Koch Ruihua Jin user experience and 3D Surfaces with WPF Microsoft at Home 93 Olaf Feldkamp RuihuaJin Sample code Learn about Windows Presentation o Sent I Ronnie Saurenmann Ruihua Jin News Foundation media integration so you can sal a ls Up Ronnie Saurenmann Ruihua Jin Where to start add media files and dazzling visuals to your Ronnie Saurenmann Ruihua Jin Expression own apps Ronnie Saurenmann Ruihua Jin Blend Sascha Corti Ruihua Jin WPF Articles on MSDN eem Cg e Ee nteracting wit placed on is now Stefano Malle Ruihua Jin A good book on marku PF 3 2 EN possible in v1 of the Windows Presentation Ken Casada Ruihua Jin Windows Presentation Foundatic PomulsBont pm Ronnie Saurenmann Ruihua Jin WPF Rocks 5 Calendar TW c latins eA a App Fundamentals Build A Great User 83 Contacts Olaf Feldkamp Ruihua Jin Sample code Experience With Windows Presentation Ronnie Saurenmann Ruihua Jin News Foundation x Tasks Ronnie Saurenmann Ruihua Jin Where to start The Windows Presentation Foundation x application model distinguishes between Ronnie Saurenmann Ruihua Jin Expression qup lt Notes e uerit DN standalone and browser applications and T UE between menu driven and hyperlink driven C annaa ae Dasshaso lia AING A ln vm NACNAI B ij Folder List
56. ding liga o de templates Property triggers disparadores da propriedade data triggers disparadores de dados Laboratorio Pratico de WPF 6 Organizacao deste Laboratorio Pratico O Laborat rio Pr tico dividido em tr s cursos um curso b sico e dois cursos avan ados Parte I Componentes de constru o do Outlook UI b sico A primeira parte do conhecimento b sico do Laborat rio Pr tico de WPF dada Todos os componentes importantes do Outlook UI sao constru dos durante este curso Parte II Personalizando Buttons bot es avan ado Na segunda parte voc aprender sobre como personalizar controles Buttons do seu pr prio gosto Parte III Personalizando ListView exibi o de lista avan ado Na terceira parte voc aprender sobre como personalizar um controle ListView do seu gosto Descritivo dos T picos Usados Nesta Documenta o Ponto importante para saber do cora o do WPF Dica Nota Exerc cio Introdu o passo a passo em MS Expression Blend Linhas de c digo para economizar muita digita o n s preparamos linhas de c digo que podem ser copiadas e ent o coladas Os arquivos para as linhas de c digo est o localizados sob o diret rio project folder OutlookUI HOLicode snippets onde o project folder o diret rio em que voc copiou o projeto Onde come ar importante para n s que voc se familiarize com tantas caracter sticas de WPF quanto poss
57. ection ListSortDirection Ascending headerClicked Column HeaderTemplate ListView sender Resources My ArrowUpColumnHeaderTemplate as DataTemplate else headerClicked Column HeaderTemplate ListView sender Resources My ArrowDownColumnHeaderTemplate as DataTemplate j Remove arrow from previously sorted header if lastHeaderClicked null amp amp lastHeaderClicked headerClicked lastHeaderClicked Column HeaderTemplate null Update sorting information lastHeaderClicked headerClicked lastDirection direction private void Sort string sortBy ListSortDirection direction ICollectionView dataView Collection ViewSource GetDefault View myListView ItemsSource dataView SortDescriptions Clear SortDescription sd new SortDescription sortBy direction dataView SortDescriptions Add sd Laboratorio Pratico de WPF 90 realmente admir vel que voc tenha permanecido no curso e terminado este Laborat rio Pr tico Esperamos que voc tenha apreciado o laborat rio WPF uma estrutura muito boa para desenvolver poderosos aplicativos Windows Se voc agora tem a mesma opini o que n s temos ent o nosso trabalho foi bem feito e n s estaremos contentes se voc considerasse o WPF como uma op o quando voc estiver criando seus projetos Obrigado Mais em Expression Blend e Windows Presentation Foundation O Microsoft Expression Blend fornecido com um guia do usu ri
58. eiro do mouse sobre a rea da r gua azul grossa na parte superior do Grid Uma coluna de r gua laranja seguir o ponteiro do mouse e indicar onde uma nova coluna divis ria ser colocada caso voc clique Clique para criar um novo divisor de coluna Um divisor de coluna azul aparece dentro do Grid 4 Crie um segundo divisor de coluna 5 Mova o ponteiro do mouse sobre a rea da r gua azul grossa esquerda do Grid clique para criar uma linha divis ria amp OutlookUI HOL ln Microsoft Expression Blend File Edit View Object Project Tools Window Help 1 Em Objects and Timeline 3 Windowl1 xaml ative o Grid VP File Edit View Go Tools Actions Help R yW New v ie 3 X qa Reply Ni Reply to Alli Forward Ba Y uri A TDR 3 Mova o ponteiro 4 Clique para criar um do mouse sobre a segundo divisor de area da r gua azul coluna grossa e clique para criar um divisor de coluna Wvx ubiseq 5 Clique para criar uma linha divisoria 5634 Items All folders are up to date 3 Connected to Microsoft Exchange v io mf Figura 17 Criando dois divisores de coluna e uma linha divis ria para o Grid Laborat rio Pr tico de WPF 23 Caso queiramos que o usu rio possa ajustar a largura da coluna e a altura da linha em tempo de execu o devemos adicionar GridSplitters no Grid 2 Adicione um controle GridSplitter vertical no lado esquerdo da segunda coluna do Grid a 18 1 Ative o
59. el na caixa de texto no canto superior esquerdo em seguida clique no DockPanel mostrado na caixa de di logo Asset Library Gallery Details 1 showing out of 85 total assets Media Custom Controls Recent Simple Styles Custom E MyStyles Defines an area in which you can arrange child elements either horizontally or vertically relative to each other Figura 7 Adicionando a ferramenta DockPanel no ToolBox Agora voc pode ver o cone da ferramenta DockPanel no ToolBox 3 Adicione um controle DockPanel no LayoutRoot a S a 9 H duas formas comuns para adicionar um controle filho a um controle pai e em ambas requerem que o controle pai seja ativado primeiro Com o controle pai ativado execute uma das seguintes opera es a Clique na ferramenta do controle filho no ToolBox mova o mouse na posi o onde deseja que o controle seja localizado no artboard e em seguida desenhe um controle do tamanho desejado enquanto mant m pressionado o bot o esquerdo do mouse veja figura 8 b D um duplo clique na ferramenta do controle filho no ToolBox depois disso o controle adicionado automaticamente ao controle atualmente ativo com seu tamanho padr o veja figura 9 Agora deve ser poss vel adicionar um controle DockPanel no LayoutRoot Laborat rio Pr tico de WPF 14 4 OutlookUI HOLsIn Microsoft Expression Blend Ale Edt View Object Project Tools Window Help E Windowlxaml Project E Properties Ef Resou
60. elementos de heran a Este t pico aborda quatro das propriedades mais importantes HorizontalAlignment VerticalAlignment Margin e Padding Propriedades do Alignment alinhamento As propriedades HorizontalAlignment e VerticalAlignment descrevem como um elemento de heran a deve ser posicionado dentro de um elemento pai A propriedade HorizontalAlignment declara as caracter sticas de alinhamento horizontal para aplicar nos elementos de heran a Os valores poss veis da propriedade HorizontalAlignment s o Left esquerda Center centro Right direita e Stretch estender A propriedade VerticalAlignment descreve as caracter sticas de alinhamento vertical para aplicar nos elementos de heran a Os valores poss veis para a propriedade VerticalAlignment s o Left esquerda Center centro Right direita e Stretch estender A figura a seguir mostra diferentes valores de combina es de HorizontalAlignment H e VerticalAlignment V do controle Button que elemento filho do controle Grid e cada Button posicionado em uma c lula da determinada grade Laboratorio Pratico de WPF 16 H Left V Top H Center V Top H Right V Top H Stretch V Top H Left V Center H Center V Center H Right V Center H Stretch V Center ma Left V Bottom H Center V Bottom H Right V Bottom H Stretch V Bottom sp H Left V Stretch H Center V Stretch H Right V Stretch H Stretch V Str
61. entao faca c pias deles Laborat rio Pr tico de WPF Y Objects and Timeline Default Window MyStatusBarControl v E Border v iE Grid myMainGridFirstColumnSplitte GridSplitter GridSplitter gt StackPanel myFoldersExpandersControl Em seguida uma caixa de di logo aberta aqui voc Cut Copy Delete Rename Group Into Order Align Auto Size Bind Content to Data Edit Text Edit Other Templates View XAML 49 Create Empty Apply Resource gt especifica o nome do style como MyDoubleArrowToggleButtonStyle e seleciona MyStyles xaml como um resource dictionary Clique em OK Create Style Resource Resource name Key MyDoubleArrowToggleButtonStyle Apply to all Define in Application This document Resource dictionary Como pode ver o modelo ToggleButton E E KU as dl ae T M VI TODD 1 WWEE DR MyStyles xaml OK controle ContentPresenter veja figura 44 Chrome T ContentPresenter tem um Chrome que cont m um Laboratorio Pratico de WPF 50 2 Para excluir Chrome clique com o botao direito do mouse no Chrome para abrir o menu contextual e selecione Delete 3 Com Template ativado adicione um controle Grid no Template e configure suas propriedades da seguinte maneira e Background um solid color brush arbitr rio com Alpha 0 Na categoria Brushes clique em Background e clique pa
62. ertical Com mySidebarControl selecionado expanda a categoria Transform sob a subcategoria LayoutTransform defina as propriedades a seguir e Rotate E Angle 90 9 Gireo controle Image criado na etapa 4 90 graus no sentido hor rio Com o controle Image selecionado expanda a categoria Transform sob a subcategoria LayoutTransform defina as propriedades a seguir e Rotate 24 Angle 90 Laboratorio Pratico de WPF 70 Crie e execute o aplicativo F5 Mova o mouse sobre os bot es no sidebar e clique neles Como pode ver os dois bot es ter uma apar ncia diferente dos bot es do Outlook vamos come ar a configurar nosso pr prio modelo de controle para os dois bot es Tarefa 2 Editar um Modelo de Controle para os Bot es Sidebar 1 Abrao editor do modelo de controle para o Button 62 63 Clique com o bot o direito do mouse no Button para abrir o menu contextual selecione Edit Control Parts Template gt Edit a Copy Na caixa de di logo nomeie o estilo MySidebarButtonStyle e escolha MyStyles xaml como o resource dictionary Cut Copy Delete Rename Group Into Order Align Auto Size Bind Content to Data Edit a Copy Y im mySidebarControl Create Empty button E Apply Resource gt v 4 StackPanel Image TextBlock Inbox TextBlock 161 myNavigationPaneButton Figura 62 Abrindo o editor do modelo de controle para o controle Button Create Style
63. esxaml WindowLxaml Project E Properties amp Resources E Y Triggers Name PART HeaderGripper 3 3 Event Property Trigger Default dE C IsMouseOver TUE 1 Clique IsPressed True Y Appearance Height n def Opacity 10096 IsEnabled False Visibility Visible Type Thumb Search IWvx ubiseg BorderThickness 0 Properties when active t 0 HeaderBorder Background GridView pA Clique uk qd V z C PART HeaderGripper Background 88 By Clique J rl ew O Uu Y Layout Activated when Width target element IsMouseOver v Height True 41 Actions when activating 4 Actions when deactivating Top Left HorizontalAlignme Y Objects and Timeline VerticalAlignment v 4 Default Margin MyGridViewColumnHeaderControlTemplat 52 SEUS Zindex lt gt ControlTemplate Results vim Grid Project CAUserstw ruihuj EUROPA Documents OutlookWPROu v E HeaderBorder v im Grid Cursor None Project C Users v ruihuj EUROPE Documents OutlookWPF Ou Y Common Properties v mM Border DataContext Bl HeaderContent C Windows Microsoft NET Framework v2 0 50727 Csc exe noc IsEnabled EE x CAWindows Microsoft NET Framework w2 0 50727 Csc exe noc LM ocu OutlookUI HOL gt C Users v ruihuj EUROPE Documents Outlo ToolTip The build has successfully completed wm o uw 5 p O 7 Edite o disparador de propriedade
64. etch i i i Propriedades de Margin margem A propriedade Margin descreve a dist ncia entre um elemento e seus filhos ou pares O valor de Margin pode ser uniforme podendo utilizar a sintaxe Margin 15 Com essa sintaxe um Margin uniforme de 15 pixels independente de dispositivo poderia ser aplicado ao elemento Os valores de Margin podem tamb m assumir o formato de quatro valores distintos cada valor descrevendo uma margem distinta para aplicar esquerda superior direita e inferior nesta ordem como Margin 0 10 5 25 A figura a seguir mostra dois controles Buttons que s o elementos filho de um controle Grid O Button esquerdo tem um valor de Margin uniforme de 15 e o Button direito tem quatro valores Margin distintos de Margin 5 0 20 10 i H Stretch H Stretch V Stretch V Stretch Margin left 5 Margin 15 top 0 right 20 bottom 10 Propriedades de Padding preenchimento A propriedade Padding exposta em apenas algumas classes principalmente como uma conveni ncia Block Border Control e TextBlock s o exemplos de classes que exp em a propriedade Padding A propriedade Padding amplia eficazmente o tamanho de um elemento filho pelo valor especificado Thickness A figura a seguir mostra um controle Border que cont m um bot o O valor Padding do controle Border 5 0 20 10 Border Padding left 5 top 0 right 20 bottom 10 Quando desejamos que o
65. foi lido Read true e se o email n o foi lido pelo usu rio Read true 1 Adicione o seguinte texto no ListView Resources do ListView a SP tistview3 txt lt Data Template x Key MyReadCellDataTemplate gt Image x Name my Image Stretch None gt lt Data Template Triggers gt lt DataTrigger Binding Binding XPath Read Value true gt Setter Property Source TargetName my Image Value graphicsiread gif gt lt DataTrigger gt lt DataTrigger Binding Binding XPath Read Value false gt Setter Property Source TargetName my Image Value graphics unread gif gt lt DataTrigger gt lt Data Template Triggers gt lt Data Template gt 2 Adicione o seguinte texto vermelho no ListView no Windowl xaml para criar uma segunda coluna de Imagem me FE lt ListView gt lt ListView View gt lt GridView gt listview3 txt GridViewColumn CellTemplate DynamicResource MyReadCellDataTemplate gt lt GridViewColumn Header gt Image Source graphics mailType gif Stretch None gt lt Grid ViewColumn Header gt GridViewColumn GridViewColumn Header From gt lt GridView gt lt ListView View gt lt ListView gt A terceira coluna do ListView tamb m uma coluna de imagem ela usada para mostrar se o email t m um anexo enviado com ele Se sim mail Attachment file name ent o H exibido caso contr rio mail Att
66. fre deste problema 2 Agrupe o DockPanel dp2 em um Border 3 Configure as propriedades do Border da seguinte maneira e BorderBrush MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 e Width Auto Height Auto e Row 0 RowSpan 2 Column 1 ColumnSpan 1 e HorizontalAlignment Stretch VerticalAlignment Stretch e Margin left 5 right 5 top 0 bottom O 4 Configure as propriedades de dp2 da seguinte maneira Width Auto Height Auto HorizontalAlignment Stretch VerticalAlignment Stretch LastChildFill True Margin 0 0 0 0 5 Com dp2 ativado adicione um controle personalizado chamado MyInboxExpanderControl no dp2 e configure suas propriedades da seguinte maneira e Dock Top e Horizontal Alignment Stretch VerticalAlignment Top Laboratorio Pratico de WPF 58 Nesta tarefa voc aprender a como vincular um controle a um XML data source externo 1 Com a DockPanel dp2 ativado adicione um controle ListView no dp2 e configure suas propriedades da seguinte maneira rushes e BorderBrush No brush e Foreground Black no editor solid color brush defina R 0 G 0 B 0 100 Appearance e BorderThickness 0 0 0 0 ayout e Dock Top Margin 0 0 0 0 ommon Properties e IsSynchronizedWithCurrentItem True Marcado e SelectedIndex 0 2 Adicione um novo XML data source no Projeto 52 4 53 Alterne para a guia Project na se
67. gina da Web Criar um aplicativo no Expression Blend significa escrever c digo XAML m o ou visualmente trabalhando no modo Design do Expression Blend XAML parte do Microsoft Windows Presentation Foundation WPF O WPF est na categoria de recursos no Microsoft NET Framework 3 0 que lidam com a apresenta o visual dos aplicativos baseados no Windows e aplicativos de cliente baseado em navegador Web O XAML para qualquer documento determinado no Expression Blend armazenado em um arquivo xaml Se ha c digo subjacente para seu documento XAML esse c digo armazenado em um arquivo de mesmo nome com a extens o adicional de cs ou vb Por exemplo se seu documento XAML for chamado Windowl xaml o c digo por tr s do arquivo vai se chamar Windowl xaml cs se a linguagem de programa o for em c digo CH Para obter a exibi o completa do artboard escolha Hide Panels ocultar pain is F4 ou TAB no menu Window O painel Results painel de Resultados O painel Results exibe informa es como avisos erros que se originam de um documento XAML errado ou informa es de sa da durante uma cria o de projeto Analisador WPF WPF parser Quando voc cria seu projeto o analisador WPF l o arquivo xaml para o projeto e relata quaisquer erros resultantes Da mesma forma quando voc abre um projeto existente no Expression Blend o analisador l os arquivos xaml que s o inclu dos na sua pasta de projeto e tenta anali
68. h Path K MyinboxExpanderExpandSiteBackgr Y Objects and Timeline Y Appearance Opacity 100 Visibility Visible v Data M11 25 11 333333L7 16 StrokeThickness 1 Y Layout Laborat rio Pr tico de WPF 51 5 Configure as propriedades do controle Path da seguinte maneira e Fill No brush e Stroke MyDarkBlueSolidBrush 6 Crie um segundo path no Grid 46 Em Objects and Timeline clique com o bot o direito do mouse no Path para abrir o menu contextual selecione Copy Clique com o bot o direito do mouse no Grid para abrir o menu contextual selecione Paste Com o segundo Path selecionado arraste o para a direita conforme descrito na figura 46 4 OutlookUI HOL sln Microsoft Expression Blend Am Ea File Edit View Object Project Tools Window Help E MyStylesxaml Window1 xaml Project E Properties amp Resources E Name lt No Name gt Property Type Path Wvx ubiseq Search IsKeyboardFocused True Y Brushes IsChecked True D Fil Nobrush o eee Stroke OpacityMask No brush Pa o a Y Appearance Opacity 100 3 Posicione o Visibility Visible v mouse sobre a Data M11 25 11 333333L7 16 MyDoubleArrowToggleButtonStyle le area de sele o i y 999 Dee stus clique e arraste P StrokeThickness 1 Y Objects and Timeline Default My H CO mum v Template BL Grid l bce tains Path 2 Width nj L G path gt 1 Clique Height
69. hange Layout Type Zindex MyStatu TT WrapPanel Chigi M UniformGrid 1 Bot o Direito Botao Direito ido Apra Cursor DataContext Default VerticalAlignment Y E LayoutRoot Canvas Margin IsEnabled ToolTip gt Transform gt Miscellaneous 6 Com Border selecionado configure as propriedades do Border da seguinte maneira a 16 e BorderBrush MyBorderBlueGradientBrush e BorderThickness left 5 right 5 top 3 bottom 5 e Width Auto Height Auto e Dock Bottom A hierarquia dos controles foi atualizada como a seguinte DockPanel gt Border gt Grid por isso que devemos especificar a propriedade Dock para Border em vez do Grid agora e HorizontalAlignment Stretch VerticalAlignment Stretch e Margin Q 0 0 0 Para fins de abrang ncia n s alistamos as propriedades de uso geral do controle que esta sendo editado independentemente do valor da propriedade ser o padr o ou n o Voc precisa somente prestar aten o s propriedades que s o atribu das aos valores personalizados estas propriedades est o em negrito Laborat rio Pr tico de WPF 23 4 OutlookUI HOL sln Microsoft Expression Blend File Edit View Object Project Tools Window Help N Interaction Z WindowLxaml Project I7 Properties amp Resources Y Triggers A Name lt No Name gt C rx File Edit View Go Tools Actions Help NV 33 ih LAS s Reply H Reply tc 3 New Eu eI X
70. ico de WPF 42 Tarefa 8 Adicionar um ToggleButton para Mostrar Ocultar o Sidebar A figura 1 mostra a interface com o usu rio do aplicativo cujo Grid tem tr s colunas No entanto por experi ncia com o usu rio sabemos que a maior parte do tempo nos concentraremos na segunda coluna que mostra todos os itens de uma lista com detalhes como email do remetente destinat rio assunto etc e a terceira coluna que exibe o conte do de um email Portanto por que nao fazer mais espaco para a segunda e terceira colunas Nossa abordagem criar um controle ToggleButton acima dos dois expansores que adicionamos na ultima tarefa veja figura 33 Mail Figura 33 Um controle DockPanel com um TextBlock e um ToggleButton Se o ToggleButton estiver desmarcado temos em seguida o modo de exibi o normal com as tr s colunas no Grid se o ToggleButton estiver marcado a primeira coluna em seguida minimizada e exibido uma barra lateral sidebar que cont m um bot o para o Navigation Pane painel de navega o e um bot o para o Inbox indicado File Edit View Go Tools Actions Help Y ES New wv T LAS x Ed Reply Reply to All gt Forward ma Y ba s Send Receive v ES 5 gt gt Inbox i WPF Articles on MSDN Subject Favorites Folders A Sascha Corti X Inbox 161 PER duticles on MSDN Sent Mi 14 03 2007 10 52 LO Unread Mail good book on markup WPF To Ruihua Jin LA Sent Item
71. idViewColumn do GridView no ListView temos declara es Binding como GridViewColumn Header To Display MemberBinding Binding XPath To gt 2 Paraos controles TextBlocks no MyMailHeaderGridControl temos declarac es Binding como lt TextBlock Text Binding XPath Subject gt 3 Para o controle Frame temos a declara o Binding Frame Source Binding XPath File gt Parab ns Voc fez um grande trabalho Se estiver ansioso para mais recursos WPF basta continuar com nosso Laborat rio Pr tico Nos seguintes cursos avan ados voc aprender como personalizar um controle Button e um controle ListView Laboratorio Pratico de WPF 67 Criando o Sidebar avancado No curso b sico foi lhe solicitado para adicionar o controle personalizado MySidebarControl que consiste de dois bot es Pode parecer simples adicionar dois bot es entretanto como voc ver h mais para ser feito para conseguir um sidebar estilo Outlook Neste curso avan ado voc aprender sobre e personalizar o modelo de controle de um controle Button vincula o de modelo ContentPresenter disparadores de propriedade de multi condi o e gravar manipuladores de eventos para exibir ou ocultar o MyNavigationPaneControl Primeiro necess rio excluir o mySidebar Control antigo do Grid Em Objects and Timeline clique com o bot o direito do mouse no mySidebarControl para abrir o menu contextual escolha Delete para excluir o mySide
72. igualmente quatro valores poss veis Left Center Right e Stretch Laborat rio Pr tico de WPF 32 A propriedade Control VerticalContentAlignment obt m ou define o alinhamento horizontal do conte do de um controle semelhante a FrameworkElement VerticalAlignment ele tem igualmente quatro valores poss veis Top Center Bottom e Stretch e Padding left 3 right 1 top 1 bottom 1 File Edit View Object Project Tools Window Help N Interaction Z WindowLxaml X Project m Properties E Resources Y Triggers k Event File Edit View Go Tools Actions Help n 3 iNew v I R K Cen Rory to Al EMME Denna BorderThickness B O BorderThickness O 02 Height Y Objects and Timeline orizontalAlignme Default VerticalAlignment Window v Window v iB LayoutRoot v im DockPanel MyToolBarTrayControl c HorizontalScrollBa torizontalContent erticalContentAli Grid IsSharedSizesS MaxHeight unendlich StackPanel G Button Button ho MaxWidth unendlich MinHeight 5634 Items MinWidth 0 0 Padding 10 BREE Figura 25 Adicionando um controle Button no StackPanel Para que os controles Button tenham a mesma apar ncia do MS Outlook 2007 n s definimos nosso pr prio estilo chamado MyBottomLeftButtonStyle para estes bot es Style estilo Um Style permite que voc defina valores de propriedades diferentes para diferentes estados em que um controle se en
73. ir texto usando os comandos Go To Find Find Next e Replace do menu Edit As altera es feitas no modo XAML s o atualizadas automaticamente no modo Design e as altera es feitas no modo Design s o atualizadas automaticamente no modo XAML O Expression Blend atualiza os erros de sintaxe no painel Results quando voc salva o arquivo ou quando voc alterna entre os modos de exibi o modo Design e modo XAML Adicione o seguinte c digo XAML para esses dois elementos GridSplitter ap s o primeiro elemento GridSplitter basics txt GridSplitter Width 5 Background DynamicResource MyBorderBlueGradientBrush Grid Column 1 Grid RowSpan 2 gt Laborat rio Pr tico de WPF 29 lt GridSplitter HorizontalAlignment Stretch VerticalAlignment Bottom Height 7 Background DynamicResource MyHGridSplitterBlueGradientBrush gt Alterne para o modo Design e pressione F4 novamente para retornar interface com o usuario normal do Expression Blend hora para criar e executar o aplicativo Pressione F5 e espere at que seu primeiro aplicativo WPF apareca Seu aplicativo deve ter a apar ncia da figura 21 Mova o mouse sobre a barra de ferramentas clique nos menus nos bot es nas imagens e nas caixas de texto arraste o GridSplitter vertical para a esquerda e para a direita e arraste o GridSplitter horizontal para cima e para baixo File Edit View Go Tools Actions Help iNew v e rn X Ed Reply Reply t
74. itter 1 Xr em 7 Sn tter Use a custom path expression Properties ExtentHeight Double ExtentWidth Double FlowDirection FlowDirection Height Double HorizontalAlignment HorizontalAlignment HorizontalOffset Double MaxHeight Double MaxWidth Double MinHeight Double MinWidth Double Name String Opacity Double Orientation Orientation Persistid Int32 VerticalAlignment VerticalAlignment Show Matching Types Only hd Figura 31 Vinculando a propriedade MaxHeight da segunda linha com o valor da propriedade ActualHeight do StackPanel Clique OK para fechar a caixa de di logo RowDefinition Collection Editor Ap s ter configurado a altura da linha do Grid com xito voc pode se perguntar e sobre a largura da coluna Sim tamb m precisamos fazer algo com a primeira coluna Queremos manter StackPanel vis vel quando arrastamos o divisor da primeira coluna em dire o esquerda do Grid Portanto vamos definir a propriedade MinWidth da primeira coluna como 27 de modo que as imagens sejam sempre vis veis 1 Selecione o controle Grid 2 No Properties editor expanda a categoria Layout Localize a propriedade ColumnDefinitions Collection clique no bot o El uma caixa de di logo em seguida exibida 3 Defina MinWidth 27 e Name myMainGridFirstColumn para 0 ColumnDefinition a 32 Laborat rio Pr tico de WPF ColumnDefiniti
75. kUI HOL Basic Initial e ct Ev a Name Date modified Type Ed bin 07 05 2007 13 34 File Folder Recent Places graphics 07 05 2007 13 34 File Folder E E obj 07 05 2007 13 34 File Folder resource 07 05 2007 13 34 File Folder Desktop 2 OutlookUI HOL csproj 07 05 2007 13 17 Visual C Proj OutlookUIHOL sty 01 020420071712 Microsoft Vist Ruihua Jin Intl Vendor A Computer A _ 4 m b Network File name OutlookUI HOL sin a Files of type Project Files sln csproj vbproj x Cancel Figura 3 A caixa de di logo Open Project para abrir o projeto OutlookUI HOL Basic Initial Agora voc tem um projeto carregado na mem ria e vamos comegar a construir uma interface com o usu rio impressionante Laboratorio Pratico de WPF 9 Tarefa 2 Familiarizar com o Expression Blend A interface com o usu rio do Expression Blend dividida em 6 reas principais Tex ulmag LJ NI Pure bordos Ej nbori Las n kteeppoeumi BE uyrokierexpanderscontrotxami n MylriGceE snandencontrod sen F e Myla Do atari otra E BE MytavigasonPaneCortroleam ED unsdesanontia ami Mhra n pe balas fara ceil Dau B erenaam E W e o e Bl irio erona E outieck 2007 icm Figura 4 A interface com o usuario padr o do Expression Blend O Menu 2 O ToolBox caixa de ferramentas O ToolBox fornece v rios recursos que voc pode desenhar no artboard Pare o mouse sobre as ferr
76. l com um ToolBarTray um StatusBar e um Grid Laborat rio Pr tico de WPF 18 Nosso projeto foi fornecido com um controle ToolBarTray personalizado e um controle StatusBar personalizado e ambos s o definidos como controles do usu rio chamados MyToolBarTrayControl e MyStatusBarControl 1 Adicione um MyToolBarTrayControl no DockPanel 1 Adicione a ferramenta MyToolBarTrayControl no ToolBox a 11 Abra a caixa de di logo Asset Library selecione a guia Custom Controls digite MyToolBarTrayControl na caixa de texto e clique em MyToolBarTrayControl Agora voc pode ver a ferramenta no ToolBox vasa MyToolBarTrayControl Gallery Details 1 showing out of 9 total assets Show All Asset Library Controls Local Styles Media Custom Controls Recent gt MyToolBarTrayControl 1 Clique 3 Clique 2 Adicione um MyToolBarTrayControl no DockPanel e defina a propriedade Dock como Top m Ative o DockPanel d um duplo clique na ferramenta MyToolBarTrayControl no ToolBox e defina a propriedade Dock do MyToolBarTrayControl como Top Laborat rio Pr tico de WPF 19 4 OutlookUI HOL sln Microsoft Expression Blend Ern Cx File Edit View Object Project Tools Window Help Interaction 7 Windowlxaml Project E Properties E Resources E b Triggers No Name Name i 5 Event Type MyToolBarTrayControl 1AVX uBiseg File Edit View Go Tools Actions Help 3dNew iu 3 7X bg Reply 38i Reply to All
77. lor resources 255 255 255 100 t FFFFFFFF Initial color E Options Figura 37 O gradient brush editor com seus valores padr o Laboratorio Pratico de WPF 45 Como pode ver o gradient brush padr o tem cores de mudan a gradual do preto para o branco H dois pontos gradientes amp um completamente no lado esquerdo e outro no lado direito Voc pode inserir pontos adicionais clicando em qualquer lugar da faixa do gradient editor Voc tamb m pode excluir pontos gradientes clicando e arrastando os para fora do gradient editor Nosso gradient brush personalizado deve ser semelhante a este Y Brushes BorderBrush OpacityMask No brush Pa E Ea Editor Color resources c Options MM Figura 38 O gradient brush MyBlueBackgroundGradientBrush Para criar nosso proprio gradient brush fa a o seguinte 2 3 4 5 Clique no primeiro ponto gradiente na posic o A como mostrado na figura 38 Insira os seguintes valores R 227 G 239 B 255 A 100 ou o valor Hexadecimal FFE3EFFF Clique na faixa do gradient editor para adicionar um terceiro ponto gradiente e arraste o na posic o B como mostrado na figura 38 Insira os seguintes valores R 199 G 223 B 255 A 100 ou o valor Hexadecimal FFC7DFFF Clique no terceiro ponto gradiente na posic o C como mostrado na figura 38 e insira os seguintes valores R 174 G 209 B 255 A 100 ou o valor Hexadecimal FFAEDIF
78. ltimo da heran a do DockPanel dp1 Com dpl LastChildFill defina para True myMainGridToggleButton posicionado em primeiro e o TextBlock preenche a rea restante Window Cut Copy v im DockPanel MyToolBarTrayControl Delete MyStatusBarControl v E Border Group Into Rename LET Grid myMainGridFirstColumnSplitter Order Bring to Front GridSplitter Align Bring Forward GridSplitter Auto Size Send Backward 5 StackPanel Bind Content to Data Send to Back gt B myFolderExpandersBorder Edit Text Y Mi Border Edit Control Parts Template v im DockPanel Edit Other Templates I TextBlock Mail myMainGridToggleButton wy o View XAML Figura 51 Definindo a ordem do myMainGridToggleButton Laboratorio Pratico de WPF 57 Tarefa 9 Adicionar um MyInboxExpanderControl a Segunda Coluna do Grid A segunda coluna do nosso recipiente de layout Grid tem um controle Expander e um controle ListView que mostra todos os itens do Inbox 1 Com Grid ativado adicione um controle DockPanel no Grid e nomeie o como dp2 Como n s alinhamos dois controles verticalmente em uma dire o um StackPanel como controle pai seria mais adequado No entanto a pr tica revela que um StackPanel nao trata bem um controle ScrollViewer contido nele o scrollbar n o exibido mesmo quando o conte do de um controle ScrollViewer excede o intervalo do controle StackPanel Um DockPanel preferivelmente n o so
79. method hideNavigationPane if myNavigationPaneControl Visibility Visibility Hidden hideNavigationPane j j private void LayoutRoot PreviewMouseLeftButtonUp object sender System Windows Input MouseButtonEventArgs e if the user clicks somewhere on LayoutRoot except on myNavigationPaneButton and except on myNavigationPaneControl and myNavigationPaneControl is visible then myNavigationPaneControl is to be hidden if e OriginalSource myNavigationPaneButton amp amp e Source myNavigationPaneControl if myNavigationPaneControl Visibility Visibility Visible hideNavigationPane j j j private void hideNavigationPane myNavigationPaneButton SetV alue Button BackgroundProperty Brush MyApp Current Resources My BrightBlueSolidBrush2 myNavigationPaneControl Visibility 2 Visibility Hidden LayoutRoot PreviewMouseLeftButtonUp mbEventHandler myNavigationPaneControl Is VisibleChanged visibilityEventHandler j Laborat rio Pr tico de WPF 76 Personalizando o Controle ListView avancado No curso b sico n s adicionamos itens de lista para o controle ListView sem considerar o estilo do ListView O estilo padrao de um controle ListView semelhante ao seguinte From Sascha Corti To Subject Stefano Malle Ken Casada Ronnie Saurenmann Frank Koch Olaf Feldkamp Ronnie Saurenmann Ronnie Saurenmann Ronnie Saurenmann Ruihua Jin
80. n 2 Column 0 ColumnSpan 3 e Margin left 27 right 0 top 32 bottom O 2 Escreva um manipulador de eventos para o evento myNavigationPaneButton Click e adicione uma l gica de programa o adicional no Window1 xaml cs FER sidebar txt private MouseButtonEventHandler mbEventHandler null private DependencyPropertyChangedEventHandler visibilityEventHandler null private void myNavigationPaneButton_Click object sender RoutedEventArgs e if mbEventHandler null mbEventHandler new MouseButtonEventHandler LayoutRoot PreviewMouseLeftButtonUp j if visibilityEventHandler null visibilityEventHandler new DependencyPropertyChangedEventHandler my NavigationPaneControl IsVisibleChanged Laborat rio Pr tico de WPF 15 j if myNavigationPaneControl Visibility Visibility Hidden myNavigationPaneButton SetV alue Button BackgroundProperty Brush MyApp Current Resources MyOrangeSolidBrush myNavigationPaneControl Visibility Visibility Visible LayoutRoot PreviewMouseLeftButtonUp mbEventHandler myNavigationPaneControl Is VisibleChanged visibilityEventHandler else hideNavigationPane j private void myNavigationPaneControl IsVisibleChanged object sender DependencyPropertyChangedEventArgs e if myNavigationPaneControl becomes hidden then the look of the application UI is to be reset and the two event handlers are to be deregistered which is done in the
81. n markup WPF resulting in a satisfying experience for your users Ken Casada Ruihua Jin Windows Presentation Foundation Intro d j it t Ronnie Saurenmann Ruihua Jin WPF Rocks a Sascha P Corti Frank Koch Ruihua Jin user experience Systems Engineer Li Olaf Feldkamp Ruihua Jin Sample code Developer amp Platform Evangelism 5634 Items All folders are up to date 3 Connected to Microsoft Exchange v Figura 34 OutlookUI com uma barra lateral e um painel de navega o expandido Esta parte do trabalho mais desafiante e excitante do que todos os que n s temos feito at agora vamos l 1 Adicione um controle DockPanel no Grid e nomeie o como dpl 2 Agrupe o DockPanel dpl em um Border Em Objects and Timeline clique com o bot o direito do mouse em dp1 para abrir o menu contextual selecione Group Into gt Border Laborat rio Pr tico de WPF 43 3 Crie um solid brush personalizado para o BorderBrush do Border ok 4 OutlookUI HOLsln Microsoft Expression Blend le x Solid Brush Um solid brush um brush pincel l gico que cont m 64 pixels da mesma cor Ap s criar o solid brush o aplicativo pode selecion lo em seu contexto de dispositivo e us lo para desenhar formas preenchidas Com Border selecionado clique em BorderBrush na categoria Brushes clique entao para abrir o editor do solid brush digite os seguintes valores para vermelho verde azul e alfa para a cor que desejamos R 43
82. natura do m todo adicionada automaticamente no Windowl1 xaml cs se n o escolha seu editor favorito para editar o event handler No arquivo Windowl xaml cs a classe Window1 definida no namespace OutlookUI HOL Adicione o c digo a seguir negrito para o m todo myMainGridToggleButton Checked na classe Windowl1 basicS txt private GridLength gridLength private void myMainGridToggleButton Checked object sender RoutedEventArgs e store the current width of the first grid column if myMainGridFirstColumn Actual Width gt myMainGridFirstColumn Min Width gridLength myMainGridFirstColumn Width set the first grid column width to its minimum width myMainGridFirstColumn Width new GridLength myMainGridFirstColumn Min Width hide the two expanders for Favorites Folders and Mail Folders myFoldersExpandersControl Visibility Visibility Hidden display mySidebarControl mySidebarControl Visibility Visibility Visible Laboratorio Pratico de WPF 56 2 Escrever um event handler para o evento myMainGridToggleButton Unchecked A basicS txt private void myMainGridToggleButton Unchecked object sender RoutedEventArgs e if my MainGridFirstColumnSplitter IsDragging my MainGridFirstColumn Width gridLength restore the first column width myFoldersExpandersControl Visibility Visibility Visible mySidebarControl Visibility Visibility Hidden j 3 Al m do myMainGridToggleButton
83. ns Help New v LAS x ga Reply T Reply to All 1WNvx ubiseg Click 3 Pressione o mouse sobre a caixa de texto ao lado de Checked e d um duplo clique E ContextMenuClosing Favorites Folders L J Inbox 161 L Unread Mail L 1 Sent Items ContextMenuOpening DataContextChanged DragEnter Mail Folders A BA E D L F Mailbox Ronnie Saurenn ragLeave Y Objects and Timeline Default Window a Deleted Items _ Drafts 23 4 Inbox 161 _j avalon 567 DragOver Drop FocusableChanged U Outbox _ Unwanted mail 34 GiveFeedback ickPanel GotFocus L RSS Feeds MyToolBarTrayControl MyStatusBarControl e Mail 3order Grid E 3 Calendar myMainGridFirstColumnSplitter 100 Te Ee x KEEN Results Initialized GridSplitter S StackPanel GotKeyboardFocus GotMouseCapture GotStylusCapture Indeterminate IsEnabledChanged e myFoldersExpandersControl IsHitTestVisibleChanged Border im DockPanel L TextBlock Mail IsKeyboardFocusedCha IsKeyboardFocusWithi IsMouseCapturedChan IsMouseCaptureWithin ri IsMouseDirectlyOvercC Figura 50 Adicionando um event handler ao evento myMainGridToggleButton Checked Ap s a etapa 3 descrita na figura 50 o Expression Blend nomeia automaticamente o event handler como myMainGridToggleButton_Checked Se voc tem o Visual Studio instalado o Visual Studio ser inicializado e a assi
84. o All Forward na Y n Si Send Receive v e ul 5634 Items All folders are up to date 3 Connected to Microsoft Exchange v Figura 21 A interface com o usu rio do aplicativo ap s a tarefa 5 Laboratorio Pratico de WPF 30 Tarefa 6 Adicionar um StackPanel e seus controles de heranca c lula inferior esquerda do Grid Nesta tarefa voc aprender a adicionar um controle StackPanel e seus controles de heran a c lula inferior esquerda do Grid veja figura 22 3 Calendar 82 Contacts A Tasks Notes i Folder List Figura 22 O StackPanel com seus controles de heranca A estrutura do elemento acima semelhante ao seguinte veja figura 23 Um controle StackPanel vertical situa se no n vel superior ele cont m 6 bot es Cada bot o cont m novamente um controle StackPanel horizontal que usado para alinhar os controles Image e TextBlock E StackPanel v Button v G StackPanel Image T TextBlock Mail Figura 23 Estrutura de controle hier rquica do StackPanel e de seus controles de heran a 1 Adicione um controle StackPanel no Grid e configure suas propriedades da seguinte maneira a 24 Width Auto Height Auto Row 1 RowSpan 1 Column 0 ColumnSpan 1 Orientation Vertical HorizontalAlignment Stretch VerticalAlignment Top Margin 0 0 0 0 Laborat rio Pr tico de WPF 31 4 OutlookUI HOL sln Microsoft Expre
85. o detalhado Para ler o guia do usu rio abra o menu Help e escolha ent o User Guide O web site do Microsoft Expression Blend http www microsoft com Expression products overview aspx key blend Para mais treinamentos do Expression Blend v para http www microsoft com Expression kc product aspx key blend Windows Presentation Foundation no MSDN http msdn2 microsoft com en us library ms754130 aspx
86. on Collection Editor ColumnDefinitions Items 0 ColumnDefinition s 1 ColumnDefinition 2 ColumnDefinition Add another item 40 Properties Y Appearance ToolTip Y Layout Width 0 2 c MaxWidth unendlich MinWidth 27 3 Edite a Y Miscellaneous AllowDrop CommandBindings Collection ContextMenu Cursor DataContext Focusable FocusVisualStyle ForceCursor InputScope IsEnabled V language en us Name myMainGridFirstColumn Cancel Figura 32 Definindo as propriedades MinWidth e Name da primeira coluna do Grid Crie e execute o aplicativo F5 certifique se que o aplicativo se comportar como esperado Convenca se que deve continuar com nosso projeto Laborat rio Pr tico de WPF 4 Tarefa 7 Adicionar o MyFoldersExpandersControl ao Upper Left Cell do Grid Os dois expansores para Favorites Folders e Mail Folders est o dispon veis como Custom Control chamado MyFoldersExpandersControl hora de aumentar sua confian a nos aplicativos WPF Tente seu melhor para adicionar um MyFoldersExpandersControl no Grid e configurar suas propriedades da seguinte maneira e Name myFoldersExpandersControl e BorderBrush MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 Width Auto Height Auto Row 0 RowSpan 1 Column 0 ColumnSpan HorizontalAlignment Stretch VerticalAlignment Stretch Margin left 0 right 0 top 32 bottom 7 Laborat rio Pr t
87. on Height 0 599 gt 27 lt RowDefinition Height 0 401 gt 28 lt Grid RowDefinitions gt 29 lt GridSplitter HorizontalAlignment Left Jx Name myMainGridFirstColumnSplitter Width 5 Background 30 lt GridSplitter Width 5 Background DynamicResource MyBorderBlueGradientBrush Grid Column 1 Gri al lt GridSplitter HorizontalAlignment Stretch VerticalAlignment Bottom Height 7 Background Dynam 32 Grid 34 lt Border gt 34 lt DockPanel gt 35 lt Grid gt Codigo XAML para Grid 36 lt Window gt Figura 20 Adicionando dois elementos GridSplitter no Grid Gerando XAML no modo Design ou no modo XAML No modo Design voc pode criar seu aplicativo visualmente e deixar o Expression Blend gerar o XAML para voc Editar o XAML diretamente pode resultar em erros de an lise gramatical em seu aplicativo que voc precisar corrigir antes que o Expression Blend possa corretamente exibir seus documentos sobre o artboard no modo Design ou antes de criar e executar o aplicativo Com esse cuidado em mente trabalhar entre os modos de exibi o Design e XAML pode ser um m todo eficaz para aprender os fundamentos do XAML No modo XAML voc pode digitar novos elementos no c digo ou voc pode selecionar o c digo existente e entao recortar ou copiar a partir dele ou col lo exatamente como faria em um programa de processamento de palavras Voc tamb m pode ir para linhas espec ficas no XAML ou localizar e substitu
88. ow1 no Windowl1 xaml cs para a funcionalidade de classifica o do myListView m Er E listview4 txt private Grid ViewColumnHeader lastHeaderClicked null private ListSortDirection lastDirection ListSortDirection Ascending private void myGridViewColumnHeader Click object sender RoutedEventArgs e GridViewColumnHeader headerClicked e OriginalSource as GridViewColumnHeader ListSortDirection direction if headerClicked null if headerClicked Role GridViewColumnHeaderRole Padding determine the sort order if headerClicked lastHeaderClicked direction ListSortDirection Ascending else Laborat rio Pr tico de WPF if lastDirection ListSortDirection Ascending direction ListSortDirection Descending else direction ListSortDirection Ascending j j sort the list if headerClicked Column Header is string string header headerClicked Column Header as string Sort header direction else if headerClicked Column Header is Image Image header headerClicked Column Header as Image string type header Source ToString if type Contains attachment Sort Attachment direction else if type Contains mailType Sort Read direction else if type Contains importance Sort Importance direction else return j else return j Add arrow to the column header if it is a string if headerClicked Column Header is string if dir
89. parameter System Globalization CultureInfo culture string file System IO Path GetFullPath WresourcesN string value return file public object ConvertBack object value Type targetType object parameter System Globalization CultureInfo culture return null 2 Compile o projeto F5 para fazer com que a classe acima seja compilada 3 Adicione o seguinte texto em vermelho para o Window Resources no Window1 xaml para registrar o conversor acima como um recurso Laborat rio Pr tico de WPF 66 2 Window xmlns local clr namespace OutlookUI_HOL gt lt Window Resources gt XmlDataProvider x Key inboxDS d IsDataSource True Source inbox xml gt lt local MyFrameSourceConverter x Key MyFrameSourceConverter gt lt Window Resources gt basic11 txt 4 Com Frame selecionado clique no quadrado pequeno ao lado da propriedade Source para abrir o menu contextual selecione Custom Expression para abrir a caixa de di logo digite 2 basic11 txt Binding XPath File Converter StaticResource MyFrameSourceConverter na caixa de texto e pressione Return Crie e execute o aplicativo F5 Selecione os itens da lista um ap s o outro certifique se que o MyMailHeaderGridControl e o controle Frame atualizem seus conte dos conforme o esperado A seguir t m um resumo do que n s fizemos nas tarefas 10 e 11 a fim de conseguir o Master Details View 1 Adicionar um XML data sour
90. r ligada defina a propriedade Background do controle border para MyBrightOrangeSolidBrush e pare a a do disparador em 8 Em Objects and Timeline clique MySidebarButtonStyle para sair do editor de template de controle para 9 Aplique o MySidebarButtonStyle no myNavigationPaneButton a 69 Com myNavigationPaneButton selecionado defina a propriedade Style da categoria Miscellaneous como MySidebarButtonStyle Laborat rio Pr tico de WPF 74 Y Miscellaneous AllowDrop ClickMode Release Clip Command CommandParamet a Reset C Custom Expression Convert to Local Value MyBottomLeftButtonStyle v MySidebarButtonStyle SimpleButton ll Edit Resource m Convert to New Resource EB Data Binding Template Figura 69 Definindo a propriedade Style do myNavigationPaneButton para MySidebarButtonStyle Crie e execute o aplicativo F5 Mova o mouse sobre os bot es e clique nos bot es certifique se de que os bot es t m cores de plano de fundo diferente em estados diferentes 10 Na categoria Appearance defina a propriedade Visibility do mySidebar Control como Hidden Tarefa 3 Escrever Manipuladores de Eventos para Mostrar Ocultar o Painel de Navega o 1 Adicione o controle personalizado MyNavigationPaneControl no Grid configure suas propriedades da seguinte maneira e Name myNavigationPaneControl e Visibility Hidden e Width Auto Height Auto e Row 0 RowSpa
91. ra inserir o Solid color brush editor Escolha uma cor arbitr ria e defina A 0 Um valor alfa de zero representa total transpar ncia Voc pode querer saber por que n s executamos esta etapa para conseguir um efeito de nenhum efeito Como voc ver depois que adicionar os dois controles Paths no Grid se o controle Grid n o tiver uma cor Background o usu rio deve clicar exatamente no Path para marcar ou desmarcar o ToggleButton o que inconveniente Uma cor transparente como cor background do Grid resolve esse problema e Width 26 Height Auto 4 Com Grid ativado desenhe um path no Grid no artboard LY 45 EN OutlookUI HOL sln Microsoft Expression Blend Sta DX File Edit View Object Project Tools Window Help N Interaction Z MyStylesxaml Windowlxaml Project KZ Properties amp Resources E Name lt No Name gt C Type Path Y Triggers Event Property IsKeyboardFocused True IsChecked True IWvx Uubiseg Search Y Brushes Fill No brush stroke EN OpacityMask No brush Pa m E EN MyBrightBluesolidBrushz MyBrightOrangeSolidBrush MyButtonBlueGradientBrush MyButtonPressedOrangeGradientBr BN MyDarkBluesolidBrush Default Jiu i i MyDarkOrangeSolidBrush MyDoubleArrowToggleButtonStyle Toggle Cli MyDropDowngrayGradientBrush om EN MyDropDownGraySolidBrush1 v Template EN MyDropDownGraySolidBrush2 Lacie 1 Duplo Clique EN MyHGridsplitterBlueGradientBrus
92. rance Opacity Visibility Data StrokeThickness Y Layout Width Height Row O Column O HorizontalAlignme VerticalAlignment Margin E E E 10096 Visible v M11 25 11 333333L7 16 1 RowSpan 1 ColumnSp 1 moi dh quim 11 75 gt 10 t 10 833 14 333 MinWidth 0 o padr o de property trigger altere Min Width 0 para IsChecked True conforme descrito na figura 47 Assim que o property trigger ischecked Tive for adicionado lista de disparadores E rt exibido na tela que significa que todas as altera es feitas a partir de agora em diante s o registradas no property trigger eles ter o efeito quando a propriedade relacionada obt m o valor especificado No nosso caso quando ToggleButton IsChecked True a seta dupla aponta para a dire o oposta As altera es de propriedades para ambos os controles Path s o e Na subcategoria Render Transform Angle 180 Consulte a figura 48 para configurar as propriedades de ambos os controles Path Laboratorio Pratico de WPF 53 File Edit View Object Project Tools Window Help LS Interaction E MyStylesxaml WindowLxami X Project E Properties amp Resources E ps Y Triggers Trigger recording Is on Name pathi mir d 14 k Event Property Trigger Type Path Default 4 IsChecked True IsKeyboardFocused Search Wvx ubiseq amp IsEnabled False Y Common Properties Cursor operties when active DataConte
93. rces Interaction Mame LayoutRoot F Triggers Type Grid Event 3 Desenhe um E X DockPanel enquanto mant m pressionado o botao esquerdo do mouse Y Appearance Opacity 100 visibility Wisible T Layout Width Auto Height Auto Objects and Timeline HorizontalAlignme VerlicalAlignment H Detaull Margin O Fil O Y Common Properties Cursor Data Content IsEnabled ToolTip Laboratorio Pratico de WPF 15 4 OutlookU HOLsIn Microsoft Expression Blend Ln Hle Edt View Object Project Tools Window Help Interaction E Windowlxaml Project amp Properties ef Resources E Triggers Name lt No Name gt le F Event Type DockPanel i Search mies ubma Y Brushes Background a OpacityMask No brush m Y Appearance O controle Opacity 100 DockPanel rec m Visibility Visible Y Objects and Timeline adicionado Default Y Layout Window Width TOO ri Height 100 WELL 1 Duplo Clique Row 0 RewS5pan 1 7 E LayoutRoot gr Column O ColumnSp 1 HornzontalAlignme E Jik 8 5 Duplo Clique Result VerticalAlianment fg lt tb Hi Lact UT ull DockPanel um elemento filho do LayoutRoot Margin O tu Zindex O Y Common Properties Cursor i F T x1 4 Configure as propriedades de layout do DockPanel 4 10 A classe FrameworkElement exp e v rias propriedades que s o usadas para posicionar precisamente
94. rd Se voc v Ml em vez de e prov vel que voc tenha clicado em inconscientemente apenas clique em o para ter seus controles de volta no artboard Laborat rio Pr tico de WPF 10 Similarmente o icone E diz nos se os controles relacionados e seus elementos de heranga sao edit veis E representa bloqueado e o representa edit vel que o padrao Lembre se sempre de verificar o cadeado de um controle quando est querendo saber por que voc n o pode selecionar ou editar controle O artboard placa de arte O artboard oferece dois modos de exibi o o modo Design e o modo XAML O modo Design mostra a apar ncia do seu aplicativo O modo XAML mostra todo o documento XAML Clique na guia Design e na guia XAML para alternar entre esses dois modos de exibi o Expression Blend XAML Windows Presentation Foundation e NET Framework 3 0 Microsoft Expression Blend uma novidade com ferramentas completas para profissionais de design fazerem cria es atraentes sofisticadas e interface com o usu rio com conex o Web para aplicativos baseados no Windows Extensible Application Markup Language ou XAML em ingl s a pronuncia zammel uma linguagem de marca o com base em XML desenvolvida pela Microsoft XAML a linguagem por tr s da apresentacao visual de um aplicativo que voc desenvolve no Microsoft Expression Blend assim como HTML a linguagem por tr s da apresenta o visual de uma p
95. rdFocused True IsEnabled False Properties when active target element MinWidth v 0 v 4 Actions when activ IsFocused 4 Actions when deac lt HitTestVisible IsKeyboardFocused IsMouseOver ies Ds clique IsStylusDirectlyOver IsTabStop TabIndex Tag ToolTip Appearance Figura 67 Adicionando o disparador de propriedade IsPressed True Logo que um disparador de propriedade adicionado sua grava o ativada que registra todas as altera es de propriedades caso o disparador de propriedade esteja ativado Defina a propriedade Background do controle border para MyDarkOrangeSolidBrush e pare a grava o do disparador veja figura 68 Laborat rio Pr tico de WPF 73 ButtonNormalBackground File Edit View Object Project Tools Window Help BINE BI i Drei CA i CA CA N Interaction pe ae EER RE S roject E4 Properties E4 Resources lt Y Triggers DisabledBackgroundBrush Name border B y Event Property Trigger Type Border Default DisabledBorderBrush DisabledForegroundBrush pearch x disPesed True Ecc M GlyphBrush Y Brushes IsMouseOver True ang Occo alse oboe HorizontalScrollBarBackground 2 Clique LightBorderBrush Background 4 Properties when active 9 LightBrush EL border Background my PRAE g l Activated when LightColorBrush PER ti a target element v IsPressed v True v ListBorder C Convert to Local Value E 3 e E Y Objects and Timeline a ee J
96. ridViewColumn Header From DisplayMemberBinding Binding XPath From gt GridViewColumn Header To DisplayMemberBinding Binding XPath To gt GridViewColumn Header Subject DisplayMemberBinding Binding XPath Subject gt lt GridView gt lt List View View gt lt ListView gt basic10 txt Crie e execute o projeto F5 certifique se de que a lista exiba as propriedades From To e Subject de cada mail Laborat rio Pr tico de WPF 64 Tarefa 11 Adicionar controles terceira coluna do Grid no conte do Display Mail A terceira coluna de Grid usada para exibir os detalhes do mail atualmente selecionado l 3 Com Grid ativado adicione um controle DockPanel no Grid e nomeie o como dp3 Agrupe o DockPanel dp3 em um Border Configure as propriedades do Border da seguinte maneira e BorderBrush MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 e Width Auto Height Auto e Row 0 RowSpan 2 Column 2 ColumnSpan 1 e Horizontal Alignment Stretch VerticalAlignment Stretch Margin 0 0 0 0 Configure as propriedades do dp3 da seguinte maneira Width Auto Height Auto Horizontal Alignment Stretch Vertical Alignment Stretch LastChildFill True Margin 0 0 0 0 Com dp3 ativado adicione um controle personalizado MyMailHeaderGridControl no dp3 e configure suas propriedades da seguinte maneira e Dock Top e Horizontal Alignment Stretch
97. s 0 Figura 35 Editando um solid brush personalizado chamado MyBlueBorderSolidBrush Em seguida queremos converter esse brush em um recurso chamado MyBlueBorderSolidBrush essa etapa nos permite reutilizar o brush para propriedades como Background BorderBrush Foreground de outros Aneh iG T P controles Para alcan ar esse objetivo clique em BEES e uma caixa de di logo exibida como mostrado na figura 36 Digite MyBlueBorderSolidBrush na caixa de texto em Resource name e escolha MyStyles xaml como o resource dictionary Clique em OK Laboratorio Pratico de WPF 4 Crie um linear 44 Create Brush Resource Resource name Key MyBlueBorderSolidBrush Define in Application This document V Window 2 Selecione Resource dictionary v New Cancel Figura 36 Convertendo o brush MyBlueBorderSolidBrush em um recurso gradient brush personalizado para a propriedade Background do Border a 37 38 39 40 41 Linear Gradient Brush Diferentemente de um solid brush um linear gradient brush usa mais de uma cor Voc define cores diferentes em posi es diferentes e entre duas cores vizinhas ambas as cores se mesclam para criar uma transi o ou efeito de desvanecimento 1 Com Border selecionado clique em Background da categoria Brushes e clique em LJ para abrir o gradient brush editor como mostra a figura 37 Y Brushes BorderBrush OpacityMask No brush Ea E E Editor Co
98. s indows Presentation Foundation Intro Mail Folders amp WPF Rocks 26 Mailbox Ronnie Saurenmanr ser experience Hi Ruihua te Deleted Items ee 2 Drafts 23 These are the latest articles on WPF up on MSDN L3 Inbox 161 ews 3 avalon 567 here to start 2 2 zu rerum e FE l Digital Media Add Video to Controls and 3D Surfaces Expression with WPF gj Unwanted mail 34 EM fj RSS Feeds Blend Learn about Windows Presentation Foundation media Microsoft at Home WPF Articles on MSDN integration so you can add media files and dazzling visuals 1 3 Sent Items good book on markup WPF to your own apps C L Search Folders a ji For Follow Up Nindows Presentation Foundation Intro 5 PF Rocks Interacting with 2D on 3D in WPF ES oo E l Interacting with 2D placed on 3D is now possible in v1 of ps Sawer SUS ser experience 3 the Windows Presentation Foundation Olaf Feldkamp Ruihua Jin Sample code Ronnie Saurenmann Ruihua Jin News E P a App Fundamentals Build A Great User Experience Ronnie Saurenmann Ruihua Jin Where to start With Windows Presentation Foundation 53 Ronnie Saurenmann RuihuaJin Expression The Windows Presentation Foundation application model Ronnie Saurenmann Ruihua Jin Blend distinguishes between standalone and browser applications 85 Sascha Corti Ruihua Jin WPF Articles on MSDN and between menu driven and hyperlink driven navigation j Stefano Malle Ruihua Jin A good book o
99. s le u MyHGridSplitterBlueGradientBrush Ea MyInboxExpanderExpandSiteBackground MyMouseDownOrangeGradientBrush Y Appearance Opacity 100 Visibility Visible BorderThickness 0 t 0 CornerRadius Figura 78 Editando o disparador de propriedade IsPressed True 8 Em Objects and Timeline clique em S espaco acima para sair do Template Editor para o MyGrid ViewColumnHeaderControlTemplate Crie e execute o aplicativo F5 verifique se os cabe alhos de coluna From To e Subject t m a mesma apar ncia que o MS Outlook 2007 Laboratorio Pratico de WPF 83 Tarefa 2 Editar o ItemContainerStyle do ListView Nesta tarefa vamos configurar o ItemContainerStyle do ListView para personalizar a apar ncia de um item selecionado da lista e de itens desmarcados da lista Al m disso como no MS Outlook faremos com que os emails nao lidos sejam exibidos em negrito l Entre no Style Editor no ItemContainerStyle do ListView Com ListView selecionado abra o menu Object selecione Edit Other Styles Edit ItemContainerStyle gt Create Empty Na caixa de di logo nomeie o estilo MyListViewItemContainerStyle e escolha MyStyles xaml como resource dictionary Configure as propriedades da seguinte maneira e HorizontalContentAlignment Stretch e Padding left 0 right 0 top 1 5 bottom 1 5 e FontSize 11 3 Edite o modelo de controle do MyList ViewItemContainerStyle 1 Entre no editor de modelo de
100. sar os elementos e exibir os documentos no artboard no modo Design Em ambos os casos se o analisador encontrar erros o artboard desativado e o Expression Blend exibe uma mensagem de erro com um link para abrir o modo de exibi o XAML para que voc possa resolver os erros As an lises de erros tamb m s o relatadas na guia Errors erros no painel Results Os pain is Project Properties Resources pain is de Projeto Propriedades Recursos e O painel Project painel do projeto e A se o Files arquivos Voc obt m uma lista de todos os arquivos envolvidos no projeto atual em Files no painel Project Esse o local onde voc abre arquivos adiciona arquivos conjunto de m dulos assemblies ou outros recursos relacionados como Imagens etc ao seu projeto Alterne para o painel Project e d uma olhada na estrutura de arquivos do nosso projeto e A se o Data de dados Em Data no painel Project voc pode adicionar fontes de dados de objeto XML ou CLR ao projeto Voc aprender adicionar fonte de dados XML e controles de dados vinculados a ela neste laborat rio e O painel Properties painel de propriedades O painel Properties mostra todas as propriedades e eventos de um controle selecionado Laboratorio Pratico de WPF 11 Selec o de controle para configurar as propriedades Para selecionar um controle clique no controle uma vez em Objects and Timeline depois disso o nome do elemento real ado em cinza
101. ssion Blend File Edit View Object Project Tools Window Help Interaction 7 Windowlxaml Project m Properties E Resources E Y Triggers lt No Name gt 9g Name m v i R Event Type StackPanel 1Avx Mbesa Search Y Appearance Opacity 100 4 Configure as propriedades do Layout Width Auto Y Layout Height Auto Row 1 RowSpan 1 Y Objects and Timeline Column 0 ColumnSp 1 Default Orientation Vertical Window l HorizontalAlignme Y Window VerticalAlignment a ji Margin 0 t O controle H StackPanel Zindex O v E Border Y Common Properties UBL Grid Cursor DataContext IsEnabled E StackPanel Do ToolTip gt Transform Miscellaneous 2 Adicione um controle Button no StackPanel e configure suas propriedades da seguinte maneira a 25 e Background MySelectedButtonOrangeGradientBrush e BorderBrush MyBlueSolidBrush2 e BorderThickness left 0 right 0 top 0 2 bottom 0 2 Width Auto Height 35 HorizontalAlignment Stretch VerticalAlignment Stretch Margin 0 0 0 0 HorizontalContentAlignment Left VerticalContentAlignment Center Para ver essas duas propriedades voc precisar expandir a categoria Layout clicando na seta v sob a propriedade ZIndex A propriedade Control HorizontalContentAlignment obt m ou define o alinhamento horizontal do conte do de um controle semelhante a FrameworkElement HorizontalAlignment ele tem
102. ta Context Fields v inbox mail Array Attachment String Categories String File String Flag String From String Received String Size String Subject String To String Show Matching Types Only Use a custom XPath expression Define DataTemplate Cancel Figura 56 Vinculando dados List View I temsSource do contexto de dados especificado 5 Crie colunas da lista para mostrar propriedades do mail como remetente receptor e assunto 7 Por padrao o ListView View um GridView que permite criar colunas e mostrar valores de uma determinada propriedade na coluna relacionada Execute as seguintes etapas para criar tr s colunas From To e Subject 1 Na categoria Miscellaneous expanda o editor de propriedades View Grid View e clique no bot o para abrir a caixa de di logo GridViewColumn Collection Editor EY 57 View GridView M Clique M ColumnHeaderCo ColumnHead ColumnHeaderTe ColumnHeaderTe ColumnHeaderToo 2 Clique Columns Collection Figura 57 Abrindo o Grid ViewColumn Collection Editor Laborat rio Pr tico de WPF 62 2 Por padr o j existe uma coluna chamada Grid ViewColumn no GridView Defina o valor da propriedade de Header para From 3 Adicione uma segunda coluna com Header To a 58 GridViewColumn Collection Editor Columns Items Properties 0 GridViewColumn Layout HLGridviewColumn Width Auto Y Miscellaneous
103. tar o estilo dos cabe alhos de colunas 2 0 0 ccceecccccccccsssessseececcecccaeeeneeeceeeeeeesaeeseeeeceseeseaeaenses Fi Tarefa 2 Editar o ItemContainerStyle do List View ccccccccccssssesseececeeceeeeeeseeeceeceeeeaaeeeseeeeeeeeeeeeeeesees 83 Tarefa 3 Adicionar Colunas de Imagem no Importance Read Attachment do ListView 85 Tareta A Classi a Sta cossigras se ncsiirasssaencanoatarncosnececen sdguiinneseasacunpatatincestitoces EREE ESE R EE nE E rer 88 Mais em Expression Blend e Windows Presentation Foundation eese 90 Laborat rio Pr tico de WPF Laborat rio Pr tico de WPF Sobre este Laboratorio Pratico LP Hands On Lab Sobre 0 que voc aprendera Windows Presentation Foundation WPF fornece aos desenvolvedores um modelo de programa o unificado para construir ricas janelas Windows de experi ncias inteligentes para usuarios que incorporam UI User Interface Interface com o Usu rio m dias e documentos Neste Laborat rio Pr tico voc aprender sobre a constru o de um aplicativo de WPF usando o Microsoft Expression Blend O projeto finalizado como mostra a figura uma r plica do Microsoft Outlook 2007 UI File Edit View Go Tools Actions Help PALM e Jd X qa Reply Reply to All 3 Forward um V n Si Send Receive Y e Es Mail lt lt Favorites Folders A Inbox 161 LD Unread Mail 33 Sent Items Mail Folders A
104. tes de controle e Styles Os controls controles s o os componentes b sicos da interface com o usu rio em aplicativos manipulando a maioria das Intera es com o usu rio com o aplicativo Windows Presentation Foundation cont m um n mero de templates de controle padr o que definem a apar ncia dos controles de janelas em diferentes temas Voc pode alterar a estrutura e apar ncia de um controle editando o modelo de controle no controle Cada controle consiste em duas partes principais um template e um style Um template modelo o elemento modelo que usado para criar um controle Voc pode editar um template de controle e reorganizar adicionar ou excluir os elementos ou partes dentro do controle Um style estilo permite que voc defina como os atributos padr o s o definidos para um controle Esses incluem estados como a apar ncia ao pressionar um bot o bem como as cores padr o do bot o Styles s o essencialmente pacotes de propriedades que em muitos casos igualmente designam qual template o controle usar 9 Fa a o seguinte para definir nossa pr pria seta dupla ToggleButton 1 Entre no Control Template Editor no my MainGridToggleButton 4 42 amp 43 Em Objects and Timeline clique com o bot o direito do mouse no myMainGridToggleButton para abrir o menu contextual selecione o item do submenu Edit Control Parts Template Edit a Copy voc nao pode modificar os styles e os templates do sistema
105. tico de WPF 78 4 OutlookUI HOL sln Microsoft Expression Blend BIX File Edit View Object Project Tools Window Help 2 Clique lyStylesxaml Window1 xaml Project E Properties E Resources E lt No Name gt od E Align Type GridViewHeaderRowPresen Make Same Flip Search TAvx ubiseg eee cere wee cee RenderTransform Group Into e A s Auto Size Order tt UK EH o Combine ee J Relative Path Edit Style Y Miscellaneous Edit Other Styles 7 3 Clique Edit Control Parts Template Edit FocusVisualStyle C Edit a Copy ES Clique Edit Other Templates Create Empty Lock Apply Resource Visibility EL Grid ColumnHead v im DockPanel ColumnHeaderTe 1 Selecione E v 5 ScrollViewer A Selecione ColumnHeaderTe Mi lt 2 GridViewHeaderRowPresente o t PART ScrollContentPresenter e 100 v as Columns Collection PART HorizontalScrollBar e sss A PART VerticalScrollBar gt Results g ContextMenu ColumnHeaderToo a a iz Fl gt im DockPanel Project C Users v ruihuj EUROPE Documents OutlookW FocusVisualStyle ForceCursor S Project CAUsersW ruihuj EUROPE Documents VOutlookW InputScope Tw C Windows Microsoft NET Framework v2 0 50727 Csc e gt OverridesDefaultSt C Windows Microsoft NET Framework v2 0 50727 Csc e gt OutlookUI HOL gt C Users v ruihuj EUROPE Documents The build has successfully completed Resources
106. ts and Timeline clique com o bot o direito do mouse no ListView para abrir o menu contextual escolha Edit Control Parts Template gt Edit a Copy Na caixa de di logo nomeie o estilo MyListViewStyle e escolha MyStyles xaml como resource dictionary A estrutura de controle padr o de um controle List View semelhante ao seguinte v lt gt Template Y Bd F ScrollViewer ItemsPresenter Figura 72 A estrutura de controle padrao do controle ListView 2 Edite MyListViewScrollViewerStyle 1 Entre no Template Editor no Scroll Viewer Em Objects and Timeline clique com o bot o direito do mouse no ScrollViewer para abrir o menu contextual escolha Edit Control Parts Template gt Edit a Copy Na caixa de di logo nomeie o estilo MyListViewScrollViewerStyle e escolha MyStyles xaml como resource dictionary A estrutura de controle padr o de um controle Scroll Viewer semelhante ao seguinte Tim Grid Y im DockPanel v ES ScrollViewer GridViewHeaderRowPresenter im PART_ScrollContentPresenter PART HorizontalScrollBar 8 PART VerticalScrollBar ig DockPanel E Rectangle E Rectangle Figura 73 A estrutura de Controle do controle Scroll Viewer 2 Configure as propriedades do Grid ViewHeaderRowPresenter da seguinte maneira Layout e Margin 0 0 0 0 3 Edite MyGridViewColumnHeaderStyle 1 Entre no Style Editor no ColumnHeaderContainerStyle EN 74 Laborat rio Pr
107. um DataTrigger para que o disparador de dados seja significativo Se uma ou ambas as propriedades nao forem especificadas sera apresentada uma exce o Os Setters s o usados para especificar os valores de propriedade que tenham efeito quando o objeto de dados relacionado estiver conforme a condi o especificada Laboratorio Pratico de WPF 85 Tarefa 3 Adicionar Colunas de Imagem no Importance Read Attachment do ListView A primeira coluna do ListView deve exibir se o email for marcado como importante Para fazer isso precisamos apresentar outro importante conceito no WPF Data Templating Data Templating Data Template modelo de dados sobre a apresenta o e apar ncia dos objetos de dados e um dos muitos recursos fornecidos pelo modelo de template e estilo WPF O que voc especificar no seu DataTemplate se torna a estrutura visual do seu objeto de dados Os controles WPF t m funcionalidades internas para suportar a personaliza o da apresenta o de dados Crie um modelo de dados MyImportanceCellData Template Nosso modelo de dados para as c lulas na coluna Importance tem um controle Image chamado my Image ele usado para mostrar se o email est marcado como importante ou n o O controle Image my Image n o mostra nenhuma imagem se o elemento Importance do mail relacionado tiver o valor false e ele mostra oraphics important gif se Importance for igual a true Isso significa que o valor de my Image Source
108. xt path RenderTransform System Wind E KEnabled E nathi1 RenderTransform System Win Activated when target element v IsChecked v ToolTip Y Transform v dies RenderTransf 41 Actions when activating E O 4 4 Actions when deactivating Angle 180 S o ve Y Objects and Timeline Default fM Y Miscellaneous AllowDrop MyDoubleArrowToggleButtonStyle Toggle Se vy lt gt Template Clip v im Grid E ContextMenu FocusVisualStyle ForceCursor InputScope OverridesDefaultSt RenderTransform Resources Style Figura 48 Editando o property trigger IsSChecked True 8 Em Objects and Timeline clique em espaco acima para sair do Control Template Editor Crie e execute o aplicativo F5 certifique se que o ToggleButton funcione conforme o esperado A pr xima etapa adicionar um sidebar Execute as seguintes etapas 1 Com Grid ativado adicione um controle personalizado MySidebarControl no Grid 2 Configure as propriedades do MySidebarControl da seguinte maneira e Name mySidebarControl e BorderBrush MyDarkBlueSolidBrush e BorderThickness 0 5 0 5 0 5 0 5 e Width Auto Height 27 e HorizontalAlignment Left VerticalAlignment Stretch e Margin left 0 right 0 top 32 bottom 7 Laboratorio Pratico de WPF 54 Transfor Expanda a categoria Transform sob a subcategoria LayoutTransform a 49 e Angle 90 Transform RenderTransform m

Laboratório Prático do MSDN - Center

Contents

Download Pdf Manuals

Related Search

Related Contents

Laborat&oacute;rio Pr&aacute;tico do MSDN - Center

Contents

Download Pdf Manuals

Related Search

Related Contents

Laboratório Prático do MSDN - Center