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!!

Un comentario sobre “WinRT: Establecer un estilo Condicional #Metro #Win8”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *