Увеличить изображение при наведении курсора - PullRequest
Новая
       3

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

4 голосов
/ 10 сентября 2009

Может ли кто-нибудь предложить мне несколько советов о том, как я могу реализовать элемент управления в Silverlight, который отображает эскизы изображений, которые при наведении на них увеличивают его до большего размера?

Ответы [ 3 ]

2 голосов
/ 10 сентября 2009

Я сделал нечто подобное для кнопки. Вот код для этого - я уверен, что вы можете легко адаптировать его для работы с изображением. Обратите внимание, что я никогда не выпускал этот код; это был всего лишь эксперимент, когда я изучал 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();
    }
}
1 голос
/ 10 сентября 2009

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

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

0 голосов
/ 11 сентября 2009

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

...