XAML collapse all child elements - wpf

Question

I am working on a WPF Xaml application. The app has various stackpanels (that behave like icons) that I need to change the Visibility based on certain criteria.
Question:
How can I collapse all child elements (stackpanels)?
I am collapsing each one by one in the backend in vb.net. But much rather find a cool way to do it all at once.

Answer 1

In that case you can have two options
you can achieve it through style(This will not work if your following MVVM, that is if your binding)
Create coustom control
With Style:
Write the style as below with the target type which is used to display the image
<Window.Resources>
<Style TargetType="TextBox">
<Setter Property="Visibility" Value="Collapsed"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<TextBox Height="26" Width="200" Name="text1"/>
<TextBox Height="26" Width="200" Name="text2"/>
<Button Height="26" Width="200" Click="Button_Click_2" />
</StackPanel>
</Grid>
TextBox by default will be collapsed you can make it visible based on the search in the backend code
Custom control:
This will be just a wrapper for what ever control your using to display the icon but with only one change is that the default visibility will be collapsed. Then you can make it visible which ever you want
Override hide the already existing Visibility the property with the default value collapsed

Answer 2

You can set the visibility to parent instead of setting it to each control
For example
<StackPanel>
<StackPanel Name="pane1">
<Button Height="30" Width="200" Content="one" Click="Button_Click" />
</StackPanel>
<StackPanel Name="panel2">
<Button Height="30" Width="200" Content="two" Click="Button_Click_1" />
</StackPanel>
</StackPanel>
In you back end write the logic to set the visibility for stackpanel instead of each control
private void Button_Click(object sender, RoutedEventArgs e)
{
pane1.Visibility = Visibility.Collapsed;
panel2.Visibility = Visibility.Visible;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
panel2.Visibility = Visibility.Collapsed;
pane1.Visibility = Visibility.Visible;
}
If your following mvvm then bind to the visibility property of the stack panel like below
<StackPanel>
<StackPanel Visibility="{Binding CanShowPanel1}">
<Button Height="30" Width="200" Content="one" Click="Button_Click" />
</StackPanel>
<StackPanel Visibility="{Binding CanShowPanel2}">
<Button Height="30" Width="200" Content="two" Click="Button_Click_1" />
</StackPanel>
</StackPanel>

Answer 3

Bind them using an IValueConverter implementation like BooleanToVisibilityConverter.
If that isn't good enough, you will have to do them one by one. Maybe write a custom behavior?

Answer 4

The easiest way to do that is to use IValueConverter with parameter.
<StackPanel>
<StackPanel Visibility="{Binding TheQuery,Converter={StaticResource QueryConverter,ConverterParameter="MyFirstStackPanelVisible"}}">
</StackPanel>
<StackPanel Visibility="{Binding TheQuery,Converter={StaticResource QueryConverter,ConverterParameter="MySecondStackPanelVisible"}}">
</StackPanel>
</StackPanel>
public class QueryConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
switch((string)parameter)
{
case "MyFirstStackPanelVisible"
bool result =CheckQueryCriteriaForFirstStackPanel();
return Visibility.Visible or Visibility.Collapsed;
case "MySecondStackPanelVisible"
bool result =CheckQueryCriteriaForSecondStackPanel();
return Visibility.Visible or Visibility.Collapsed;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Of course you shouldn't make CheckQueryCriteriaFor... function for every case.
This approach guarantee logic to be in one place.