Alterar Source de um Image atraves de trigger

Question

Fala pessoal, tudo certo?

Seguinte, comecei um projeto recentemente em WPF e estou aprendendo aos poucos, o que estou com problemas para fazer eu já havia feito em uma aplicação WinForms, mas tenho quase certeza que é possível fazer isso usando apenas o XAML me poupando diversas linhas de código.

Chega de lenga lenga e vamos ao problema: Tenho um TabControl com duas TabPages, e cada TabPage coloco um StackPanel com uma imagem de um "X", para que seja fechada essa aba, e um TextBlock ao lado para que seja exibida a descrição da TabPage. Gostaria de colocar 2 triggers nessa imagem, uma para que quando o usuário clicar com o mouse a imagem seja alterada e quando soltar o botão do mouse a imagem volte a original. Fiz uma "gambiarra" para que a imagem fique com a opacidade 0.6 e quando o usuário clicar a opacidade fique 1 isso em forma de animação. Até que ficou legal o efeito, mas gostaria de simplesmente trocar a source da imagem, mais simples.

Código com a trigger;

<Window.Resources>
        <Style x:Key="ImagePressed" TargetType="Image">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.25" To="1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.25" To="0.6" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Image.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.25" To="0.6" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

Código da tabpage com a imagem:

            <TabItem Name="tpMainPage" >
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
                        <Image Source="/CS-Loja;component/Resources/buttonClose.png" Height="14" Width="14" Style="{StaticResource ImagePressed}" Opacity="0.8" OpacityMask="{x:Null}" />
                        <Separator />
                        <TextBlock Text="   Teste"/>
                    </StackPanel>
                </TabItem.Header>
</TabItem>

Agradeço antecipadamente.

Answer 1

Bom dia Filipe,

segue abaixo o exemplo de código que você pode utilizar.

            <Button>
                
                <Button.Template>
                    
                    <ControlTemplate TargetType="{x:Type Button}">
                        
                        <Grid>
                            
                            <Image Name="Normal" Source="Box_Green.png" Width="20" Height="20" />
                            
                            <Image Name="Clicado" Source="Box_Red.png" Width="20" Height="20" Visibility="Hidden" />                            
                            
                        </Grid>
                        
                        <ControlTemplate.Triggers>
                            
                            <Trigger Property="IsPressed" Value="True">
                                
                                <Setter TargetName="Normal" Property="Visibility" Value="Hidden" />
                                
                                <Setter TargetName="Clicado" Property="Visibility" Value="Visible" />
                                
                            </Trigger>
                            
                        </ControlTemplate.Triggers>
                        
                    </ControlTemplate>
                    
                </Button.Template>
                
            </Button>

Espero ter ajudado.

Abraços,

Daniel Benevides

---

Daniel Benevides

Answer 2

Bom dia Daniel,

Obrigado pela resposta, ficou exatamente como eu queria.