Search Share Home Devices Settings


[#4] WP7Tips: cambiare dinamicamente le immagini in funzione del tema

(c) Lorenzo Barbieri - 04/10/2010

Collegato al tip #3 relativo al capire se abbiamo un tema chiaro o scuro.

Le icone dell’AppBar se impostate correttamente (bianche su sfondo trasparente) si adattano automaticamente al tema visualizzato,  ma come fare per altre icone/immagini che avete sulle pagine, pivot o panorami delle vostre applicazioni?

Io uso un converter, dove App.CurrentTheme è quello definito al tip #3:

public class ThemeFileConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null )
        {
            string name = value.ToString();
            if (App.CurrentTheme == Theme.Light)
            {
                return name.Replace(".png", " - white.png");
            }
            return name;
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Come vedete, la mia convenzione è semplice, le immagini per il tema “scuro” sono “file.png”, quelle del tema chiaro sono “file – white.png”, nella stessa cartella.

Voi naturalmente potete scegliere la convenzione che volte modificando la riga in neretto.

Poi nella pagina metto, subito dopo <phone:PhoneApplicationPage>

<phoneNavigation:PhoneApplicationPage.Resources>

        <converters:ThemeFileConverter x:Key="tfCnv"/>
</phoneNavigation:PhoneApplicationPage.Resources>

A questo punto basta specificare il converter nella proprietà Source dell’immagine:

<Image Source="{Binding Converter={StaticResource tfCnv}, Source=/ns;component/Images/img.png}" />

Tags: WP7 WP7Tips

Comments disabled in this version of the blog.