Увеличьте миниатюру изображения при наведении курсора мыши

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

Пока ваш элемент управления имеет VisualState для состояния MouseOver, вы можете использовать DoubleAnimation (или DoubleAnimationUsingKeyframes ) для выполнения ScaleTransform для элемента управления.

Создание различных VisualStates (внутри VisualStateGroup) для элемента управления миниатюрами / изображениями избавит вас от необходимости связывать события в коде. Вы также сможете визуально определять различное масштабирование в Blend, что очень удобно.

Answer 3

Эта страница - Меню «Рыбий глаз» есть пример, который делает что-то похожее на то, что вы хотите. По какой-то причине он не отображает версию Silverlight, несмотря на то, что я установил Silverlight. Это может быть связано с тем, что в Silverlight 2.