[积跬成千]wpf基础之Visibility与Opacity的区别

    我们都知道在WPF中将UI元素的Visibility设为Visibility.Hidden或者Opacity值设为0时，元素都将被隐藏，那么他们作用有什么区别吗？直接上demo。

我们用两组grid+button，分别设置其Visibility和Opacity属性来测试效果，代码很简单，想知道结果的可以直接跳到最后看结论。

xaml代码：

<Window x:Class="VisibilityAndOpacity.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid x:Name="gdVis" Grid.Column="0" Grid.Row="0" Background="Green">
            <Button x:Name="btnVis" Content="Visibility" Visibility="Visible" Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center"
                    Click="btnVisTest"/>
        </Grid>
        <Grid x:Name="gdOpac" Grid.Column="1" Grid.Row="0" Background="Yellow">
            <Button x:Name="btnOpac" Content="Opacity" Visibility="Visible" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Center"
                    Click="btnOpacTest"/>
        </Grid>

        <Button Content="开始测试" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"
                Click="btnTest"/>
    </Grid>
</Window>

后置代码：

public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnVisTest(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("你点击了Visibility测试按钮。");
        }

        private void btnOpacTest(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("你点击了Opacity测试按钮。");
        }

        private void btnTest(object sender, RoutedEventArgs e)
        {
            //隐藏父容器
            gdVis.Visibility = Visibility.Hidden;
            gdOpac.Opacity = 0;

            //并尝试子元素反隐藏
            btnVis.Visibility = Visibility.Visible;
            btnOpac.Opacity = 1;
        }
    }

测试结果：

我们点击空白处的原按钮区域，发现：

综上：

相同点：

1.设置UIElement元素Visibility属性为Hidden和设置其Opacity为0，都能达到隐藏元素效果。

2..两种方法隐藏元素后将同样对其子元素生效，且无法通过子元素设置Visibility为visible或Opacity为1来达到反隐藏的效果。

不同点：

3.设置为Visibility为Hidden的元素被隐藏且无法接收输入事件，而通过设置Opacity为0隐藏的元素仍可以正常接收输入事件。

题外：

4.两种方法都只是隐藏本元素及其子元素，但不影响其他元素布局，而将Visibility设置为collapsed将隐藏本元素并会对整体元素进行重新布局。