Comment agrandir un bouton dans Silverlight?

Question

Dans une application Silverlight, je souhaite que mes boutons soient agrandis de quelques pixels lorsque la souris les survole. Je voudrais aussi l'animer à la nouvelle taille, plutôt que de devenir soudainement plus grand. Comment puis-je accomplir cela dans XAML?

Answer 1

Créez un ControlTemplate pour votre bouton avec un storyboard pour animer les propriétés height/width ou transform, et un déclencheur pour déclencher le storyboard sur l'événement MouseEnter.

Quelque chose comme this devrait faire l'affaire.

est un code ici .... est un peu long et il utilise VisualStates ....

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="SilverlightApplication1.MainPage" 
    Width="640" Height="480"> 
    <UserControl.Resources> 
     <Style x:Key="ButtonStyle1" TargetType="Button"> 
      <Setter Property="Background" Value="#FF1F3B53"/> 
      <Setter Property="Foreground" Value="#FF000000"/> 
      <Setter Property="Padding" Value="3"/> 
      <Setter Property="BorderThickness" Value="1"/> 
      <Setter Property="BorderBrush"> 
       <Setter.Value> 
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
         <GradientStop Color="#FFA3AEB9" Offset="0"/> 
         <GradientStop Color="#FF8399A9" Offset="0.375"/> 
         <GradientStop Color="#FF718597" Offset="0.375"/> 
         <GradientStop Color="#FF617584" Offset="1"/> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5"> 
          <Grid.RenderTransform> 
           <TransformGroup> 
            <ScaleTransform/> 
            <SkewTransform/> 
            <RotateTransform/> 
            <TranslateTransform/> 
           </TransformGroup> 
          </Grid.RenderTransform> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
               <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
               <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> 
               <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/> 
              </ColorAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundAnimation" Storyboard.TargetProperty="Opacity"> 
               <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"> 
               <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/> 
              </ColorAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity"> 
               <SplineDoubleKeyFrame KeyTime="0" Value=".55"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
           <VisualStateGroup x:Name="FocusStates"> 
            <VisualState x:Name="Focused"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity"> 
               <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Unfocused"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="Background" Background="White" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3"> 
           <Grid Margin="1" Background="{TemplateBinding Background}"> 
            <Border x:Name="BackgroundAnimation" Opacity="0" Background="#FF448DCA"/> 
            <Rectangle x:Name="BackgroundGradient"> 
             <Rectangle.Fill> 
              <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> 
               <GradientStop Color="#FFFFFFFF" Offset="0"/> 
               <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 
               <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 
               <GradientStop Color="#C6FFFFFF" Offset="1"/> 
              </LinearGradientBrush> 
             </Rectangle.Fill> 
            </Rectangle> 
           </Grid> 
          </Border> 
          <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> 
          <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/> 
          <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </UserControl.Resources> 

    <Grid x:Name="LayoutRoot" Background="White"> 
     <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Content="Button" Style="{StaticResource ButtonStyle1}"/> 
    </Grid> 
</UserControl> 

Answer 2

Vous devez modifier le modèle pour le bouton et ajouter une animation pour l'état MouseOver.

1) Dans le mélange d'expression 2/3/4, faites glisser et déposez un bouton sur la surface de conception.
2) Clic droit sur le bouton "Modifier le modèle" -> "Modifier la copie" -> OK.
Vous êtes en train de modifier le modèle de bouton.
3) Allez dans la fenêtre States et sélectionnez l'état "MouseOver" dans la liste des états. Vous êtes maintenant dans un storyboard.
4) Modifiez toutes les propriétés que vous souhaitez pour l'état MouseOver.
5) pour réaliser la belle transition, ajoutez VisualStateTransition. Dans la fenêtre des états, ajoutez une nouvelle Transition visuelle (à côté de "Common States") à partir de "* -> MouseOver". Donnez à cette transition visuelle la durée en secondes que vous souhaitez que la transition prenne.

Si vous souhaitez en savoir plus sur les États visuels, envisager de passer 30 minutes à regarder ces « Comment puis-je » les vidéos de Steve White @http://expression.microsoft.com/en-us/cc643423.aspx