【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就可以通杀了。