Extensions in UWP Community Toolkit - FrameworkElement Extensions

概述

UWP Community Toolkit Extensions 中有一个为FrameworkElement 提供的扩展 - FrameworkElement Extensions,本篇我们结合代码详细讲解 FrameworkElement Extensions 的实现。

FrameworkElement Extensions 为 FrameworkElement 提供了一种简单的绑定实际尺寸的方式,扩展利用 EnableActualSizeBinding 来指定是否允许实时绑定实际尺寸中的 ActualWidth 和 ActualHeight。 接下来看看官方示例的截图:

Source: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/FrameworkElement

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/extensions/frameworkelementextensions

Namespace: Microsoft.Toolkit.Uwp.UI.Extensions; Nuget: Microsoft.Toolkit.Uwp.UI;

 

开发过程

代码分析

FrameworkElement Extensions 的功能实现比较简单,在 FrameworkElementExtensions.cs 类中;先看一下类的结构:

我们看到,类中定义了三个依赖属性:

  • EnableActualSizeBindingProperty - boolean,标志是否允许实际尺寸绑定;属性改变时触发 OnEnableActualSizeBindingtPropertyChanged;
  • ActualHeightProperty - double,实际尺寸的高度; 默认值 double.NaN;
  • ActualWidthProperty - double,实际尺寸的宽度;默认值 double.NaN;

而这三个依赖属性分别对应的 get 和 set 方法分别是:

  • GetEnableActualSizeBinding(obj) 和 SetEnableActualSizeBinding(obj, value) 
  • GetActualHeight(obj) 和 SetActualHeight(obj, value) 
  • GetActualWidth(obj) 和 SetActualWidth(obj, value) 

下面看一下实际绑定和 EnableActualSizeBinding 的处理代码:

 在 OnEnableActualSizeBindingtPropertyChanged(sender, args) 方法处理中,可以看到当 EnableActualSizeBinding 变为 True 时,强制刷新一次实际尺寸,且开始响应 SizeChanged 事件,处理同样是刷新实际尺寸属性;而当 EnableActualSizeBinding 变为 False 时,去掉 SizeChanged 事件的监听;

这样的结果就是,当 EnableActualSizeBinding 变为 False 时,获取到的 ActualHeight 和 ActualWidrh 一直都是变为 False 时最后一个值,不管尺寸怎么改变都不会被更新和监听;

而通过扩展设置的绑定,和直接设置 ActualHeight 和 ActualWidth 的绑定的区别就是,直接设置的方式,对于 Width 和 Height 未指定的情况绑定无效,且不会更新,而扩展的方式可以获取初始尺寸且可以实时更新;

private static void OnEnableActualSizeBindingtPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    var baseElement = sender as FrameworkElement;
    if (baseElement == null)
    {
        return;
    }

    if ((bool)args.NewValue)
    {
        // Size may have changed while this was disabled, so we force an updated once user enables it
        UpdateActualSizeProperties(baseElement, null);

        // Subscribe to event
        baseElement.SizeChanged += UpdateActualSizeProperties;
    }
    else
    {
        // Unsubscribe from event
        baseElement.SizeChanged -= UpdateActualSizeProperties;
    }
}

在下面的 UpdateActualSizeProperties(sender, args) 方法中,可以看到绑定目标的 ActualHeight 和 ActualWidth 在改变时,会实时赋值,这样绑定的属性就能得到实时的更新。

private static void UpdateActualSizeProperties(object sender, RoutedEventArgs routedEventArgs)
{
    var baseElement = sender as FrameworkElement;
    if (baseElement == null)
    {
        return;
    }

    // Update only if needed
    var currentHeight = GetActualHeight(baseElement);
    if (currentHeight != baseElement.ActualHeight)
    {
        SetActualHeight(baseElement, baseElement.ActualHeight);
    }

    // Update only if needed
    var currentWidth = GetActualWidth(baseElement);
    if (currentWidth != baseElement.ActualWidth)
    {
        SetActualWidth(baseElement, baseElement.ActualWidth);
    }
}

