2011-05-23 85 views
0

所以我試圖放大一個圖像並將鼠標懸停在上面,所以我查看了一些在線示例,它能夠用於單個圖像,但是我希望它能夠使用多個圖像,這些都是我在網上找到這就是用單個圖像工作(信貸傑夫·耶茨提供解決方案)將鼠標懸停在空中放大多個圖像

XAML中代碼:

 <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(); 
    } 
} 

回答

1

我會用動畫的ScaleTransform要做到這一點,像這樣:

<Storyboard x:Key="MouseOverRectangleStoryBoard"> 
     <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1" 
         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"> 
     </DoubleAnimation> 
     <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1" To="1.1" 
         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"> 
     </DoubleAnimation> 
    </Storyboard> 

    <Storyboard x:Key="MouseLeaveRectangleStoryBoard"> 
     <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1" 
         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"> 
     </DoubleAnimation> 
     <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.1" From="1.1" To="1" 
         Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"> 
     </DoubleAnimation> 
    </Storyboard> 

的代碼是一個矩形,但它是完全一樣的。