Om en TabControl används och en kontroll ska animeras med Storyboards som kopplas ihop via C#−kod kan det bli fel.
Det som går fel är att när man växlar bort den tab som har den animerade kontrollen och det är
dags för att starta nästa Storyboard så hittar den inte kontrollen.
För att komma runt detta så bör man kontrollera om det är rätt TabItem som är aktiv, annars ska
inte nästa Storyboard startas.
För att få igång animationen då man byter tillbaka till den tabben så går det att starta den
första Storyboarden när Kontrollen har laddats, för den laddas om för varje gång en tab
aktiveras.
Följande exempel har en TabControl med två tabbar, animerar en Ellipse på en tab med hjälp av två StoryBoards.
XAML:
<basics:TabControl x:Name="TheTabControl" SelectedIndex="1">
<basics:TabItem Header="Tab 1" >
</basics:TabItem>
<basics:TabItem x:Name="Tab2" Header="Tab 2">
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="BallAnimation1"
Completed="BallAnimation1_Completed">
<DoubleAnimation Storyboard.TargetName="Ball"
Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100"/>
</Storyboard>
<Storyboard x:Name="BallAnimation2"
Completed="BallAnimation2_Completed">
<DoubleAnimation Storyboard.TargetName="Ball"
Storyboard.TargetProperty="(Canvas.Left)" From="100" To="0"/>
</Storyboard>
</Canvas.Resources>
<Ellipse x:Name="Ball" Width="30" Height="30" Fill="Blue"
Loaded="Ball_Loaded"/>
</Canvas>
</basics:TabItem>
</basics:TabControl>
C#−code:
private void Ball_Loaded(object sender, RoutedEventArgs e)
{
BallAnimation1.Begin();
}
private void BallAnimation1_Completed(object sender, EventArgs e)
{
if (TheTabControl.SelectedIndex == 1)
{
BallAnimation2.Begin();
}
}
private void BallAnimation2_Completed(object sender, EventArgs e)
{
if (TheTabControl.SelectedIndex == 1)
{
BallAnimation1.Begin();
}
}
