WinRT: Establecer un estilo Condicional #Metro #Win8
Introducción
Estoy realizando una pequeña app para Windows8 con WinRT y Metro.
Pese a que no soy ningun experto en WPF, creo que condicionar el estilo a un elemento de Binding era algo trivial en WPF o Silverlight, en WinRT, (espero que de momento) no lo es.
Solución que hemos hablado por Twitter
En una conversación mantenida con @Antiocool y con @CorsarioVasco, hablabamos de definir 2 bloques de texto, uno para cada estilo (puesto que el condicional era para un booleano) y cada uno tuviera el estilo correspondiente. Y jugar con la visibilidad del segundo con respecto de la visibilidad del primero. Pese a que es un poco “BADSMELL”, de momento es la “única” solución rápida que he encontrado.
1) Partiendo de un Converter BooleanToVisibility
1: public class BooleanToVisibilityConverter : IValueConverter
2: {
3: public object Convert(object value, Type targetType, object parameter, string language)
4: {
5: bool val = (bool)value;
6: return (val ? Visibility.Visible : Visibility.Collapsed);
7:
8: }
9:
10: public object ConvertBack(object value, Type targetType, object parameter, string language)
11: {
12: var val = (Visibility)value;
13: return (val == Visibility.Visible);
14: }
15: }
2) Definiremos un Visibility Inverter Converter:
1: public class VisibilityInverterConverter : IValueConverter
2: {
3: public object Convert(object value, Type targetType, object parameter, string language)
4: {
5: return ((Visibility)value == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible);
6: }
7:
8: public object ConvertBack(object value, Type targetType, object parameter, string language)
9: {
10: return ((Visibility)value == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible);
11: }
12: }
3) Escribiremos el xaml necesario para utilizarlo:
3.1) Definimos los converters como recursos:
1: <UserControl.Resources>
2:
3: <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
4: <converters:BooleanToVisibilityConverter x:Name="BooleanConverter"/>
5: <converters:VisibilityInverterConverter x:Name="VisibilityConverter"/>
6: </UserControl.Resources>
7: </UserControl.Resources>
3.2) Definimos los bindings necesarios:
1: <TextBlock x:Name="tName"
2: Text="{Binding Child.Name}"
3: Visibility="{Binding Child.Gender,
4: Converter={StaticResource BooleanConverter}}"
5: Grid.Row="0" Grid.ColumnSpan="3"
6: Style="{StaticResource ChildNameStyle}" d:LayoutOverrides="Margin"/>
7: <TextBlock Text="{Binding Child.Name}"
8: Visibility="{Binding ElementName=tName,
9: Path=Visibility,Converter={StaticResource VisibilityConverter}}"
10: Grid.Row="0" Grid.ColumnSpan="3"
11: Style="{StaticResource ChildNameStyleGirl}" d:LayoutOverrides="Margin"/>
12:
Como se puede observar cada TextBlock tiene el mismo texto asignado, y cambia el estilo.
La propiedad Visivility del segundo TextBlock está asignada a la misma propiedad del primer TextBlock aplicando el converter que hemos definido previamente.
Espero que os sea de utilidad y/o si conoceis otra alternativa, por favor comentarla!.
Saludos!!