How to animate two arcsegments with a textbox encolsed between them on mouseover?

Question

Hi experts, can anybody point me to some artcile or solution on how  i can achieve something like this in the ferrari's website, here the cars have some interaction points which expands on mouse over and some text is displayed. Please have a look here http://www.ferrari.com/english/gt_sport%20cars/currentrange/f12berlinetta/Pages/f12berlinetta.aspx

---

Thanks and Regards, Prashanth MP.

Answer 1

Hi experts, can anybody point me to some artcile or solution on how  i can achieve something like this in the ferrari's website, here the cars have some interaction points which expands on mouse over and some text is displayed. Please have a look here http://www.ferrari.com/english/gt_sport%20cars/currentrange/f12berlinetta/Pages/f12berlinetta.aspx

---

Thanks and Regards, Prashanth MP.

I have managed to do something like this,but i'm not able to spin the arcs like in that site..

<Window x:Class="InteractionControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Black">
    <Window.Resources>
        <Storyboard x:Key="MystoryBoard" RepeatBehavior="Forever">
            <DoubleAnimation From="0.1" To="1" AutoReverse="True" Duration="00:00:02" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Opacity"/>
            <DoubleAnimation From="0.1" To="1" AutoReverse="True" Duration="00:00:02" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="Opacity"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource MystoryBoard}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <DockPanel>
            <StackPanel  Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center" Width="208" Height="68" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave" Margin="0,120,0,113"  >
                <Path x:Name="ellipse1"  StrokeThickness="4"   Stretch="Fill" Width="43" >
                <Path.OpacityMask>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF000000" Offset="0"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
               </Path.OpacityMask>
                <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF0F246" Offset="0"/>
                        <GradientStop Color="#FF5680BF" Offset="0.988"/>
                    </LinearGradientBrush>
                </Path.Stroke>
                <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="40,50">
                            <PathFigure.Segments>

                                <ArcSegment
              Size="10,10" RotationAngle="90"
              IsLargeArc="True" SweepDirection="clockwise"
              Point="40,20"/>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
            </Path>
                <StackPanel   VerticalAlignment="Center" HorizontalAlignment="Center" >
                    <TextBlock x:Name="txtName" Background="Transparent"  Text="Hello" Foreground="White" VerticalAlignment="Center" Visibility="Collapsed"   />
                </StackPanel>
                <Path x:Name="ellipse2" StrokeThickness="4" Stretch="Fill" Width="40" Data="M40,50 A10,10,90,1,0,40,20">
                    <Path.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF000000" Offset="0"/>
                            <GradientStop Color="#FFFFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.OpacityMask>
                     <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                    <Path.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFF0F246" Offset="0"/>
                            <GradientStop Color="#FF5680BF" Offset="0.988"/>
                        </LinearGradientBrush>
                    </Path.Stroke>
                </Path>
            </StackPanel>
        </DockPanel>
    </Grid>
</Window>

---

Thanks and Regards, Prashanth MP.