WPF FadeIn и FadeOut Controls друг над другом

Question

Рассмотрим сетку с двумя элементами управления друг над другом, AddControl и SelectControl.

AddControl отображает кнопку Add, которая при нажатии вызывает AddCommand.

SelectControl содержит несколько кнопок, которые при щелчке вызовут команду SelectCommand.

AddCommand установит состояние элементов управления в активное состояние.

SelectCommand выполнит некоторое действие на основе параметра команды, переданного взатем установите для элементов управления начальное состояние.

Начальное состояние определяется как AddControl.Visibility = Visible, SelectControl.Visibility = Collapsed.

Активное состояние определяется как AddControl.Visibility = Collapsed, SelectControl.Visibility = Visible.

Пока все хорошо, тривиально.

После разговора с UXДизайнер, мы можем получить предложение:

1. Затухание AddControl и Fade В SelectControl пользователь вводит AddControl с помощью мыши.Если пользователь покидает AddControl во время выполнения перехода, переход должен прерваться.

2. Исчезновение SelectControl и FadeIn AddControl пользователя покидает SelectControl его мышью.Если пользователь вводит SelectControl во время выполнения перехода, переход должен прерваться.

3. По-прежнему можно будет щелкнуть (даже если он уже частично исчез) AddControl, чтобы немедленно ввести активныйсостояние.

4. Желательно иметь возможность щелкнуть одну из кнопок в SelectCOntrol даже во время выполнения переходов.

Я пыталсяразличные подходы с использованием раскадровок, MultiTriggers, EventTriggers и так далее.Забавные эффекты, но не ожидаемое поведение.

Я бы приветствовал любое предложение о том, как реализовать это (желательно в XAML, воздерживаясь от Code Behind).

Для начала, вот представление

<Grid Grid.Row="1" Grid.Column="1" Background="Transparent">
  <Grid x:Name="Picker" Visibility="{Binding PickerVisibility}">
    <StackPanel>
      <TextBox Margin="10 10 10 10" BorderThickness="0" TextAlignment="Center">Buttons</TextBox>
      <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
        <StackPanel Orientation="Vertical">
          <Button Width="90" Margin="10 10 10 10" Tag="1" Command="{Binding SelectCommand}" CommandParameter="{Binding Path=Tag, RelativeSource={RelativeSource Self}}">T1</Button>
          <Button Width="90" Margin="10 10 10 10" Tag="2" Command="{Binding SelectCommand}" CommandParameter="{Binding Path=Tag, RelativeSource={RelativeSource Self}}">T2</Button>
          <Button Width="90" Margin="10 10 10 10" Tag="3" Command="{Binding SelectCommand}" CommandParameter="{Binding Path=Tag, RelativeSource={RelativeSource Self}}">T3</Button>
        </StackPanel>
      </ScrollViewer>
    </StackPanel>
  </Grid>
  <Grid x:Name="AddPage" Visibility="{Binding AddPageVisibility}">
    <Button Command="{Binding AddPageCommand}">+</Button>
  </Grid>
</Grid>

и вот ViewModel:

    public class MainWindowViewModel : Observable
    {
        private Visibility _addPageVisibility;
        private Visibility _pickerVisibility;

        public MainWindowViewModel()
        {
            SetInitialState();
        }

        public Visibility AddPageVisibility
        {
            get => _addPageVisibility;
            set
            {
                _addPageVisibility = value;
                RaisePropertyChangedEvent(nameof(AddPageVisibility));
            }
        }

        public Visibility PickerVisibility
        {
            get => _pickerVisibility;
            set
            {
                _pickerVisibility = value;
                RaisePropertyChangedEvent(nameof(PickerVisibility));
            }
        }

        public DelegateCommand AddPageCommand => new DelegateCommand(OnAddPage);

        public DelegateCommand<string> SelectCommand => new DelegateCommand<string>(SelectTemplate);

        private void OnAddPage()
        {
            Debug.WriteLine($"Add Button pressed!");
            SetActiveState();
        }

        private void SelectTemplate(string param)
        {
            Debug.WriteLine($"Button {param} pressed!");
            SetInitialState();
        }

        private void SetInitialState()
        {
            AddPageVisibility = Visibility.Visible;
            PickerVisibility = Visibility.Collapsed;
        }

        private void SetActiveState()
        {
            AddPageVisibility = Visibility.Collapsed;
            PickerVisibility = Visibility.Visible;
        }
    }