如何在按钮和包含两个按钮的堆栈面板之间切换可见性

Question

我很难弄清楚如何在三个按钮之间切换可见性。 这是场景：

• 我在用户控件上有 3 个按钮，一个Edit按钮，一个OK按钮和一个Cancel按钮。
• Ok和Cancel按钮在堆栈面板中组合在一起。
• Edit按钮是独立的。
• 我希望在按下“ Edit ”按钮时，它（“ Edit ”按钮）被隐藏，并显示包含“ Ok ”和“ Cancel ”按钮的堆栈面板。
• 当按下Cancel或Ok按钮时，它们将被隐藏，而Edit按钮将再次显示。
• 此表单上将有 7 行都非常相似，带有 label、文本框和编辑按钮。
• 是否可以仅使用几种方法来控制所有按钮/堆栈面板的可见性。
• 即，我可以使用一种编辑方法并根据文本框控件名称/绑定显示堆栈面板，而不必使用 7 种显示堆栈面板的方法、7 种确定方法和 7 种取消方法吗？

这是表单上带有“ Edit ”按钮的行：

这是带有Ok和Cancel按钮的表单行：

这是我为这一行提出的 XAML 代码：

<StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Center"
        Grid.Row="2"
        Grid.Column="0"
        Grid.ColumnSpan="4">
    <Label
        Style="{StaticResource DeviceInfoPropertyLabelStyle}">
        CONTROLLER NAME:
    </Label>
    <TextBox
        Text="{Binding ControllerName}"
        Style="{StaticResource DeviceInfoTextBoxStyle}" />
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel
            Orientation="Horizontal"
            Grid.Column="0">

            <Button
                Command="{Binding EditCommand}"
                Visibility="{Binding IsEditButtonVisible, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Collapsed}"
                Style="{StaticResource DeviceInfoEditButtonStyle}">
                Edit
            </Button>
        </StackPanel>
        <StackPanel
            x:Name="EditControllerNameStackPanel"
            Orientation="Horizontal"
            Grid.Column="0"
            Visibility="{Binding IsOkCancelButtonVisible, Converter={StaticResource BoolToVisibilityConverter}, FallbackValue=Visible}">
            <Button
                Command="{Binding OkEditCommand}"
                Style="{StaticResource DeviceInfoEditOkButtonStyle}">
                OK
            </Button>
            <Button
                Command="{Binding  CancelEditCommand}"
                Style="{StaticResource DeviceInfoEditCancelButtonStyle}">
                CANCEL
            </Button>
        </StackPanel>
    </Grid>
</StackPanel>

这是我目前拥有的 ViewModel 中的代码。 在这一点上它只是一个骨架：

public bool IsEditButtonVisible
{
    get
    {
        bool output = false;
        if (true)
        {
            return true;
        }

        return output;
    }
}

public bool IsOkCancelButtonVisible
{
    get => true;
}


[RelayCommand]
private void Edit()
{
    if (true)
    {

    } 
}

[RelayCommand]
private void OkEdit()
{

}

[RelayCommand]
private void CancelEdit()
{

}

请注意，我使用的是 MVVM 社区工具包。

让我知道是否需要提供任何其他信息。

谢谢

Answer 1

您可以只使用一个 boolean 来切换可见性。 稍微更改 BoolToVisibilityConverter 代码..

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is bool b)
        {
            if (parameter is string str && str == "Inverse")
                return b ? Visibility.Hidden : Visibility.Visible;
            return b ? Visibility.Visible : Visibility.Hidden;
        }

        return Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

编辑按钮

<Button
    Visibility="{Binding IsEditButtonVisible, Converter={StaticResource BoolToVisibilityConverter}}">

确定/取消堆栈面板

<StackPanel
    Visibility="{Binding IsEditButtonVisible, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=Inverse}">

ViewModel（抱歉我不使用 MVVM Community Toolkit）

public class ViewModel : INotifyPropertyChanged
{
    
    private bool _isEditButtonVisible;

    public bool IsEditButtonVisible
    {
        set
        {
            _isEditButtonVisible = value;
            OnPropertyChanged(nameof(IsEditButtonVisible));
        }
        get => _isEditButtonVisible;
    }
    
    private void Edit()
    {
        IsEditButtonVisible = false;
    }

    private void Ok()
    {
        IsEditButtonVisible = true;
    }

    private void Cancel()
    {
        IsEditButtonVisible = true;
    }
    
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    
    
    // other code
}

要对其他 7 个类似的组应用相同的逻辑，您必须至少有 7 个布尔值，但您只能有 3 个命令，您可以在其中将组的名称传递给命令，该命令将根据相应的组切换在传递的参数上

在视图中

<Button
    Command="{Binding OkCommand}"
    CommandParameter="group1">
    OK
</Button>

在视图模型中

private void Edit(string commandParameter)
{
    IsEdit1ButtonVisible = commandParameter != "group1";
    IsEdit2ButtonVisible = commandParameter != "group2";
    IsEdit3ButtonVisible = commandParameter != "group3";
    // etc...
}

private void Ok(string commandParameter)
{
    IsEdit1ButtonVisible = commandParameter == "group1";
    IsEdit2ButtonVisible = commandParameter == "group2";
    IsEdit3ButtonVisible = commandParameter == "group3";
    // etc...
}

private void Cancel(string commandParameter)
{
    IsEdit1ButtonVisible = commandParameter == "group1";
    IsEdit2ButtonVisible = commandParameter == "group2";
    IsEdit3ButtonVisible = commandParameter == "group3";
    // etc...
}