¿Cómo uso los iconos provistos con la SDK WP7 correctamente?

Question

Se han proporcionado iconos en el SDK para "Claro" u "Oscuro" según el tema configurado en el teléfono. En la barra de aplicaciones cuando el tema cambia, los iconos cambian automáticamente con él. Además, cuando presiona el botón, la imagen se invierte (por lo que todavía está visible) sin importar en qué tema esté. Puedo encontrar fácilmente la forma de cambiar el ícono basado en el tema actual. Sin embargo, lo que no se puede descifrar fácilmente es cómo cambiar el ícono cuando se presiona el botón.

Para ser más claro. Digamos que estoy usando el tema "Oscuro". Creo un botón que usa el icono oscuro. Cuando se presiona el botón, el fondo es blanco, pero el icono en sí permanece en blanco y, por lo tanto, no está visible. En la barra de aplicaciones, el ícono se volvería negro, lo que por supuesto es visible sobre el fondo blanco.

Hace esta sensación? ¿Alguien sabe cómo arreglar esto?

Answer 1

En lugar de utilizar la luz y la oscuridad iconos se puede utilizar un solo icono como un OpacityMask. Esto es solo un ejemplo, es posible que desee convertirlo en un control separado para hacer que el icono sea más nítido; puede tener el código C# para un ToggleButton si lo desea. También this series podría ser de algún interés.

<Style x:Key="IconButton" TargetType="Button"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 
     <Setter Property="Padding" Value="10,3,10,5"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
          <Grid x:Name="ContentContainer" OpacityMask="{TemplateBinding Content}" Background="{TemplateBinding Foreground}"/> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Uso

<Button Style="{StaticResource IconButton}" > 
    <ImageBrush ImageSource="appbar.feature.search.rest.png" Stretch="None"/> 
</Button> 

Explicación: Una OpacityMask utiliza el valor alfa de un cepillo para el elemento, ya que toma un pincel que podría usar un gradiente o ImageBrush. En este caso, el ContentContainer que es rectangular toma la forma de la imagen suministrada, ya que solo se usa el canal alfa, puede tener el color que desee. El ContentContainer utiliza el color de primer plano que el estilo cambia cuando se lo presiona; puede cambiar el color del icono cambiando los botones en primer plano. Este estilo es básicamente el predeterminado, pero en lugar de ContentControl se usa una cuadrícula con OpacityMask.

Normalmente no pondría ImageBrush directamente en un botón, pero esto se hace como una solución rápida para algunas de las limitaciones vinculantes en Silverlight v3. Alternativamente, puede usar un control personalizado con una propiedad Uri para un icono que actualice una propiedad de Pincel para la máscara. El estilo usaría la propiedad Brush personalizada como OpacityMask en lugar de Button.Content. Como OpacityMask solo utiliza el canal alfa, este método no es adecuado para imágenes en color.

Answer 2

En realidad - WP7 tiene algunas inteligencia alrededor de ella y hará que automáticamente las versiones "oscuras" de iconos de color claro (y también se encargan pulse el botón correctamente) siempre que se cumplan las siguientes condiciones:

• El icono es 48x48
• En el formato PNG (en realidad no han tratado con .jpg, pero i dudar de que va a trabajar)
• la ubicación del icono blanco y el fondo es transparente (podría funcionar con negro también, pero su pregunta parece sugerir lo contrario)

estoy usando un conjunto de iconos en una aplicación de WP7, y se encarga de luz/oscuridad temas de forma automática - que solía ser un AppBarIcon pack from Microsoft también, pero una rápida google es sólo darme enlaces rotos en este momento . Envíame un correo electrónico si estás desesperado y puedo pasarles el dedo.

Mientras que el enfoque sugerido con OpacityMask probablemente funciona, suena mucho más difícil que simplemente usar blanco sobre PNGs transparentes 48x48. :) ¡Déjame saber cómo vas!