[英]How to Toggle Visibility Between a Button and a Stack Panel Containing Two Buttons
I am having difficulty figuring out how to toggle the visibility between three buttons.我很难弄清楚如何在三个按钮之间切换可见性。 Here is the scenario:
这是场景:
Edit
button, an OK
button, and a Cancel
button.Edit
按钮,一个OK
按钮和一个Cancel
按钮。Ok
and Cancel
buttons are grouped together in a stack panel. Ok
和Cancel
按钮在堆栈面板中组合在一起。Edit
button is by itself. Edit
按钮是独立的。Edit
button is pressed, that it (the Edit
button) is hidden and the stack panel containing the Ok
and Cancel
buttons are shown.Edit
”按钮时,它(“ Edit
”按钮)被隐藏,并显示包含“ Ok
”和“ Cancel
”按钮的堆栈面板。Cancel
or Ok
buttons are pressed, they are hidden, and the Edit
button is shown again.Cancel
或Ok
按钮时,它们将被隐藏,而Edit
按钮将再次显示。 Here is the line on the form with the Edit
button:这是表单上带有“
Edit
”按钮的行:
And here is the line on the form with the Ok
and Cancel
buttons:这是带有
Ok
和Cancel
按钮的表单行:
Here is the XAML code that I've come up with for this line:这是我为这一行提出的 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>
Here is the code in the ViewModel that I have so far.这是我目前拥有的 ViewModel 中的代码。 It's only a skeleton at this point:
在这一点上它只是一个骨架:
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()
{
}
Note that I am using the MVVM Community Toolkit.请注意,我使用的是 MVVM 社区工具包。
Let me know if I need to provide any additional information.让我知道是否需要提供任何其他信息。
Thanks谢谢
You can use just one boolean to toggle the visibility.您可以只使用一个 boolean 来切换可见性。 Change BoolToVisibilityConverter code a bit..
稍微更改 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();
}
}
Edit button编辑按钮
<Button
Visibility="{Binding IsEditButtonVisible, Converter={StaticResource BoolToVisibilityConverter}}">
OK/Cancel stackpanel确定/取消堆栈面板
<StackPanel
Visibility="{Binding IsEditButtonVisible, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter=Inverse}">
ViewModel (sorry I don't use MVVM Community Toolkit) 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
}
To apply the same logic over the other 7 similar groups, you must have at least 7 booleans, but you can have 3 commands only, where you can pass the name of the group to the command, and the command will toggle the appropriate group based on the passed parameter要对其他 7 个类似的组应用相同的逻辑,您必须至少有 7 个布尔值,但您只能有 3 个命令,您可以在其中将组的名称传递给命令,该命令将根据相应的组切换在传递的参数上
In View在视图中
<Button
Command="{Binding OkCommand}"
CommandParameter="group1">
OK
</Button>
In ViewModel在视图模型中
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...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.