如何基于TextBox值绑定控件(StackPanel)的可见性

Question

我在WPF MVVM应用程序中分别有一个TextBoxTxtFruit和两个StackPanelstackPanelApple和stackPanelOrange。

这就是应该发生的事情：

• 如果CCD_；Apple"；，则CCD_ 7将可见
• 如果CCD_ 8被改变为"0"；橙色"；则显示CCD_ 9
• 如果txtFruit.Text为空或其他情况，则面板的两个Visibility都应为Collapsed

如何在视图模型中实现这一点？

<TextBox x:Name="TxtFruit" Text="{Binding CurrentFruit}"/>
<StackPanel>
<StackPanel x:Name="stackPanelApple" Orientation="Horizontal" Margin="0,0,0,20" >
<TextBox x:Name="AppleProperty1" Margin="0,0,10,0" Text="{Binding AppleProperty1}" />
<TextBox x:Name="AppleProperty2" Margin="10,0,10,0" Text="{Binding AppleProperty2}" />
</StackPanel>
<StackPanel x:Name="stackPanelOrange" Orientation="Horizontal" Margin="0,0,0,20" >
<TextBox x:Name="OrangeProperty1" Margin="0,0,10,0" Text="{Binding OrangeProperty1}" />
<TextBox x:Name="OrangeProperty1" Margin="10,0,10,0" Text="{Binding OrangeProperty2}"/>
</StackPanel>

Answer 1

在视图模型中不需要这样做。你可以用一种风格的数据触发器来解决这个问题，例如：

<Style TargetType="{x:Type StackPanel}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=TxtFruit}" Value="Apple">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>

然而，一个不太详细的变体可能是编写一个值转换器，检查绑定值和参数的相等性。如果两者相等，则返回Visible，否则返回Collapsed。

public class EqualityToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return value != null && value.Equals(parameter) ? Visibility.Visible : Visibility.Collapsed;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException();
}
}

在任何资源中创建转换器的实例，例如在应用程序资源字典中。

<local:EqualityToVisibilityConverter x:Key="EqualityToVisibilityConverter"/>

然后，您可以很容易地重用转换器，以便在没有样式的情况下绑定可见性。

<TextBox x:Name="TxtFruit" Text="{Binding CurrentFruit}"/>
<StackPanel>
<StackPanel x:Name="stackPanelApple" Orientation="Horizontal" Margin="0,0,0,20"
Visibility="{Binding Text, ElementName=TxtFruit, Converter={StaticResource EqualityToVisibilityConverter}, ConverterParameter=Apple}">
<TextBox x:Name="AppleProperty1" Margin="0,0,10,0" Text="{Binding AppleProperty1}"/>
<TextBox x:Name="AppleProperty2" Margin="10,0,10,0" Text="{Binding AppleProperty2}"/>
</StackPanel>
<StackPanel x:Name="stackPanelOrange" Orientation="Horizontal" Margin="0,0,0,20"
Visibility="{Binding Text, ElementName=TxtFruit, Converter={StaticResource EqualityToVisibilityConverter}, ConverterParameter=Orange}">
<TextBox x:Name="OrangeProperty1" Margin="0,0,10,0" Text="{Binding OrangeProperty1}"/>
<TextBox x:Name="OrangeProperty1" Margin="10,0,10,0" Text="{Binding OrangeProperty2}"/>
</StackPanel>
</StackPanel>

Answer 2

您可以在XAML视图中使用样式和触发器来完成此操作：

<TextBox x:Name="TxtFruit" Text="{Binding CurrentFruit}"/>
<StackPanel>
<StackPanel x:Name="stackPanelApple" Orientation="Horizontal" Margin="0,0,0,20" >
<TextBox x:Name="AppleProperty1" Margin="0,0,10,0" Text="{Binding AppleProperty1}" />
<TextBox x:Name="AppleProperty2" Margin="10,0,10,0" Text="{Binding AppleProperty2}" />
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=TxtFruit}" Value="Apple">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
<StackPanel x:Name="stackPanelOrange" Orientation="Horizontal" Margin="0,0,0,20" >
<TextBox x:Name="OrangeProperty1" Margin="0,0,10,0" Text="{Binding OrangeProperty1}" />
<TextBox x:Name="OrangeProperty2" Margin="10,0,10,0" Text="{Binding OrangeProperty2}"/>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=TxtFruit}" Value="Orange">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</StackPanel>