代码简单分析如上,大家在实际项目中可以对这个类进行扩展,比如把 Opacity,Color 等也作为可以实时绑定的值,实现方式和 ActualHeight ActualWidth 很类似,大家可以自行扩展,然后把扩展后的类提 PR 到 UWPCOmmunityToolkit Github 中。 

 

调用示例

我们创建了三个 Rectangle,第一个是绑定目标,第二和第三个去绑定第一个的实际尺寸;可以看到因为第二个红色矩形使用 ActualHeight 和 ActualWidth 直接进行绑定,所以并没有绑定到正确的值;而第三个浅蓝色矩形的初始绑定值是正确的;而在第一个矩形的尺寸随着 GridSplitter 变化时,红色矩形没有任何变化,而浅蓝色矩形会跟随变化更新尺寸;这和我们预期的结果是一致的。

<StackPanel x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="48">
    <Grid Height="300">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="100" MaxHeight="300" />
            <RowDefinition Height="11" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100" MaxWidth="800" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Grid.Row="0" extensions:FrameworkElementExtensions.EnableActualSizeBinding="True"
        Fill="Blue" Stroke="Gray" x:Name="TargetObject" StrokeThickness="1"/>

        <!--Column Grid Splitter-->
        <controls:GridSplitter Width="11" Background="Gray" GripperCursor="Default" HorizontalAlignment="Left" Grid.Column="1" 
                            ResizeDirection="Auto" ResizeBehavior="BasedOnAlignment" CursorBehavior="ChangeOnGripperHover" GripperForeground="White"/>

        <!--Row Grid Splitter-->
        <controls:GridSplitter Grid.Row="1" Background="Gray" Height="11" HorizontalAlignment="Stretch">
            <controls:GridSplitter.Element>
                <Grid>
                    <TextBlock HorizontalAlignment="Center" IsHitTestVisible="False" VerticalAlignment="Center" Text="&#xE76F;" 
                            Foreground="White" FontFamily="Segoe MDL2 Assets"/>
                </Grid>
            </controls:GridSplitter.Element>
        </controls:GridSplitter>
    </Grid>

    <Rectangle Margin="12,12" HorizontalAlignment="Left"
    Height="{Binding ElementName=TargetObject, Path=ActualHeight}"
    Width="{Binding ElementName=TargetObject, Path=ActualWidth}"
    Fill="Red" Stroke="Gray" StrokeThickness="1"/>

    <Rectangle Margin="12,12" HorizontalAlignment="Left"
    Height="{Binding ElementName=TargetObject, Path=(extensions:FrameworkElementExtensions.ActualHeight)}"
    Width="{Binding ElementName=TargetObject, Path=(extensions:FrameworkElementExtensions.ActualWidth)}"
    Fill="LightBlue" Stroke="Gray" StrokeThickness="1"/>
</StackPanel>

 

总结

到这里我们就把 UWP Community Toolkit Extensions 中的 FrameworkElement Extensions 的源代码实现过程和简单的调用示例讲解完成了,希望能对大家更好的理解和使用这个扩展有所帮助。欢迎大家多多交流,谢谢!

最后,再跟大家安利一下 UWPCommunityToolkit 的官方微博:https://weibo.com/u/6506046490大家可以通过微博关注最新动态。

衷心感谢 UWPCommunityToolkit 的作者们杰出的工作,Thank you so much, UWPCommunityToolkit authors!!!

 

