none
Alterar Source de um Image atraves de trigger RRS feed

  • Pergunta

  • 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.

    quarta-feira, 14 de março de 2012 21:05

Respostas

  • 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

    quinta-feira, 15 de março de 2012 11:01

Todas as Respostas

  • 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

    quinta-feira, 15 de março de 2012 11:01
  • Bom dia Daniel,

    Obrigado pela resposta, ficou exatamente como eu queria.

    quinta-feira, 15 de março de 2012 12:31