wpf基础之Visibility与Opacity的区别

矫情吗；* 2022-05-14 08:34 283阅读 0赞

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

![20170424162904113][]

我们用两组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. `}`

测试结果：

![20170424163304881][]

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

![20170424163422150][]

综上：

相同点：

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

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

不同点：

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

题外：

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

[20170424162904113]: /images/20220514/935ef8f143d04e8babc3185baff2c424.png
[20170424163304881]: /images/20220514/9e186e54702c42a89ba8f99886533e54.png
[20170424163422150]: /images/20220514/fd02e589256e466299766089c03e6842.png