转载于:https://www.cnblogs.com/shaomeng/p/8744550.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <b><span style="font-size:14px;"></span><span style="font-size:14px;background-color:#FFE500;">【Java面试宝典】</span></b><br /> <span style="font-size:14px;">1、68讲视频课,500道大厂Java常见面试题+100个Java面试技巧与答题公式+10万字核心知识解析+授课老师1对1面试指导+无限次回放</span><br /> <span style="font-size:14px;">2、这门课程基于胡书敏老师8年Java面试经验,调研近百家互联网公司及面试官的问题打造而成,从筛选简历和面试官角度,给出能帮助候选人能面试成功的面试技巧。</span><br /> <span style="font-size:14px;">3、通过学习这门课程,你能系统掌握Java核心、数据库、Java框架、分布式组件、Java简历准备、面试实战技巧等面试必考知识点。</span><br /> <span style="font-size:14px;">4、知识点+项目经验案例,每一个都能做为面试的作品展现。</span><br /> <span style="font-size:14px;">5、本课程已经在线下的培训课程中经过实际检验,老师每次培训结束后,都能帮助同学们运用面试技巧,成功找到更好的工作。</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【超人气讲师】</b></span><br /> <span style="font-size:14px;">胡书敏 | 10年大厂工作经验,8年Java面试官经验,5年线下Java职业培训经验,5年架构师经验</span><br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><b>【报名须知】</b></span><br /> <span style="font-size:14px;">上课模式是什么?</span><br /> <span style="font-size:14px;">课程采取录播模式,课程永久有效,可无限次观看</span><br /> <span style="font-size:14px;">课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化</span><br /> <br /> <br /> <span style="font-size:14px;background-color:#FFE500;"><strong>如何开始学习?</strong></span><br /> <span style="font-size:14px;">PC端:报名成功后可以直接进入课程学习</span><br /> <span style="font-size:14px;">移动端:<span style="font-family:Helvetica;font-size:14px;background-color:#FFFFFF;">CSDN 学院APP(注意不是CSDN APP哦)</span></span> </p>
<p> 需要学习Windows系统YOLOv4的同学请前往《Windows版YOLOv4目标检测实战:原理与源码解析》, </p> <p> 课程链接 https://edu.csdn.net/course/detail/29865 </p> <h3> <span style="color:#3598db;">【为什么要学习这门课】</span> </h3> <p> <span>Linux</span>创始人<span>Linus Torvalds</span>有一句名言:<span>Talk is cheap. Show me the code. </span><strong><span style="color:#ba372a;">冗谈不够,放码过来!</span></strong> </p> <p> <span> </span>代码阅读是从基础到提高的必由之路。尤其对深度学习,许多框架隐藏了神经网络底层的实现,只能在上层调包使用,对其内部原理很难认识清晰,不利于进一步优化和创新。 </p> <p> YOLOv4是最近推出的基于深度学习的端到端实时目标检测方法。 </p> <p> YOLOv4的实现darknet是使用C语言开发的轻型开源深度学习框架,依赖少,可移植性好,可以作为很好的代码阅读案例,让我们深入探究其实现原理。 </p> <h3> <span style="color:#3598db;">【课程内容与收获】</span> </h3> <p> 本课程将解析YOLOv4的实现原理和源码,具体内容包括: </p> <p> - YOLOv4目标检测原理<br /> - 神经网络及darknet的C语言实现,尤其是反向传播的梯度求解和误差计算<br /> - 代码阅读工具及方法<br /> - 深度学习计算的利器:BLAS和GEMM<br /> - GPU的CUDA编程方法及在darknet的应用<br /> - YOLOv4的程序流程 </p> <p> - YOLOv4各层及关键技术的源码解析 </p> <p> 本课程将提供注释后的darknet的源码程序文件。 </p> <h3> <strong><span style="color:#3598db;">【相关课程】</span></strong> </h3> <p> 除本课程《YOLOv4目标检测:原理与源码解析》外,本人推出了有关YOLOv4目标检测的系列课程,包括: </p> <p> 《YOLOv4目标检测实战:训练自己的数据集》 </p> <p> 《YOLOv4-tiny目标检测实战:训练自己的数据集》 </p> <p> 《YOLOv4目标检测实战:人脸口罩佩戴检测》<br /> 《YOLOv4目标检测实战:中国交通标志识别》 </p> <p> 建议先学习一门YOLOv4实战课程,对YOLOv4的使用方法了解以后再学习本课程。 </p> <h3> <span style="color:#3598db;">【YOLOv4网络模型架构图】</span> </h3> <p> 下图由白勇老师绘制 </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202006291526195469.jpg" /> </p> <p>   </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202007011518185782.jpg" /> </p>
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页