Perché questa animazione Silverlight fa scomparire l'intero layout?

Question

Sto iniziando a dare un'occhiata a Silverlight e volevo iniziare in piccolo. Tutti gli esempi che avevo visto usavano le animazioni dei fotogrammi chiave, quindi volevo provare un diverso tipo di animazione. Inoltre non avevo familiarità con l'esecuzione di animazioni dal codice, quindi ho deciso di provare anche questo. Il mio obiettivo finale è creare una sorta di pannello animato, ma per ora sto iniziando in piccolo con un solo pulsante:

<UserControl x:Class="TestSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" Background="Azure">
    <Grid x:Name="LayoutRoot" Background="Azure">
        <Button x:Name="btnClick" Content="Animate me!" Height="48" Width="96" Click="btn_Click">
        </Button>
    </Grid>
</UserControl>

Ho scritto questo gestore di eventi, che secondo me era piuttosto semplice:

private void btn_Click(object sender, EventArgs e)
{
    Storyboard story = new Storyboard();
    story.RepeatBehavior = new RepeatBehavior(3.0);
    story.Duration = new Duration(TimeSpan.FromSeconds(1.0));

    if (btnClick.RenderTransform == null)
        btnClick.RenderTransform = new TranslateTransform();

    DoubleAnimation xAnim = new DoubleAnimation();
    xAnim.To = 50;
    Storyboard.SetTargetProperty(xAnim, new PropertyPath(TranslateTransform.XProperty));
    Storyboard.SetTarget(xAnim, btnClick.RenderTransform);

    story.Children.Add(xAnim);

    story.Begin();
}

Quello che mi aspetto quando faccio clic sul pulsante è vederlo scorrere verso destra per 50 unità 3 volte. Ciò che effettivamente accade è che l'intero layout scompare, come nel colore di sfondo insieme al pulsante scompare.

Se riscrivo il codice per iniziare il pulsante con un RenderTransform, tutto funziona!

<Button x:Name="btnClick" Content="Animate me!" Height="48" Width="96" Click="btn_Click">
    <Button.RenderTransform>
        <TranslateTransform />
    </Button.RenderTransform>
</Button>

Cosa sta succedendo nel primo caso che causa l'errore? Sto facendo qualcosa di fondamentalmente sbagliato?

Answer 1

Puoi risolvere il problema rimuovendo il segno di spunta per " btnClick.RenderTransform == null " ;, e invece crea sempre un nuovo TranslateTransform o controlla " btnClick.RenderTransform è TranslateTransform " invece di null.

Il motivo per cui viene visualizzato questo errore è che, per impostazione predefinita, Button ha una trasformazione dell'identità per la sua RenderTransform, che risulta essere una MatrixTransform. Quindi stai tentando di animare una MatrixTransform come se fosse una TranslateTransform.

Answer 2

L'ultima volta che ho lavorato con Silverlight è stato all'inizio del 2008. Nelle versioni Beta di Silverlight a volte l'intero layout era semplicemente scomparso (rimaneva bianco e vuoto) quando si verificava qualsiasi , anziché un messaggio di errore.

Non sono sicuro se questo è ancora il caso nelle versioni correnti. Puoi (o hai già) passato il codice per verificare se viene generata un'eccezione ... o catturarlo a livello di codice e visualizzare un messaggio di errore?

Spero di poterti aiutare un po '.

Matthias

Answer 3

Ho cercato praticamente la stessa cosa e varie fonti che ho letto suggeriscono che non è possibile aggiungere storyboard a livello di codice. Prova ad aggiungerlo in XAML, quindi puoi modificarlo nel codice --- assicurati di nominarlo in modo da poterlo accedere. Potrebbe essere necessario aggiungere la trasformazione anche in xaml. La cosa da ricordare che silverlight non è wpf, è vicino ma molte cose sono diverse, quanto basta per essere un dolore.

<UserControl x:Class="TestSilverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300" Background="Azure">
    <UserControl.Resources>
        <StoryBoard Name="story" />
    </UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="Azure">
    <Button x:Name="btnClick" Content="Animate me!" Height="48" Width="96" Click="btn_Click">
    </Button>
</Grid>