Click here to Skip to main content
13,551,695 members
Rate this:
Please Sign up or sign in to vote.
See more: , +

I am trying to create a control that performs several animations on mouse over event of a button. The first functionality is that, the button should take padding=2 and occupy the entire columns. I am not able to do that; if I am trying to decrease the width of the button on mouseover, I am able to do, but when I am trying to increase the width, the button is expanding but the expanded part is not visible. How to implement the same ?

I am using the below code in control template. Please suggest changes :-

<ResourceDictionary xmlns=""

    <!--Create a control template for button-->
    <ControlTemplate x:Key="buttonAnimate" TargetType="Button">
        <Grid Name="myGrid">
            <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
        <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkRed" TargetName="MyBorder"/>
                <Setter Property="Width" Value="200" TargetName="myButton"/>
                <Setter Property="Cursor" Value="Hand" TargetName="myGrid"/>
                <Setter Property="Width" Value="300" TargetName="myButton"/>
                <Setter Property="Width" Value="300" TargetName="MyBorder"/>
                <Setter Property="Padding" Value="2" TargetName="myButton"/>

Thanks in advance.
Posted 7-Mar-13 19:34pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Is there any particular reason that you have put a button (myButton) inside of another button (your template, which is for a button)? You are opening yourself up for all sorts of unexpected behaviour here.

The clipping is probably due to the size of the button (that has the template applied). If this button is laid out to be, say, 200 wide, then anything inside of it that is smaller will clip.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03-2016 | 2.8.180515.1 | Last Updated 23 Apr 2013
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100