UWP实现光线随鼠标移动的效果

搭配上一篇博客的光线使用
UWP四种光线
最终效果

<Page
    x:Class="Uwp.FinalPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Uwp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:composition="using:Windows.UI.Composition"
    mc:Ignorable="d"
   NavigationCacheMode="Enabled">

    <Grid>
        <GridView x:Name="items_GridView" SelectionMode="None" IsItemClickEnabled="True">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="BitmapImage">
                    <Grid x:Name="parent_Grid" Width="310" Height="310" Tag="{x:Bind}" PointerEntered="parent_Grid_PointerEntered" PointerMoved="Border_PointerMoved" PointerExited="Border_PointerExited">
                        <Grid.Lights>
                            <local:MyDistantLight LightId="myBorderDistantLight" Color="Black" Intensity="0.2" DirectionX="0" DirectionZ="-1"/>
                            <local:MyPointLight x:Name="myBorderPointLight" LightId="myBorderPointLight" Color="White" ConstantAttenuation="0.4" LinearAttenuation="0" OffsetX="150" OffsetY="150" QuadraticAttenuation="1" OffsetZ="30" Intensity="1"/>
                        </Grid.Lights>
                        <local:MyCompositionShadow x:Name="myShadow"
                            Width="300" 
                            Height="300" 
                            ShadowOpacity="0.8" 
                            BlurRadius="15"
                            Color="Gray"
                            OffsetX="0" OffsetY="0" OffsetZ="0"                            
                            />
                        <Grid x:Name="image_Grid" Width="300" Height="300" local:MyDistantLight.TargetId="myBorderDistantLight" local:MyPointLight.TargetId="myBorderPointLight">
                            <Grid.ScaleTransition>
                                <Vector3Transition/>
                            </Grid.ScaleTransition>
                            <Image Source="{Binding}" Stretch="Fill"/>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="Width" Value="320"/>
                    <Setter Property="Height" Value="320"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <ListViewItemPresenter/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.Items>
                <BitmapImage UriSource="1.jpg"/>
                <BitmapImage UriSource="2.jpg"/>
                <BitmapImage UriSource="3.jpg"/>
                <BitmapImage UriSource="4.jpg"/>
                <BitmapImage UriSource="5.jpg"/>
                <BitmapImage UriSource="6.jpg"/>
                <BitmapImage UriSource="7.jpg"/>
                <BitmapImage UriSource="8.jpg"/>
                <BitmapImage UriSource="9.jpg"/>
                <BitmapImage UriSource="10.jpg"/>
                <BitmapImage UriSource="11.jpg"/>
                <BitmapImage UriSource="12.jpg"/>
                <BitmapImage UriSource="13.jpg"/>
                <!--<x:String>
                    aaa
                </x:String>
                <x:String>
                    bbb
                </x:String>
                <x:String>
                    ccc
                </x:String>
                <x:String>
                    ddd
                </x:String>
                <x:String>
                    eee
                </x:String>
                <x:String>
                    fff
                </x:String>
                <x:String>
                    ggg
                </x:String>
                <x:String>
                    hhh
                </x:String>
                <x:String>
                    iii
                </x:String>
                <x:String>
                    jjj
                </x:String>
                <x:String>
                    kkk
                </x:String>
                <x:String>
                    lll
                </x:String>-->
            </GridView.Items>
        </GridView>
    </Grid>
