Fish Eye Buttons

image_pdfimage_print


   
       

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="12" />
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetProperty="FontSize"
                                To="36" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation 
                                Storyboard.TargetProperty="FontSize"
                                To="12" Duration="0:0:0.25" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>

    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
</StackPanel>

   
    
    
    
    
    
    
     


Enlarge Button In Xaml

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Button FontSize="12"
            HorizontalAlignment="Center" VerticalAlignment="Center">

        Expanding Button

        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard TargetProperty="FontSize">
                        <DoubleAnimation From="12" To="48" 
                                         Duration="0:0:2"
                                         FillBehavior="Stop" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Page>

   
    
    
    
    
    
    
     


Click to rotate a Button

image_pdfimage_print


   
       
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SpinAndGrowButton" Height="300" Width="300">
    <Grid>
        <Button Name="btnSpinMe" Content="Spin Me" Width="100" Height="50">
    
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotButton" Angle="0" CenterX="50" CenterY="25" />
                    <ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotButton" Storyboard.TargetProperty="(RotateTransform.Angle)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="0.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="360.0" />
                                </DoubleAnimationUsingKeyFrames>


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

   
    
    
    
    
    
    
     


Click to scale a Button

image_pdfimage_print


   
       


<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SpinAndGrowButton" Height="300" Width="300">
    <Grid>
        <Button Name="btnSpinMe" Content="Spin Me" Width="100" Height="50">
            <Button.Background>
                <RadialGradientBrush Center="0.5,0.5" RadiusX="1.0" RadiusY="1.0">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Orange" Offset="1.0" />
                </RadialGradientBrush>
            </Button.Background>
            <Button.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotButton" Angle="0" CenterX="50" CenterY="25" />
                    <ScaleTransform x:Name="scaButton" ScaleX="1" ScaleY="1" CenterX="50" CenterY="25" />
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!-- ScaleX -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaButton" Storyboard.TargetProperty="(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="1.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.5" Value="2.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="1.0" />
                                </DoubleAnimationUsingKeyFrames>

                                <!-- ScaleY -->
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="scaButton" Storyboard.TargetProperty="(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.0" Value="1.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:00.5" Value="2.0" />
                                    <SplineDoubleKeyFrame KeyTime="0:0:01.0" Value="1.0" />
                                </DoubleAnimationUsingKeyFrames>


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

   
    
    
    
    
    
    
     


Change Button Alignment, Margin, FontSize and Padding in Style Setting

image_pdfimage_print


   
       


<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:s="clr-namespace:System;assembly=mscorlib">
    <Page.Resources>

        <Style TargetType="{x:Type Button}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="12" />
            <Setter Property="FontSize" Value="12pt" />
            <Setter Property="Padding" Value="10" />
        </Style>


    </Page.Resources>

    <StackPanel>
        <Button>
            <x:Static Member="s:DateTime.Now" />
        </Button>

    </StackPanel>
</Page>

   
    
    
    
    
    
    
     


Gradient Button by Rectangle

image_pdfimage_print


   
       
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Grid x:Name="LayoutRoot">
        <DockPanel RenderTransformOrigin="0.5,0.5" Margin="98,116,231,80" LastChildFill="False">
            <DockPanel.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                    <SkewTransform AngleX="0" AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0" Y="0"/>
                </TransformGroup>
            </DockPanel.RenderTransform>
            <Rectangle Stroke="sc#1, 0.3, 0.3, 0.9" RadiusX="14.5" RadiusY="14.5" Height="110" 
                 x:Name="Rectangle" RenderTransformOrigin="0.5,0.5" MinHeight="0" Width="110" 
                 DockPanel.Dock="Bottom">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                        <LinearGradientBrush.RelativeTransform>
                            <TransformGroup>
                                <TranslateTransform X="-0.5" Y="-0.5"/>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="-90"/>
                                <TranslateTransform X="0.5" Y="0.5"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </LinearGradientBrush.RelativeTransform>
                        <LinearGradientBrush.GradientStops>
                            <GradientStopCollection>
                                <GradientStop Color="Red" Offset="0"/>
                                <GradientStop Color="sc#0, 1, 1, 1" Offset="1"/>
                                <GradientStop Color="sc#0, 0, 0, 0.2" Offset="0.4"/>
                                <GradientStop Color="sc#1, 0, 0, 0" Offset="0.8"/>
                                <GradientStop Color="sc#1, 0, 0, 0.6" Offset="0.1"/>
                                <GradientStop Color="Red" Offset="0.3"/>
                                <GradientStop Color="Yellow" Offset="0.9"/>
                            </GradientStopCollection>
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="0" Y="0"/>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <SkewTransform AngleX="0" AngleY="0"/>
                        <RotateTransform Angle="0"/>
                        <TranslateTransform X="0" Y="0"/>
                        <TranslateTransform X="0" Y="0"/>
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </DockPanel>
    </Grid>
</Window>