Eye that follow cursor of the mouse [modified]
-
Hi , i wish build a control(wpf) that the Eye(Ellipse) follow the cursor of the mouse. here is a snippet code that i am developing :
<Window Height="480" Title="Window2" Width="640" x:Class="WpfApplication5.Window2"
x:Name="Window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).( TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style TargetType="Ellipse">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
</Style>
</Window.Resources>
<Canvas MouseMove="mov" x:Name="LayoutRoot">
<Border ackground="Black" B="" Canvas.Left="178" Canvas.Top="103"
CornerRadius="250" Height="255.5" Width="290" x:Name="border_eye">
<Ellipse Fill="#FFFFC600" Height="12" HorizontalAlignment="Left"
Margin="0" RenderTransformOrigin="0.5,0.5" Stroke="{x:Null}"
VerticalAlignment="Center" Visibility="Visible" Width="12" x:Name="ctrCircle">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
& -
Hi , i wish build a control(wpf) that the Eye(Ellipse) follow the cursor of the mouse. here is a snippet code that i am developing :
<Window Height="480" Title="Window2" Width="640" x:Class="WpfApplication5.Window2"
x:Name="Window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).( TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style TargetType="Ellipse">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
</Style>
</Window.Resources>
<Canvas MouseMove="mov" x:Name="LayoutRoot">
<Border ackground="Black" B="" Canvas.Left="178" Canvas.Top="103"
CornerRadius="250" Height="255.5" Width="290" x:Name="border_eye">
<Ellipse Fill="#FFFFC600" Height="12" HorizontalAlignment="Left"
Margin="0" RenderTransformOrigin="0.5,0.5" Stroke="{x:Null}"
VerticalAlignment="Center" Visibility="Visible" Width="12" x:Name="ctrCircle">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
&That XAML makes my brain hurt. Maybe you should use the PRE tag on it rather than the CODE tag. The PRE tag maintains the indentation.
-
That XAML makes my brain hurt. Maybe you should use the PRE tag on it rather than the CODE tag. The PRE tag maintains the indentation.
Hi aspodotnetdev, i tried to modify it but i can not fix it well i don't know why,:confused: i will try again. Thanks :) Edit... i tried to use PRE tag but when i post the code many lines of code disappear ,i am so sorry if it is not fix well.
-
Hi aspodotnetdev, i tried to modify it but i can not fix it well i don't know why,:confused: i will try again. Thanks :) Edit... i tried to use PRE tag but when i post the code many lines of code disappear ,i am so sorry if it is not fix well.
VisualLive wrote:
i tried to use PRE tag but when i post the code many lines of code disappear
Hmmm, maybe that's related to a bug I reported here.
-
Hi aspodotnetdev, i tried to modify it but i can not fix it well i don't know why,:confused: i will try again. Thanks :) Edit... i tried to use PRE tag but when i post the code many lines of code disappear ,i am so sorry if it is not fix well.
You needed to HTML encode your XML. I've fixed it
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP
-
You needed to HTML encode your XML. I've fixed it
cheers, Chris Maunder The Code Project | Co-founder Microsoft C++ MVP
Hi Chris, you are so kind to do that,i will remind for the next time i post a code. :) Thanks so much . Have a nice day.
-
Hi , i wish build a control(wpf) that the Eye(Ellipse) follow the cursor of the mouse. here is a snippet code that i am developing :
<Window Height="480" Title="Window2" Width="640" x:Class="WpfApplication5.Window2"
x:Name="Window" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<Storyboard x:Key="OnLoaded1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).( TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ctrCircle"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style TargetType="Ellipse">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
</Style>
</Window.Resources>
<Canvas MouseMove="mov" x:Name="LayoutRoot">
<Border ackground="Black" B="" Canvas.Left="178" Canvas.Top="103"
CornerRadius="250" Height="255.5" Width="290" x:Name="border_eye">
<Ellipse Fill="#FFFFC600" Height="12" HorizontalAlignment="Left"
Margin="0" RenderTransformOrigin="0.5,0.5" Stroke="{x:Null}"
VerticalAlignment="Center" Visibility="Visible" Width="12" x:Name="ctrCircle">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
& -
You may get a better reponse to your query in the WPF forum.
Just say 'NO' to evaluated arguments for diadic functions! Ash
Hi Richard, truly i believed it was the WPF Forum :-D ,so it was my mistake :doh: . Thanks for your suggest,i moved this question to the WPF Forum. Have a nice day. :)