Vergrößern Sie ein Miniaturbild auf schweben

Question

Könnte jemand bieten mir einige Ratschläge, wie ich ein Steuerelement in Silverlight gehen könnte über die Implementierung, die Miniaturbilder von Bildern zeigt, dass, wenn schwebte über, vergrößern sie auf eine größere Größe?

Answer 1

Ich habe etwas ähnliches für eine Schaltfläche. Hier ist der Code für das - ich bin sicher, dass Sie es leicht mit einem Bild anpassen können, anstatt zu arbeiten. Beachten Sie, dass ich nie wirklich diesen Code freigegeben; es war nur ein Experiment, wenn ich Silverlight lernte. Nehmen Sie es nicht als Beispiel für Best Practice.

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>

Code:

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

Solange Ihre Steuerung eine Visual für den Mouseover-Zustand hat, können Sie eine DoubleAnimation (oder DoubleAnimationUsingKeyframes) verwenden, um ein Scaletransform auf das Steuerelement.

die verschiedenen VisualStates Erstellen (in einem Visual) für Ihre Miniatur / Bildsteuerung werden Sie sich die Mühe, speichern Sie Ihre Veranstaltungen in der Code-behind verdrahten. Sie werden auch in der Lage sein, die unterschiedliche Skalierung visuell in Mischung zu definieren, welche ein nettes Feature ist, zu haben.

Answer 3

Diese Seite - Fisch-Augen-Menü hat ein Beispiel, das etwas ähnliches tut, was Sie wollen. Aus irgendeinem Grunde der Anzeige, es ist nicht die Silverlight-Version trotz mich mit Silverlight installiert. Es könnte etwas zu tun, damit in Silverlight 2 zu sein.