wpf基础之Visibility与Opacity的区别

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

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

xaml代码：

 

1. <Window x:Class="VisibilityAndOpacity.MainWindow"

2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

4. Title="MainWindow" Height="350" Width="525">

5. <Grid Margin="10">

6. <Grid.RowDefinitions>

7. <RowDefinition Height="*"/>

8. <RowDefinition Height="40"/>

9. </Grid.RowDefinitions>

10. <Grid.ColumnDefinitions>

11. <ColumnDefinition Width="*"/>

12. <ColumnDefinition Width="*"/>

13. </Grid.ColumnDefinitions>

14.  

15. <Grid x:Name="gdVis" Grid.Column="0" Grid.Row="0" Background="Green">

16. <Button x:Name="btnVis" Content="Visibility" Visibility="Visible" Background="Green" VerticalAlignment="Center" HorizontalAlignment="Center"

17. Click="btnVisTest"/>

18. </Grid>

19. <Grid x:Name="gdOpac" Grid.Column="1" Grid.Row="0" Background="Yellow">

20. <Button x:Name="btnOpac" Content="Opacity" Visibility="Visible" Background="Yellow" VerticalAlignment="Center" HorizontalAlignment="Center"

21. Click="btnOpacTest"/>

22. </Grid>

23.  

24. <Button Content="开始测试" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center"

25. Click="btnTest"/>

26. </Grid>

27. </Window>

后置代码：

 

1. public partial class MainWindow : Window

2. {

3. public MainWindow()

4. {

5. InitializeComponent();

6. }

7.  

8. private void btnVisTest(object sender, RoutedEventArgs e)

9. {

10. MessageBox.Show("你点击了Visibility测试按钮。");

11. }

12.  

13. private void btnOpacTest(object sender, RoutedEventArgs e)

14. {

15. MessageBox.Show("你点击了Opacity测试按钮。");

16. }

17.  

18. private void btnTest(object sender, RoutedEventArgs e)

19. {

20. //隐藏父容器

21. gdVis.Visibility = Visibility.Hidden;

22. gdOpac.Opacity = 0;

23.  

24. //并尝试子元素反隐藏

25. btnVis.Visibility = Visibility.Visible;

26. btnOpac.Opacity = 1;

27. }

28. }

测试结果：

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

 

综上：

相同点：

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

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

不同点：

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

题外：

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