Question

考虑一个网格，其中两个控件彼此重叠，分别是AddControl和SelectControl。

AddControl显示一个“添加按钮”，单击该按钮将调用AddCommand。

SelectControl包含多个按钮，单击这些按钮将调用SelectCommand。

AddCommand会将控件状态设置为活动状态。

SelectCommand将基于传递给它的Command Parameter进行一些操作，然后将控件的状态设置为Initial。

初始状态定义为AddControl.Visibility =可见，SelectControl.Visibility =折叠。

活动状态定义为AddControl.Visibility =折叠，SelectControl.Visibility =可见。

到目前为止，如此之好，如此微不足道。

与UX设计人员交谈后，我们可能会建议：

淡出SelectControl和FadeIn用户的AddControl用鼠标离开SelectControl。如果用户在过渡过程中输入SelectControl，则过渡应中止。
仍然可以单击（即使已部分淡入）AddControl以立即进入活动状态。
最好甚至在转换过程中也可以单击SelectCOntrol中的按钮之一。

我尝试了使用Storyboard，MultiTriggers，EventTriggers等各种方法。有趣的效果，但不是预期的行为。

我欢迎任何有关如何实现此建议的建议（最好是在XAML中，不要使用背后的代码）。

首先，这里是视图

<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;
        }
    }

WPF的FadeIn和FadeOut控件相互重叠

0 个答案: