如何在Silverlight中放大按钮？

在Silverlight应用程序中，当鼠标悬停在它们上方时，我想让按钮放大几个像素。我也希望它能够制作新的尺寸，而不是突然变大。我如何在XAML中完成这项工作？如何在Silverlight中放大按钮？

2010-01-22 Craig Schwarze

为您的按钮创建一个ControlTemplate，其中包含一个用于为高度/宽度设置动画效果的动画板或转换属性，以及一个用于在MouseEnter事件上触发故事板的触发器。

有点像this应该做的伎俩。

这里是一些代码....它有点冗长，它使用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>

来源

2010-01-22 00:22:10

感谢Muad'Dib - 你能提供一些代码？ – 2010-01-22 00:24:44

你需要编辑模板按钮并添加动画的鼠标悬停状态。

1）在Expression Blend 2/3/4中，将一个按钮拖放到设计图面上。
2）右键单击按钮“编辑模板” - >“编辑复制” - >确定。
您现在正在编辑按钮模板。
3）转到状态窗口并从状态列表中选择“MouseOver”状态。你现在在一个故事板。
4）改变你想要的MouseOver状态的属性。
5）为了实现漂亮的转换，添加一个VisualStateTransition。在状态窗口中，从“* - > MouseOver”添加一个新的Visual Transition（“Common States”旁边）。让这种视觉转变的时间以秒为单位，你希望过渡。

如果您想了解更多关于视觉状态，考虑支出30分钟看着这些“我如何”由史蒂夫·怀特视频@http://expression.microsoft.com/en-us/cc643423.aspx

来源

2010-01-22 00:39:22 JustinAngel

如何在Silverlight中放大按钮？

回答

相关问题