在懸停上放大圖像縮略圖

任何人都可以提供一些建議，說明如何在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

在懸停上放大圖像縮略圖

回答

相關問題