CODEWITHSUNDEEP
c#wpf
User123
User123

Reputation: 373

How can I show a button is clicked(pressed) in WPF?

On mouse is up button should show the background border

I have created a simple style 

<UserControl.Resources>
        <Style TargetType="Button" x:Key="TransparentButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="Transparent">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

and in button 

<Button  Height="20" Width="20"  Padding="0,0,0,0" DockPanel.Dock="Top" Grid.Row="0" Grid.Column="1" Click="button_click"  Style="{StaticResource TransparentButton}"
                    BorderBrush="Transparent" BorderThickness="0" Background="Transparent">
            <Button.Content>
                <Image Source="../Resources/Help_icon.png" Stretch="UniformToFill" />
            </Button.Content>
            </Button>

But in this case when button is pressed it doesn't show up in UI. User should feel that button is pressed.

Thanks and regards

Upvotes: 13

Views: 47746

Answers (4)

Robin Bennett
Robin Bennett

Reputation: 3231

There's a good article here that explains what's going on and how to fix it. Basically MS did include this feature in the standard button, but the colors they picked for 'mouse down' and 'pressed' are so close that you don't notice the difference.

Right-click on the button in the designer, and pick "Edit Template / Edit a Copy..." and then change the colors until you can see a difference. Simple!

Upvotes: 2

Nandha kumar
Nandha kumar

Reputation: 763

Try this one...

<Style x:Key="PressedButtonEffect" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" Background="Transparent" BorderThickness="1" BorderBrush="Gray">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsPressed" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
                            <Setter TargetName="border" Property="BorderThickness" Value="2" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 0

Trevor Elliott
Trevor Elliott

Reputation: 11252

I'm not sure what you want visually, but if you want the border to change color when the button is pressed down, you would modify your template like this:

<Style TargetType="Button" x:Key="TransparentButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" Background="Transparent" BorderThickness="1" BorderBrush="Black">
                    <ContentPresenter/>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsPressed" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="Transparent" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 16

Kevin DiTraglia
Kevin DiTraglia

Reputation: 26058

When you recreate the ControlTemplate of the button you lose all the default features of the windows button feel. You would need to recreate them with triggers, or not use your own control template.

<ControlTemplate.Triggers>
   <Trigger Property="IsPressed" Value="True">
       <Setter ....behavior you want
   </Trigger>
</ControlTemplate.Triggers>

Here's a link to MSDN default control template a button has, you can use it as a reference to recreate some of the behavior you have lost by defining your own.

http://msdn.microsoft.com/en-us/library/ms753328%28v=vs.85%29.aspx

Upvotes: 6

Related Questions