在悬停上放大图像缩略图

任何人都可以提供一些建议，说明如何在Silverlight中实现一个控件，该控件显示的图像缩略图在悬停时放大到更大尺寸？在悬停上放大图像缩略图

2009-09-10 Goober

我做了一个类似的按钮。这里是代码 - 我相信你可以很容易地适应它来改变图像。请注意，我从未真正发布过这个代码;当我学习Silverlight时，这只是一个实验。不要把它当成最佳实践的例子。

XAML：

<UserControl x:Class="GrowingButton.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 

     <Grid.Resources> 
      <Storyboard x:Name="growStoryboard"> 
       <DoubleAnimation 
        Storyboard.TargetProperty="Width" 
        Storyboard.TargetName="testButton" 
        Duration="0:0:0.1" 
        By="20"> 
       </DoubleAnimation> 
       <DoubleAnimation 
        Storyboard.TargetProperty="Height" 
        Storyboard.TargetName="testButton" 
        Duration="0:0:1" 
        By="-20"> 
       </DoubleAnimation> 
      </Storyboard> 
      <Storyboard x:Name="shrinkStoryboard"> 
       <DoubleAnimation 
        Storyboard.TargetProperty="Width" 
        Storyboard.TargetName="testButton" 
        Duration="0:0:1" 
        By="-20"> 
       </DoubleAnimation> 
       <DoubleAnimation 
        Storyboard.TargetProperty="Height" 
        Storyboard.TargetName="testButton" 
        Duration="0:0:0.1" 
        By="20"> 
       </DoubleAnimation> 
      </Storyboard> 
     </Grid.Resources> 
     <Button x:Name="testButton" Content="Test" Grid.Column="1" MouseEnter="Button_MouseEnter" MouseLeave="Button_MouseLeave" VerticalAlignment="Center" HorizontalAlignment="Center" Width="50" Height="50"> 
     </Button> 
    </Grid> 
</UserControl>

代码：

public partial class Page : UserControl 
{ 
    public Page() 
    { 
     InitializeComponent(); 
    } 

    private void Button_MouseEnter(object sender, MouseEventArgs e) 
    { 
     this.shrinkStoryboard.SkipToFill(); 
     this.growStoryboard.Begin(); 
    } 

    private void Button_MouseLeave(object sender, MouseEventArgs e) 
    { 
     this.growStoryboard.SkipToFill(); 
     this.shrinkStoryboard.Begin(); 
    } 
}

来源

2009-09-10 14:05:46

嗨，我想要做类似的事情，如果我有多个图像，我只是在Storyboard.TargetName =“testButton”中添加名称 – GJJ 2011-05-23 04:39:39

只要您的控件具有用于MouseOver状态的VisualState，就可以使用DoubleAnimation（或DoubleAnimationUsingKeyframes）在控件上执行ScaleTransform。

为您的缩略图/图像控件创建不同的VisualState（位于VisualStateGroup内）将为您省去将代码连接到代码后面的麻烦。您还可以在Blend中直观地定义不同的缩放比例，这是一个很好的功能。

来源

2009-09-10 14:05:22

本页面 - Fish Eye Menu有做类似于你想要什么东西的例子。由于某些原因，尽管我安装了Silverlight，但它并未显示Silverlight版本。这可能是与它在Silverlight 2中。

来源

2009-09-11 09:43:42 ChrisF

在悬停上放大图像缩略图

回答

相关问题