호버상에서 이미지 섬네일 확대

Question

Silverlight에서 컨트롤을 구현하는 방법에 대한 조언을 해 줄 수 있습니까? 이미지 축소판을 올려 놓았을 때 더 큰 크기로 확대 할 수 있습니까?

Answer 1

버튼과 비슷한 기능을했습니다. 여기에 대한 코드가 있습니다. 이미지로 쉽게 작업 할 수있을 것입니다. 나는이 코드를 실제로 공개하지 않았다. 내가 실버 라이트를 배울 때 실험에 불과했습니다. 모범 사례로 간주하지 마십시오.

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

Answer 2

컨트롤에 MouseOver 상태에 대한 VisualState가있는 한 컨트롤에 ScaleTransform을 수행하려면 DoubleAnimation (또는 DoubleAnimationUsingKeyframes)을 사용할 수 있습니다.

축소판/이미지 컨트롤에 대해 다른 VisualState (VisualStateGroup 내부)를 만들면 코드 숨김에서 이벤트를 연결하지 않아도됩니다. 블렌드에서 다른 스케일링을 시각적으로 정의 할 수있어 좋은 기능입니다.

Answer 3

이 페이지 - Fish Eye Menu 당신이 원하는 것과 유사한 무언가를 예를 들어 있습니다. 어떤 이유로 Silverlight를 설치 했음에도 불구하고 Silverlight 버전을 표시하지 않습니다. 그것은 Silverlight 2에있는 것과 관련이있을 수 있습니다.