Generation App – Día 8 – Aplicar recursos de temas para Windows Phone

Recursos de temas de Windows Phone

Un tema es un conjunto de recursos utilizados para personalizar los elementos visuales en un Windows Phone. Tu puedes crear aplicaciones que preservan el “look and feel” nativo del dispositivo desde un punto estético (Por ejemplo, Colores de fondo y colores de acento). Aprende mas acerca de como trabajar con estos recursos para asegurar que la interfaz de tu aplicación se mantenga consistente con el tema que el usuario este utilizando en su Windows Phone.

Cuando un usuario habilita un tema del sistema en las configuraciones del dispositivo, solo los colores tema-relacionados de la aplicación cambian. Fuentes de tipografía y tamaños permanecen constantes. Por ejemplo, si el usuario cambia el color del tema del Windows Phone a verde, solo los elementos de interfaz de usuario configurados con la paleta de recursos del sistema de tu aplicación serán de color verde. En la lección de hoy, te mostrare como puedes lograr esto.

Aplicando recursos de tema

A continuación te mostrare como aplicar un conjunto de atributos de recursos del sistema, o aplicar todo un estilo de recursos en diversos elementos de la interfaz de usuario.

Preparando la aplicación

  1. Ejecuta Visual Studio 2010 Express para Windows Phone.

  2. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

  3. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

  4. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto tu preferencia.

  5. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1 para la versión de Windows Phone objetivo.

  6. Da clic a OK. El proyecto nuevo es creado y se despliega el archivoMainPage.xamlen el diseñador de Visual Studio.

  7. En el MainPage.xaml, reemplaza el grid nombrado LayoutRootcon lo siguiente:

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="THEME RESOURCES" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
    
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    
        </Grid>
    </Grid>

Para aplicar recursos de temas del sistema

  1. En MainPage.xaml, agrega el siguiente código dentro del grid nombradoContentPanel:

    <Rectangle 
        Height="100" 
        HorizontalAlignment="Left" 
        Margin="12,33,0,0" 
        Name="rectangle1" 
        Stroke="{StaticResource PhoneForegroundBrush}" 
        StrokeThickness="1" 
        VerticalAlignment="Top" 
        Width="200" 
        Fill="{StaticResource PhoneAccentBrush}" />

    Este código crea un rectángulo en la parte superior izquierda de la pagina. Nota el atributo Fill y como usa el valor StaticResource para especificar el recurso brush nombrado PhoneAccentBrush. Este brush particular permite que el color del rectángulo responda a los cambios realizados en el color de tema del sistema operativo.

  2. En MainPage.xaml, agrega el siguiente código dentro del grid ContentPanel, debajo del rectángulo.

    <TextBlock 
        Height="45" 
        HorizontalAlignment="Left" 
        Margin="20,154,0,0" 
        Name="textBlock1" 
        Text="background =" 
        VerticalAlignment="Top" 
        Width="400" 
        FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
        FontSize="{StaticResource PhoneFontSizeLarge}"/>

    Este código crea un control TextBlock, nombrado TextBlock1, situado debajo del rectángulo. El demarcado StaticResource es aplicado a los atributos FontFamilyFontSize. Al texto del TextBlock se le aplica atributos de estilo como  la fuentePhoneFontFamilySemiLight (Segoe WP SemiLight)  y el tamaño de la fuente grande (PhoneFontSizeLarge).

  3. En MainPage.xaml, agrega el siguiente código dentro del grid ContentPanel, debajo del rectángulo y el text block.

    <TextBlock 
        Height="35" 
        HorizontalAlignment="Left" 
        Margin="21,205,0,0" 
        Name="textBlock2" 
        Text="accent color = " 
        VerticalAlignment="Top" 
        Width="400" 
        Style="{StaticResource PhoneTextAccentStyle}"/>

    Este código crea un segundo TextBlock, nombrado TextBlock2 y aplica un recurso de estilo que afectan un grupo de propiedades como la fuente (PhoneTextAccentStyle), un tamaño de fuente (PhoneFontSizeNormal) y el color de primer plano (PhoneAccentBrush).

Autor: Jorge Ramirez
Publicación original –> http://j.mp/UGmJOb
Fuente 1 –> http://j.mp/11bJeju

Anuncios

1 comentario

Archivado bajo Windows Phone

Una respuesta a “Generation App – Día 8 – Aplicar recursos de temas para Windows Phone

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s