2012-02-27 3 views
0

Когда я добавляю кнопку значка на панель приложений, система заботится о отображении значка в белом цвете, если темная тема используется и отображается значок в черном, если используется светлая тема. Могу ли я использовать эту автоматическую окраску в другом месте приложения? Я хотел бы взять изображение значка из каталога SDK и использовать его на обычной кнопке, и было бы здорово, если бы я мог заставить систему отображать либо белый, либо черный в зависимости от темы. На данный момент я делаю это вручную, используя конвертер, но если есть способ автоматически сделать это, это будет чище. Кто-нибудь знает дорогу?Применение бар-стиль автоматической раскраски иконок в других местах WP7?

ответ

3
<Button Background="{StaticResource PhoneContrastBackgroundBrush}" > 
    <Button.OpacityMask> 
     <ImageBrush ImageSource="/Images/icon.png"/> 
    </Button.OpacityMask> 
</Button> 

icon.png должен быть белым

[EDIT]

ИЛИ (рисовать круг вокруг них) с помощью SDK изображение (appbar.basecircle.rest.png)

<Style x:Key="FlatStyle" 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="Foreground" 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="Foreground" 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> 
            <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
             <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{StaticResource PhoneForegroundBrush}"> 
              <Rectangle.OpacityMask> 
               <ImageBrush ImageSource="/appbar.basecircle.rest.png"/> 
              </Rectangle.OpacityMask> 
             </Rectangle> 
             <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{StaticResource PhoneForegroundBrush}" OpacityMask="{TemplateBinding BorderBrush}"/> 
            </Canvas> 
            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
           </Grid> 

          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Использование:

<Button Style="{StaticResource FlatStyle}" BorderThickness="0" Width="48" Height="48"> 
       <Button.BorderBrush> 
        <ImageBrush ImageSource="/appbar.favs.rest.png"/> 
       </Button.BorderBrush> 
      </Button> 
+0

Удивительный, спасибо. Любые идеи, как я мог бы сложить 2 изображения друг на друга, все еще используя эту технику? Я использую проверку и отменю изображения, которые поставляются с SDK, и я хотел бы нарисовать круг вокруг них (использовал изображение круга, которое поставляется вместе с SDK). – Zik

+0

обрабатывать свойство 'Visible' каждого изображения – Ku6opr

+0

Вы должны объявить стиль кнопки и использовать их. Пожалуйста, ознакомьтесь с моими изменениями – ebattulga

Смежные вопросы