如何在按鈕和包含兩個按鈕的堆棧面板之間切換可見性

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