호버에서 이미지 썸네일을 확대하십시오

Question

누구든지 가로 뒤집을 때 더 큰 크기로 확대하는 이미지 썸네일을 표시하는 Silverlight에서 컨트롤을 구현할 수있는 방법에 대한 조언을 제공 할 수 있습니까?

Answer 1

나는 버튼과 비슷한 일을했다. 여기에 대한 코드가 있습니다. 대신 이미지로 작업하도록 쉽게 조정할 수 있다고 확신합니다. 실제로이 코드를 공개 한 적이 없습니다. 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();
    }
}

Answer 2

컨트롤에 마우스 오버 상태에 대한 시각적 상태가있는 한 DoubleAnimation (또는 DoubleAnimationUsingKeyframes) a ScaleTransform 통제에.

썸네일/이미지 컨트롤을 위해 다른 VisualStates (VisualStateGroup 내부)를 작성하면 코드에서 이벤트를 연결 해야하는 데 어려움이 있습니다. 또한 블렌드에서 다른 스케일링을 시각적으로 정의 할 수있는 좋은 기능입니다.

Answer 3

이 페이지 - 물고기 눈 메뉴 원하는 것과 비슷한 일을하는 예가 있습니다. Silverlight가 설치되어 있음에도 불구하고 Silverlight 버전을 표시하지 않습니다. Silverlight 2에있는 것과 관련이있을 수 있습니다.