CODEWITHSUNDEEP
c#wpfbutton
Daniele Sartori
Daniele Sartori

Reputation: 1703

"Click" effect on a customized button

I was looking over internet for an arrow shaped button. I found this solution:

 <Button HorizontalAlignment="Center" Click="Button_Click">
         <Button.Template>
             <ControlTemplate TargetType="Button">
                 <Grid>
                     <StackPanel Orientation="Horizontal">
                         <Rectangle Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
                         <Polygon  Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
                     </StackPanel>
                     <ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
                 </Grid>
             </ControlTemplate>
         </Button.Template>
 </Button>

The problem with this is that, while this is a button that can be clicked, i "lost" the button click effect (i.e the effect that you have when you press the button). Do you know if there is a way to solve my problem?

Upvotes: 0

Views: 139

Answers (1)

mm8
mm8

Reputation: 169230

You need to define this effect yourself in your custom template.

Add an IsPressed trigger that changes some properties of the elements in your template:

<Button.Template>
    <ControlTemplate TargetType="Button">
        <Grid>
            <StackPanel Orientation="Horizontal">
                <Rectangle x:Name="rect" Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
                <Polygon x:Name="pol"  Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
            </StackPanel>
            <ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="true">
                <Setter Property="Fill" TargetName="rect" Value="Red"/>
                <Setter Property="Fill" TargetName="pol" Value="Blue"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Button.Template>

Upvotes: 1

Related Questions