【WP开发】认清“不透明度”与“可见性”的区别

这两种情况,许多朋友平时都没有注意到:

1、设置Opacity属性的值为0;

2、将Visibility属性设置为Collapsed。

不少人会简单地认为这两种情况是一样的,都是让UI元素看不见。

我告诉你:非也,非也。如果你认为这两种情况是一样的话,就出现了误解,这样在实际开发中很容易出现困惑,尤其是开发自定义控件的时候。

那么,两种情况到底有何不同? 不用着急,通过一个非常简单的例子就能知道了。

比如以下XAML:

        <Grid Width="300" Height="300">
            <Image Source="Assets/1.jpg" Stretch="UniformToFill" Tapped="OnTapped"/>
            <Border Background="Green" Opacity="0" />
        </Grid>

在Grid中有两个子对象,Image位于底层,Border覆盖在Image上,注意一定要设置Border的Background属性,这样才能使元素的内部被画刷填充,否则这个例子就没有测试意义了。设置Border的背影为绿色,比较环保。然后再把它的Opacity属性设置为0,表示它是完全透明的。

那么,这样是不是表明Border元素已经隐藏了呢。不是的,为了验证这一点,处理了Image的Tapped事件,然后在事件处理代码的方法上打一个断点。如下图。

现在运行应用程序,你会发现,无论你怎么点击屏幕上的图片,Tapped事件都不会发生,即没有进入到上面所设置的断点处。

就算你用一阳指把屏幕点碎,也不会发生Tapped事件。

这是为啥呢?

虽然Opacity属性的值为0,Border已完全透明,但并不说明它就隐藏了,实际上它还在,只是我们看不见而已,同时因为Border元素是位于Image元素之上的,即Image被Border挡住了,你刚才所点击的其实是Border元素,而不是Image元素。

现在把代码改一下:

        <Grid Width="300" Height="300">
            <Image Source="Assets/1.jpg" Stretch="UniformToFill" Tapped="OnTapped"/>
            <Border Background="Green" Visibility="Collapsed" />
        </Grid>

Visibility="Collapsed"才真正把Border元素隐藏,所以现在运行程序后,点击屏幕上的图片,Tapped事件就会引发了。

通过以上极其简单的例子,可以发现:

将Opacity属性设置为0并不是真的隐藏了UI元素,也就是说它还是被呈现了的,但前提是元素要有填充画刷,如果不填充,那么元素的内部区域不会被绘制,这样就无法比较了。

而将Visibility属性设置为Collapsed会使得元素不在图形界面上呈现,即没有被绘制,自然就不会挡住下方的Image元素,这时候,Image的Tapped事件就能够发生。

总的一句话:“不透明度”为0是看不见而已,对象仍然被绘制的;只有将Visibility属性设置为Collapsed才能使对象真正隐藏。

其实,在WPF、SL中都是如此,因为Windows很多新的UI方案都可以认为是WPF的子集。故学好WPF就可以通杀了。

原文地址:https://www.cnblogs.com/tcjiaan/p/4121374.html