Windows Presentation Foundation es un framework que salió al mercado de la mano de Windows Vista. Aunque su inicio no fue acompañado del mejor momento de Microsoft, su filosofía de trabajo y la capacidad infinita de personalización de su capa de presentación, ha provocado que el desarrollo de aplicaciones Windows Form pasen a un segundo plano. De hecho, las aplicaciones para Windows Phone y las novedosas Windows Store se basan fundamentalmente en el marcado XAML que utiliza WPF.
Este marcado XAML (eXtensible Application Markup Language) es la base del desarrollo de la interfaz de WPF, y aunque no deja de ser más que un documento con formato XML, es en este punto donde reside toda la potencia de WPF, porque entre otras cosas, permite el anidamiento de controles, y por ejemplo, en un botón de WinForms, sólo podías introducir una imagen o un texto, o ambos al mismo tiempo, y ya era todo un logro artístico.
Entre sus principales características cabe destacar el Binding o enlace de datos, a través de ellos, se relacionan propiedades del contexto de datos a los elementos del marcado, y los propios controles de la vista entres sí. Los Binding son la base fundamental del patrón MVVM, lo cuál veremos en próximos post.
Otra características son los estilos, los cuales permiten personalizar un objeto con todo lujo de detalles. Estas personalizaciones se pueden almacenar en diferentes ámbitos, y en función de dónde se guarde, será accesible para los controles.
Hola Mundo!
Iniciamos un nuevo proyecto de Visual Studio de WPF, y agregamos un TextBlock con el texto “Hola Mundo!”.
<Window x:Class="HolaMundo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TextBlock Text="Hola Mundo!" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Window>
Y compilamos, y obtenemos algo así:
Ahora cerramos, la ventana e introducimos un cuadro de texto, en el que vamos a introducir nuestro nombre, y la aplicación nos saludará. Para ello, agregamos un Grid de dos filas, en la primera el TextBlock del saludo, y en la segunda el cuadro de texto.
Y para conseguir que nos salude, lo “habitual” sería establecer en el code behind un evento que fuera cambiando la etiqueta con los cambios en el TextBox, pero aquí en WPF, lo que haremos será realizar un Binding del texto, estableciendo que el texto del TextBlock es igual al texto del TextBox.
<Window x:Class="HolaMundo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text, ElementName=TbHello, StringFormat= 'Hola \{0\}!'}" Grid.Row="0"/>
<TextBox x:Name="TbHello" Grid.Row="1"/>
</Grid>
</Grid>
</Window>
Y para terminar con este mini demo, creamos tres estilos a nivel de la ventana, con diferentes propiedades para modificar el TextBlock, y también agregamos una nueva fila al Grid, introduciendo un combo, el cual vamos a pre-cargar con los estilos que hagamos, con el objetivo de que al seleccionar una opción en el combo, el estilo de la etiqueta cambie, y todo ello por supuesto, sin tirar una línea de código.
<Window x:Class="HolaMundo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:holaMundo="clr-namespace:HolaMundo"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Style1" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style x:Key="Style2" TargetType="TextBlock">
<Setter Property="FontWeight" Value="UltraBlack" />
<Setter Property="FontStyle" Value="Normal" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="Orange"/>
</Style>
<Style x:Key="Style3" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="Blue"/>
</Style>
</Window.Resources>
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Text, ElementName=TbHello, StringFormat= 'Hola \{0\}!'}" Grid.Row="0" Style="{Binding SelectedValue, ElementName=CmbStyles}"/>
<TextBox x:Name="TbHello" Grid.Row="1"/>
<ComboBox x:Name="CmbStyles" Grid.Row="2" DisplayMemberPath="Key" SelectedValuePath="Value"
ItemsSource="{Binding Resources, RelativeSource={RelativeSource AncestorType=holaMundo:MainWindow}}" >
</ComboBox>
</Grid>
</Grid>
</Window>
