在Silverlight應用程序中,當鼠標懸停在它們上方時,我想讓按鈕放大幾個像素。我也希望它能夠製作新的尺寸,而不是突然變大。我如何在XAML中完成這項工作?如何在Silverlight中放大按鈕?
1
A
回答
2
爲您的按鈕創建一個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>
2
你需要編輯模板按鈕並添加動畫的鼠標懸停狀態。
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
相關問題
- 1. 如何放大Twitter按鈕?
- 2. 如何在Silverlight中的按鈕內實現按鈕?
- 3. 如何放大按鈕圖像?
- 4. 如何使用按鈕放大QgraphicsView?
- 5. 如何擺脫Silverlight/Expression Media Player中的播放按鈕?
- 6. 如何訪問e.handled中的silverlight按鈕?
- 7. 在Silverlight中,如何在按下按鈕時顯示新窗格?
- 8. 放大Silverlight
- 9. Balsamiq,如何在Datagrid中放置按鈕
- 10. 如何在HBox中放置按鈕 - JAVAFx
- 11. 如何在Textviews中放置按鈕
- 12. 如何在通知中放置按鈕?
- 13. 如何將按鈕放置在中心?
- 14. 在silverlight中按下鼠標按鈕3
- 15. Android分享按鈕放大
- 16. iPhone上的放大按鈕
- 17. Java。防止放大按鈕
- 18. iOS可放大按鈕
- 19. 播放按鈕大小
- 20. 放大和縮小按鈕
- 21. 用按鈕放大圖像?
- 22. 如何將按鈕放在浮動按鈕中?
- 23. Python/Pygame:如何使按鈕在屏幕上縮放按鈕和屏幕大小?
- 24. 將按鈕放置在按鈕中央
- 25. 在網格中動態添加按鈕和Silverlight播放器?
- 26. 我可以在Silverlight 4的RichTextBox中放置一個按鈕嗎?
- 27. Android:居中放大按鈕百分比
- 28. 放大Facebook發送按鈕的大小?
- 29. Silverlight放大畫布
- 30. 如何使放置在按鈕內的unicode更大?
感謝Muad'Dib - 你能提供一些代碼? – 2010-01-22 00:24:44