02/07/2011

[XAML] Bouton sexy

Voilà une de mes créations réalisez avec Expression Blend, je vous laisse soin de me mettre un petit mot pour me dire ce que vous en pensez !

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 x:Class="Blog.MainControl"
 x:Name="UserControl"
 d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
   <ControlTemplate x:Key="BtSexy" TargetType="{x:Type Button}">
      <ControlTemplate.Resources>
         <Storyboard x:Key="OnClick1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Anneau_de_couleur">
               <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.45">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseIn"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
               <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.75">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseOut"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Anneau_de_couleur">
               <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.45">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseIn"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
               <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.75">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseOut"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Anneau_de_couleur">
               <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseIn"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
               <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
                  <EasingDoubleKeyFrame.EasingFunction>
                     <PowerEase EasingMode="EaseOut"/>
                  </EasingDoubleKeyFrame.EasingFunction>
               </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
         </Storyboard>
      </ControlTemplate.Resources>
      <Grid>
         <Border x:Name="Anneau_de_couleur" BorderBrush="{TemplateBinding Background}" BorderThickness="10" CornerRadius="180" RenderTransformOrigin="0.5,0.5">
            <Border.RenderTransform>
               <TransformGroup>
                  <ScaleTransform/>
                  <SkewTransform/>
<RotateTransform/>
                  <TranslateTransform/>
               </TransformGroup>
            </Border.RenderTransform>
         </Border>
         <Border x:Name="Cerclage" BorderThickness="6" CornerRadius="180">
            <Border.BorderBrush>
               <LinearGradientBrush EndPoint="0.181,0.885" StartPoint="0.819,0.115">
                  <GradientStop Color="White" Offset="0.47"/>
                  <GradientStop Color="#FF434343" Offset="0.965"/>
                  <GradientStop Color="#FF434343" Offset="0.07"/>
               </LinearGradientBrush>
            </Border.BorderBrush>
         </Border>
         <Border x:Name="Background" BorderBrush="Black" BorderThickness="0" CornerRadius="180" Background="{TemplateBinding Background}" Margin="6"/>
      </Grid>
      <ControlTemplate.Triggers>
         <EventTrigger RoutedEvent="ButtonBase.Click">
            <BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
      </ControlTemplate.Triggers>
   </ControlTemplate>
</UserControl.Resources>


 <Grid x:Name="LayoutRoot">
  <Button Content="Button" Margin="194,152,262,173" Template="{DynamicResource BtSexy}">
   <Button.Background>
    <RadialGradientBrush>
     <GradientStop Color="#FFF3F3F3" Offset="0"/>
     <GradientStop Color="#FFEBEBEB" Offset="0.5"/>
     <GradientStop Color="#FFDDDDDD" Offset="0.657"/>
     <GradientStop Color="#FF5AA90F" Offset="1"/>
    </RadialGradientBrush>
   </Button.Background>
   <Button.BorderBrush>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Color="Black" Offset="0"/>
     <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
   </Button.BorderBrush>
  </Button>
 </Grid>
</UserControl>

Aucun commentaire:

Enregistrer un commentaire