</Page>
 public sealed partial class FinalPage : Page
    {
        public FinalPage()
        {
            this.InitializeComponent();
        }

        BitmapImage clickedItem = null;

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            if (e.NavigationMode == NavigationMode.New)
            {
                UpdateLayout();
                foreach (BitmapImage item in items_GridView.Items)
                {
                    items_GridView.ScrollIntoView(item);
                    var gridviewitem = (GridViewItem)items_GridView.ContainerFromItem(item);
                    ListViewItemPresenter listpresent = (ListViewItemPresenter)VisualTreeHelper.GetChild(gridviewitem, 0);
                    Grid grid = (Grid)VisualTreeHelper.GetChild(listpresent, 0);
                    (grid.FindName("image_Grid") as Grid).CenterPoint = new Vector3((float)grid.ActualWidth / 2, (float)grid.ActualHeight / 2, 0f);
                    var shadow = grid.FindName("myShadow") as MyCompositionShadow;
                    SetupAnimations(shadow);
                    shadow.Visual.CenterPoint = new Vector3((float)(shadow.ActualWidth * .5f), (float)(shadow.ActualHeight * .5f), 0);
                }
            }
        }

        private void Border_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            var myBorderPointLight = (MyPointLight)((sender as Grid).FindName("myBorderPointLight"));
            myBorderPointLight.OffsetX = e.GetCurrentPoint(sender as Grid).Position.X;
            myBorderPointLight.OffsetY = e.GetCurrentPoint(sender as Grid).Position.Y;
        }

        private void Border_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            var myBorderPointLight = (MyPointLight)((sender as Grid).FindName("myBorderPointLight"));

            using (var _exitAnimation = myBorderPointLight.CompositionLight.Compositor.CreateVector3KeyFrameAnimation())
            {
                _exitAnimation.InsertKeyFrame(1.0f, new Vector3(150, 150, 100));
                _exitAnimation.Duration = TimeSpan.FromMilliseconds(750);
                _exitAnimation.IterationBehavior = AnimationIterationBehavior.Count;
                _exitAnimation.IterationCount = 1;
                myBorderPointLight.CompositionLight.StartAnimation("Offset", _exitAnimation);
            }

            ElementCompositionPreview.SetIsTranslationEnabled((UIElement)sender, true);
            var ContentProperties = ElementCompositionPreview.GetElementVisual((UIElement)sender).Properties;
            ContentProperties.InsertVector3("Translation", Vector3.Zero);
            var shadow = (sender as Grid).FindName("myShadow") as MyCompositionShadow;
            shadow.Visual.Scale = new Vector3(1.0f);
        }

        private void parent_Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            var content = ElementCompositionPreview.GetElementVisual((UIElement)sender);
            var compositor = content.Compositor;
            var ContentProperties = ElementCompositionPreview.GetElementVisual((UIElement)sender).Properties;
            var shadow = (sender as Grid).FindName("myShadow") as MyCompositionShadow;

            var gridviewitem = (GridViewItem)items_GridView.ContainerFromItem((sender as Grid).Tag.ToString());
            ((sender as Grid).FindName("image_Grid") as Grid).Scale = new Vector3(1.05f, 1.05f, 25.0f);
            ContentProperties.InsertVector3("Translation", new Vector3(0, 0, 25.0f));
            shadow.Visual.Scale = new Vector3(1.1f, 1.1f, 0.0f);
        }

        private void SetupAnimations(MyCompositionShadow item)
        {
            var shadow = item;
            var content = ElementCompositionPreview.GetElementVisual(item as UIElement);

            ElementCompositionPreview.SetIsTranslationEnabled((UIElement)item, true);
            var ContentProperties = ElementCompositionPreview.GetElementVisual(item as UIElement).Properties;
            ContentProperties.InsertVector3("Translation", Vector3.Zero);

            var compositor = content.Compositor;

            var implicitAnimationShadow = compositor.CreateImplicitAnimationCollection();
            var implicitAnimationVisual = compositor.CreateImplicitAnimationCollection();


            var translationAnimation = compositor.CreateVector3KeyFrameAnimation();
            translationAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            translationAnimation.Duration = TimeSpan.FromSeconds(1);
            translationAnimation.Target = "Translation";


            var shadowScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
            shadowScaleAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            shadowScaleAnimation.Duration = TimeSpan.FromSeconds(1);
            shadowScaleAnimation.Target = "Scale";




            var shadowOpacityAnimation = compositor.CreateScalarKeyFrameAnimation();
            shadowOpacityAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            shadowOpacityAnimation.Duration = TimeSpan.FromSeconds(1);
            shadowOpacityAnimation.Target = "Opacity";



            var shadowBlurAnimation = compositor.CreateScalarKeyFrameAnimation();
            shadowBlurAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
            shadowBlurAnimation.Duration = TimeSpan.FromSeconds(1);
            shadowBlurAnimation.Target = "BlurRadius";


            implicitAnimationShadow["BlurRadius"] = shadowBlurAnimation;
            implicitAnimationShadow["Opacity"] = shadowOpacityAnimation;
            implicitAnimationShadow["Scale"] = shadowScaleAnimation;

            implicitAnimationVisual["Translation"] = translationAnimation;



            content.Properties.ImplicitAnimations = implicitAnimationVisual;
            shadow.Visual.ImplicitAnimations = implicitAnimationShadow;
            shadow.DropShadow.ImplicitAnimations = implicitAnimationShadow;

        }
    }
    public static class VisualTreeHelperExtensions
    {

        public static T GetFirstDescendantOfType<T>(this DependencyObject start) where T : DependencyObject
        {
            return start.GetDescendantsOfType<T>().FirstOrDefault();
        }

        public static IEnumerable<T> GetDescendantsOfType<T>(this DependencyObject start) where T : DependencyObject
        {
            return start.GetDescendants().OfType<T>();
        }

        public static IEnumerable<DependencyObject> GetDescendants(this DependencyObject start)
        {
            var queue = new Queue<DependencyObject>();
            var count = VisualTreeHelper.GetChildrenCount(start);

            for (int i = 0; i < count; i++)
            {
                var child = VisualTreeHelper.GetChild(start, i);
                yield return child;
                queue.Enqueue(child);
            }

            while (queue.Count > 0)
            {
                var parent = queue.Dequeue();
                var count2 = VisualTreeHelper.GetChildrenCount(parent);

                for (int i = 0; i < count2; i++)
                {
                    var child = VisualTreeHelper.GetChild(parent, i);
                    yield return child;
                    queue.Enqueue(child);
                }
            }
        }

        public static T GetFirstAncestorOfType<T>(this DependencyObject start) where T : DependencyObject
        {
            return start.GetAncestorsOfType<T>().FirstOrDefault();
        }

        public static IEnumerable<T> GetAncestorsOfType<T>(this DependencyObject start) where T : DependencyObject
        {
            return start.GetAncestors().OfType<T>();
        }

        public static IEnumerable<DependencyObject> GetAncestors(this DependencyObject start)
        {
            var parent = VisualTreeHelper.GetParent(start);

            while (parent != null)
            {
                yield return parent;
                parent = VisualTreeHelper.GetParent(parent);
            }
        }

        public static bool IsInVisualTree(this DependencyObject dob)
        {
            return Window.Current.Content != null && dob.GetAncestors().Contains(Window.Current.Content);
        }

        public static Rect GetBoundingRect(this FrameworkElement dob, FrameworkElement relativeTo = null)
        {
            if (relativeTo == null)
            {
                relativeTo = Window.Current.Content as FrameworkElement;
            }

            if (relativeTo == null)
            {
                throw new InvalidOperationException("Element not in visual tree.");
            }

            if (dob == relativeTo)
                return new Rect(0, 0, relativeTo.ActualWidth, relativeTo.ActualHeight);

            var ancestors = dob.GetAncestors().ToArray();

            if (!ancestors.Contains(relativeTo))
            {
                throw new InvalidOperationException("Element not in visual tree.");
            }

            var pos =
                dob
                    .TransformToVisual(relativeTo)
                    .TransformPoint(new Point());
            var pos2 =
                dob
                    .TransformToVisual(relativeTo)
                    .TransformPoint(
                        new Point(
                            dob.ActualWidth,
                            dob.ActualHeight));

            return new Rect(pos, pos2);
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值