[积跬成千]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将隐藏本元素并会对整体元素进行重新布局。