進行WPF界面設(shè)計的時候，我們希望設(shè)計的時候顯示兩個部件以方便設(shè)計，而在運行的時候，我可以控制兩個控件的顯示是互斥的，甚至可以同時顯示或者同時消失。這里顯示一個示例，顯示如何實現(xiàn)互斥的顯示。

圖1. 設(shè)計時的效果

圖2. 運行時的顯示效果1

圖3. 運行時的顯示效果2

<Window x:Class="TempCodeTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TempCodeTest"
        mc:Ignorable="d"
  
        x:Name="_this"
        DataContext="{Binding ElementName=_this}"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="{Binding PartAGridHeight}" />
            <RowDefinition Height="{Binding PartBGridHeight}" />
        </Grid.RowDefinitions>
        <Button x:Name="SwitchButton" Margin="5" Content="Switch" Click="SwitchButton_Click"/>

        <Button Content="Part A" Grid.Row="1" Background="Green"/>
        <Button Content="Part B" Grid.Row="2" Background="Red"/>

    </Grid>
</Window>

上面代碼的關(guān)鍵部分：

        <!--數(shù)據(jù)上下文的綁定-->
        x:Name="_this"
        DataContext="{Binding ElementName=_this}"

            <!--綁定Row的高度-->
            <RowDefinition Height="{Binding PartAGridHeight}" />
            <RowDefinition Height="{Binding PartBGridHeight}" />

下面的代碼實現(xiàn)了數(shù)據(jù)模型的部分

using System.ComponentModel;
using System.Windows;

namespace TempCodeTest
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }


        #region Part A Part B Switch 部件A與部件B的相互切換
        private bool _isShowingB = false;
        public bool IsShowingB
        {
            get { return _isShowingB; }
            set
            {
                _isShowingB = value;
                OnPropertyChanged(nameof(IsShowingB));
                OnPropertyChanged(nameof(PartAGridHeight));
                OnPropertyChanged(nameof(PartBGridHeight));
            }
        }

        public GridLength PartAGridHeight => IsShowingB ? new GridLength(0) : new GridLength(1, GridUnitType.Star);
        public GridLength PartBGridHeight => IsShowingB ? new GridLength(1, GridUnitType.Star) : new GridLength(0);

        #endregion

        public MainWindow()
        {
            InitializeComponent();
        }

        private void SwitchButton_Click(object sender, RoutedEventArgs e)
        {
            IsShowingB = !IsShowingB;
        }
    }
}

關(guān)鍵部分：

1. 實現(xiàn)了INotifyPropertyChanged接口；
2. #region與#endregion之間的部分；
3. SwitchButton的Click事件里切換顯示的實現(xiàn)。