Plusieurs personnes m'ont demandé le code des barres qui apparaissent sur mouse over dans Nova Light.
Je m'exécute donc avec plaisir :). Cela va me permettre de parler un peu du partage d'animations via les storyboards.
Pour la partie contrôle j'ai défini une grille toute simple:
<Grid HorizontalAlignment="Left" Margin="-134,0,0,0" Width="210" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" x:Name="grid" MouseEnter="grid_MouseEnter" MouseLeave="grid_MouseLeave">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="Auto" Stroke="#C1C1C1" VerticalAlignment="Stretch" RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#FBFBFB"></GradientStop>
<GradientStop Offset="0.5" Color="#F3F3F3"></GradientStop>
<GradientStop Offset="0.5" Color="#E8EAEA"></GradientStop>
<GradientStop Offset="1.0" Color="#ECECEC"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<CheckBox x:Name="ckFPS" HorizontalAlignment="Left" Foreground="#888888" Content="FPS" Checked="ckFPS_Checked" Unchecked="ckFPS_Unchecked" Margin="14,0,0,0"/>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Text="Options" TextWrapping="Wrap" d:LayoutOverrides="Width, Height" Margin="0,0,15,0" Foreground="#888888"/>
<Image Source="Grip.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0, 15, 4, 15"/>
</Grid>J'ai également déclaré dans les resources du contrôle les storyboards suivants:
<Storyboard x:Name="ShowScenes">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="gridScene" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="322"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="HideScenes">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="gridScene" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>On pourra noter que les storyboards ciblent une autre grille que la mienne. En effet, je me sers de ces storyboards de manière générique pour toutes les barres du contrôle.
Toute la magie se fait donc au niveau des événements "grid_MouseEnter" et "grid_MouseLeave":
private void grid_MouseEnter(object sender, MouseEventArgs e)
{
Storyboard.SetTarget(ShowScenes, grid);
ShowScenes.Begin();
}
private void grid_MouseLeave(object sender, MouseEventArgs e)
{
Storyboard.SetTarget(HideScenes, grid);
HideScenes.Begin();
}
On en revient donc toujours à ces propriétés attachées :). En effet, il me suffit ici de venir changer la cible de mon storyboard via la méthode statique Storyboard.SetTarget.
Et le tour est joué!
.Net, Silverlight