Увеличение нескольких изображений при наведении - PullRequest
Новая
       23

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

0 голосов
/ 23 мая 2011

Поэтому я пытаюсь увеличить изображение при наведении курсора, поэтому я просмотрел несколько примеров в Интернете, и он может работать для одного изображения, однако я бы хотел, чтобы он работал с несколькими изображениями, это кодыя обнаружил, что в Интернете это работает с одним изображением (благодарность Джеффу Йейтсу за предоставление решения)

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 Ответ

1 голос
/ 23 мая 2011

Я бы использовал анимацию в 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>

Код для прямоугольника, но он точно такой же.

...