Comment Feed for Channel 9 - Binding básico para aplicações Metro Style http://files.channel9.msdn.com/thumbnail/b789d922-aaf0-4a9b-a190-32124a591ded.png Channel 9 - Binding básico para aplicações Metro Style Por Vinícius Souza Microsoft Technical Evangelist Este artigo apresenta como vincular um controle a um único item ou vincular um controle de lista a uma coleção de itens em um aplicativo estilo Metro. Apresenta também como personalizar a exibição de itens de controle, implementar uma exibição de detalhes com base em uma seleção, e converter dados para exibição. Realizando Binding para um item simplesBasicamente o Data Binding (vinculação de dados)  consiste em uma origem e um destino. O destino de um binding é tipicamente uma propriedade de um controle. Veja exemplo abaixo: <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" /> </Grid>  O exemplo acima apresenta o binding de um controle para um objeto simples, o destino do binding nesse caso é a propriedade Text de um controle do tipo TextBlock e a fonte é a variável AppName do tipo String definida no arquivo App.xaml. Funcionamento do Binding   Neste caso o tipo de binding aplicado é o OneWay, valor aplicado por padrão. O que significa que o dado é recuperado de uma origem, mas alterações não são aplicadas de volta. Realizando Binding para uma coleção de objetosUmas das tarefas mais comuns no desenvolvimento de aplicações é o de fazer o Binding para uma coleção de objetos de negócio. Em C# e Visual Basic, a classe genérica ObservableCollection<T>  é uma boa escolha de uma coleção para realizar o binding, porque ele implementa as interfaces INotifyPropertyChanged e InotifyCollectionChanged. Estas interfaces fornecem notificação de mudança para os controles que estão ligados, quando uma propriedade de um item é alterado ou a propriedade de uma coleção é alterada. O exemplo a seguir realiza o bind de uma coleção de objetos para uma controle ComboBox: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" Foreground="Black" FontSize="30" Height="50" Width="780"/> </Grid> public ObservableCollection<Recording> MyMusic = new ObservableCollection<Recording>(); public Page() { InitializeComponent(); // Add items to the collection. MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live", new DateTime(2008, 2, 5))); MyMusic.Add(new Recording("Luka Abrus", "The Road to Redmond", new DateTime(2007, 4, 3))); MyMusic.Add(new Recording("Jim Hance", "The Best of Jim Hance", new DateTime(2007, 2, 6))); // Set the data context for the combo box. ComboBox1.DataContext = MyMusic; } public class Recording { public Recording() { } public Recording(string artistName, string cdName, DateTime release) { Artist = artistName; Name = cdName; ReleaseDate = release; } public string Artist { get; set; } public string Name { get; set; } public DateTime ReleaseDate { get; set; } // Override the ToString method. public override string ToString() { return Name + " by " + Artist + ", Released: " + ReleaseDate.ToString("d"); } } Para exibir os registros de música em um controle ComboBox, a propriedade ItemsSource do controle recebe o valor de Binding e a propriedade DataContex recebe a coleção de objetos do tipo Recording, que fornece a origem para a operação de ligação (binding). Um ComboBoxItem é criado para cada item da coleção. O método ToString é automaticamento executado para cada objeto to tipo Recording para apresentar o item de um ComboBox. Exibindo itens em um controle usando um modelo de dadosVocê pode exibir os itens em uma lista usando o método ToString do item. No entanto, um cenário mais comum é utilizar uma visualização personalizada de dados vinculados utilizando um DataTemplate. Um DataTemplate permite que você personalize como os itens de uma lista são apresentados em um controle. Normalmente, você pode definir o modelo de dados utilizando a propriedade ContentTemplate de um controle de conteúdo ou a propriedade ItemTemplate de um controle de itens. O exemplo a seguir mostra a mesma lista de gravações ligados a uma caixa de combinação usando um modelo de dados. Uma caixa de combinação é um controle do tipo ItemsControl, o que significa que você estabeleça um modelo de dados para cada item, definindo sua propriedade ItemTemplate para um modelo de dados. Observe como os registros são apresentados diferentemente do exemplo anterior. No XAML, você pode ver a definição do modelo de dados. O modelo de dados contém um StackPanel com quatro controles TextBlock. O StackPanel utiliza a orientação horizontal, de modo que os quatro controlos de bloco de texto aparecem lado a lado. Dois dos controles TextBlock estão vinculados às propriedades Artist e Name de um objeto Recording. Os outros dois controles TextBlock exibem texto estático. Para cada item ligado, a ligação fornece o caminho para a propriedade sobre o objeto de gravação. No exemplo a seguir, essa ligação baseia-se no contexto de dados a ser definida para a lista de gravações.  <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" Foreground="Black" FontSize="30" Height="50" Width="450"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="2"> <TextBlock Text="Artist:" Margin="2" /> <TextBlock Text="{Binding Artist}" Margin="2" /> <TextBlock Text="CD:" Margin="10,2,0,2" /> <TextBlock Text="{Binding Name}" Margin="2" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> Conversão de dados para exibição nos controlesUtilizando um Converter (conversor), você pode formatar e apresentar outros tipos de objetos, como um TextBox. Por exemplo, você pode apresentar um rótulo e uma data formatada ao invez de apresentar apenas uma data. O trecho de código a seguir apresenta uma implementação de um Converter para a data de lançamento do álbum da lista de gravações. <UserControl x:Class="TestDataBindingQS.Page2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="using:TestDataBindingQS" mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="1366"> <UserControl.Resources> <local:StringFormatter x:Key="StringConverter"/> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <StackPanel Width="750" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center"> <ComboBox x:Name="ComboBox1" ItemsSource="{Binding}" Foreground="Black" FontSize="30" Height="50" Width="750"> <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="2"> <TextBlock Text="Artist:" Margin="2" /> <TextBlock Text="{Binding Artist}" Margin="2" /> <TextBlock Text="CD:" Margin="10,2,0,2" /> <TextBlock Text="{Binding Name}" Margin="2" /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> <!--The UI for the details view--> <StackPanel x:Name="RecordingDetails"> <TextBlock Text="{Binding Artist}" FontSize="30" FontWeight="Bold" /> <TextBlock Text="{Binding Name}" FontSize="30" FontStyle="Italic" /> <TextBlock Text="{Binding ReleaseDate, Converter={StaticResource StringConverter}, ConverterParameter=Released: \{0:d\}}" FontSize="30" /> </StackPanel> </StackPanel> </Grid> </UserControl> public class StringFormatter : IValueConverter { // This converts the value object to the string to display. // This will work with most simple types. public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { // Retrieve the format string and use it to format the value. string formatString = parameter as string; if (!string.IsNullOrEmpty(formatString)) { return string.Format(culture, formatString, value); } // If the format string is null or empty, simply // call ToString() on the value. return value.ToString(); } // No need to implement converting back on a one-way binding public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }Uma classe conversora deriva da interface IValueConverter. A interface IValueConverter possui dois métodos o Convert e ConvertBack.Para o tipo de bindig de sentido único (One-Way) da origem de dados para o controle de destino, você somente deve implementar o método Convert. O conversor neste exemplo é genérico. Você fornece uma String no parametro format, e o conversor utiliza o método String.Format para realizar a formatação. Se uma máscara de formatação não é forneceido, o conversor retorna o resultado chamando o método ToString() de um objeto. Uma vez implementado o conversor, você pode criar uma instância da classe de conversão e informar os bindings para utilizar essa instância. Neste exemplo, isto é realizado no XAML. Uma instância do conversor é criado como um recurso estático e recebe uma chave. A chave é depois utilizada quando a propriedade do conversor é atualizada no binding. ConclusãoO Binding é uma técnica muito utilizada para apresentar os dados na interface e manter os dados do modelo de dados atualizados. Na programação Metro Style utilizamos Binding a todo instante, e por isso, o conceito de Binding apresentado aqui deve ser muito bem compreendido.   en Wed, 22 May 2013 00:02:19 GMT Wed, 22 May 2013 00:02:19 GMT Rev9 Re: Binding básico para aplicações Metro Style posted by Renato Haddad

]]> http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634789087347379005 Thu, 26 Jul 2012 14:12:14 GMT http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634789087347379005 Renato Haddad Re: Binding básico para aplicações Metro Style Parabéns pelo artigo, serviu para clarear alguns pontos

posted by vitoravale

]]> http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634794393585033692 Wed, 01 Aug 2012 17:35:58 GMT http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634794393585033692 vitoravale Re: Binding básico para aplicações Metro Style posted by Elvis Rodrigues

]]> http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634813449313653222 Thu, 23 Aug 2012 18:55:31 GMT http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634813449313653222 Elvis Rodrigues Re: Binding básico para aplicações Metro Style Muito bom...

posted by terra

]]> http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634825348880400193 Thu, 06 Sep 2012 13:28:08 GMT http://channel9.msdn.com/posts/Binding-basico-para-aplicacoes-metro-style#c634825348880400193 terra