2013-02-18 3 views
1

В приложении WPF, я вставить кнопку с простым изображением на фоне:Изменить цвет изображения кнопки в WPF

<Button Grid.Column="2" BorderBrush="Transparent" HorizontalAlignment="Left" Height="20" Margin="15,0,0,0" VerticalAlignment="Center" Width="20"> 
    <Button.Background> 
     <ImageBrush ImageSource="Divalto_Rechercher_25px.png" Stretch="Uniform"></ImageBrush> 
    </Button.Background> 
</Button> 

Я хотел бы, при наведении мыши, transforme цвет изображения картины.

Вот картина, когда мышь находится вне:

enter image description here

И когда мышь закончилась, я хотел бы кое-что подобное:

enter image description here

Я хотел бы сделать это динамически (преобразование динамического цвета изображения).

Вот попробовать, но не полный:

<Button Grid.Column="2" BorderBrush="Transparent" HorizontalAlignment="Left" Height="20" Margin="15,0,0,0" VerticalAlignment="Center" Width="20"> 
    <Button.Background> 
    <ImageBrush ImageSource="appbar.feature.search.rest.png" Stretch="Uniform"></ImageBrush> 
    </Button.Background> 
    <EventTrigger RoutedEvent="Button.MouseEnter"> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation 
        Storyboard.TargetName="AnimBrush" 
        Storyboard.TargetProperty="(SolidColorBrush.Color)" 
        From="Red" To="Green" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" /> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
</Button> 

Любой может мне помочь, пожалуйста?

Спасибо большое,

С наилучшими пожеланиями,

ответ

0

Почему не просто установить содержание кнопку, чтобы быть изображение, которое вы хотите? Это, наверное, самый простой способ. Затем вы можете просто изменить события мыши. See this SO answer

Если у вас есть только изображение с белым увеличительным стеклом, при этом остальная часть изображения будет прозрачной, вы должны установить содержимое кнопки в качестве изображения и установить фон как цвет, который вы хотите (оранжевый или черный)

+0

, потому что я мог бы изменить программно в coulor! Вот почему я хотел бы преобразовать свою фотографию :) –

+0

Если вы хотите изменить только цвет, тогда вам нужно будет создать изображение через рисунок WPF AFAIK ... если только изображение не является только увеличительным стеклом с остальным прозрачный? –

+0

Interressant! Предположим, у меня есть увеличительное стекло с остальным прозрачным, как я могу добавить динамически черный цвет и оранжевый цвет? –

0

Похоже, вам нужно добавить StoryBoard на свой XAML. Если у вас есть прозрачное изображение, почему бы просто не изменить цвет заливки кнопки?

Я не тестировал приведенный ниже код, но это то, что вы можете использовать в качестве трамплина.

<EventTrigger RoutedEvent="Button.MouseOver"> 
     <BeginStoryboard> 
     <Storyboard> 
      <ColorAnimation 
      Storyboard.TargetName="AnimBrush" 
      Storyboard.TargetProperty="(SolidColorBrush.Color)" 
      From="Red" To="Green" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" /> 
     </Storyboard> 
     </BeginStoryboard> 
</EventTrigger> 
+0

спасибо :) Я попытался использовать этот код, но цвет не изменился. Я редактирую первый пост с помощью своего кода, не могли бы вы посмотреть? благодаря :) –

2

Вы можете просто создать Content как Border с Image внутри и изменить BorderBackground используя Trigger или Animation. Также может быть хорошей идеей переопределить шаблон Button, если вы просто хотите показать стиль изображения, иначе вы получите стиль фокуса Buuttons, когда мышь закончится.

Пример:

<Button BorderBrush="Transparent" HorizontalAlignment="Left" Height="50" Margin="12,24,0,238" VerticalAlignment="Center" Width="51"> 
     <Button.Content> 
      <Border CornerRadius="5"> 
       <Image Margin="3" Source="http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Search-icon.png" Stretch="Uniform" /> 
       <Border.Style> 
        <Style TargetType="{x:Type Border}"> 
         <Setter Property="Background" Value="LimeGreen" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="Red" /> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Border.Style> 
      </Border> 
     </Button.Content> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}" > 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type Button}" > 
          <ContentPresenter /> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button> 

Результат:

Нормальный enter image description here MouseOver enter image description here

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