Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: WPF Design User-controls , +
Hi,
 
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
    <!--Create a control template for button-->
    <ControlTemplate x:Key="buttonAnimate" TargetType="Button">
        <Grid Name="myGrid">
            <Button Name="myButton" Background="{TemplateBinding Background }" Width="{TemplateBinding Width}">
            </Button>
        <Border Name="MyBorder" BorderBrush="Orange" BorderThickness="3" CornerRadius="2"></Border>
        </Grid>
        <ControlTemplate.Triggers>
            <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"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>
 

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

1 solution

Rate this: bad
good
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.
  Permalink  

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

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 565
1 Kornfeld Eliyahu Peter 409
2 Maciej Los 369
3 DamithSL 196
4 OriginalGriff 188
0 OriginalGriff 6,353
1 DamithSL 4,854
2 Maciej Los 4,466
3 Kornfeld Eliyahu Peter 4,058
4 Sergey Alexandrovich Kryukov 3,897


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 23 Apr 2013
Copyright © CodeProject, 1999-2014
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