Image Button RSS

• 

  shaggygi

  Member

  62 Points

  95 Posts

  • Reply
  •  

  Image Button

  Mar 18, 2008 03:25 PM | LINK

  Any samples out there to create a Image Button?  Have the basic grow/shrink on mouse over or click events?

• 

  MattDrimo Xceed

  Member

  168 Points

  28 Posts

  • Reply
  •  

  Re: Image Button

  Mar 18, 2008 04:04 PM | LINK

  Here's an example I made real quick to get you started. 

  <Style TargetType="Button"
                  x:Key="styleA">
              <Setter Property="Template">
                 <Setter.Value>
                    <ControlTemplate TargetType="Button">
                       <Grid x:Name="RootElement"
                             Background="Transparent">
                          <Grid.Resources>
                             <Storyboard x:Key="MouseOver State">
                               
                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleX"
                                                 To="1.2"
                                                 Duration="00:00:00.25"/>
                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleY"
                                                 To="1.2"
                                                 Duration="00:00:00.25" />
                             </Storyboard>

                             <Storyboard x:Key="Normal State">

                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleX"
                                                 To="1"
                                                 Duration="00:00:00.25" />
                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleY"
                                                 To="1"
                                                 Duration="00:00:00.25" />
                             </Storyboard>
                            
                             <Storyboard x:Key="Pressed State">

                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleX"
                                                 To="1.4"
                                                 Duration="00:00:00.25" />
                                <DoubleAnimation Storyboard.TargetName="buttonScale"
                                                 Storyboard.TargetProperty="ScaleY"
                                                 To="1.4"
                                                 Duration="00:00:00.25" />
                             </Storyboard>

  
                          </Grid.Resources>
                          <ContentPresenter Content="{TemplateBinding Content}"
                                            RenderTransformOrigin="0.5,0.5">
                             <ContentPresenter.RenderTransform>
                                <ScaleTransform x:Name="buttonScale" />
                             </ContentPresenter.RenderTransform>
                          </ContentPresenter>
                       </Grid>
                    </ControlTemplate>                 
                 </Setter.Value>
                
              </Setter>
           </Style>

   You'll want to affect the content of the button to what you need, for example :

   <Button Width="100"
                x:Name="buttonTest"
                Style="{StaticResource styleA}"
                Click="buttonTest_Click">
           <StackPanel Orientation="Vertical">
              <Image Source="image1.jpg" />
              <TextBlock Text="Test 1" />
           </StackPanel>
        </Button>

  Modify the storyboard states to reflect what you need for your RenderTransform etc...
  

   Hope this helps ! If it did, remember to mark the post as answered !

  Mathieu Drimonakos
  Technical Designer
  www.xceed.com
  
  
• 

  gp100mk

  Member

  7 Points

  58 Posts

  • Reply
  •  

  Re: Re: Image Button

  Dec 18, 2008 11:38 AM | LINK

  What do I need to do to call the animations for MouseOver, Pressed etc. They don't get called automatically, and I can't seem to reference them anywhere.

   Thanks

• 

  gphillips

  Member

  7 Points

  42 Posts

  • Reply
  •  

  Re: Re: Re: Image Button

  Jan 15, 2011 01:27 PM | LINK

  great example!
  

• 

  vinothmdu2001

  Member

  3 Points

  1 Post

  • Reply
  •  

  Re: Image Button

  Mar 31, 2011 07:41 AM | LINK

  Hi MattDrimo

  Nice Example...it's saves my lot of time. thanks.

  
  

  Regards,

  Vinothkumar