Trying to set a StackPanel Visibility with Binding if 1 or more other StackPanels are now visible

Question

I have a Grid with StackPanel objects.

The panel on the right has 4 vertical ToggleButton objects.

The 4 respective StackPanel objects are using Binding for the Visbility. Example:

<StackPanel x:Name="panelMaterialAndSettings" Grid.Row="3" Background="WhiteSmoke" Margin="2" 
            Visibility="{Binding IsChecked, ElementName=buttonMaterialAndSettings, Converter={StaticResource BoolToVis}, FallbackValue=Collapsed}">

It works great. The problem I can't get my head around is the parent StackPanel. That also needs to bind the Vibility property but it shoudl only return true if 1 or more of the 4 child panels are now visible.

I can do everything with manual behind code if I can't fix it.

Or, it could check the 4 ToggleButtons. But I am failing.

Markup:

<Grid Grid.Row="1" Grid.RowSpan="4" Grid.Column="2" Margin="2,0,2,2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="panelExtraFeatures" Visibility="Collapsed" MinWidth="500" Grid.Column="0">
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="{DynamicResource {x:Static SystemColors.AppWorkspaceColorKey}}" Offset="1"/>
            </LinearGradientBrush>
        </StackPanel.Background>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <StackPanel x:Name="panelStudentPicker" Grid.Row="0" Background="WhiteSmoke" Margin="2,2,2,10" <StackPanel x:Name="panelStudentPicker" Grid.Row="0" Background="WhiteSmoke" Margin="2,2,2,10"
                            Visibility="{Binding IsChecked, ElementName=buttonStudentPicker, Converter={StaticResource BoolToVis}, FallbackValue=Collapsed}">
                <Label Content="Student Picker" Background="LightSkyBlue" />
                <Label>Panel 1</Label>
                <Label>Panel 1</Label>
                <Label>Panel 1</Label>
                <Label>Panel 1</Label>
            </StackPanel>
            <StackPanel x:Name="panelDemonstrationPicker" Grid.Row="1" Background="WhiteSmoke" Margin="2,2,2,10"
                        Visibility="{Binding IsChecked, ElementName=buttonDemonstrationPicker, Converter={StaticResource BoolToVis}, FallbackValue=Collapsed}">
                <Label  Content="DemonStration Picker" Background="LightSkyBlue" />
                <Label>Panel 2</Label>
                <Label>Panel 2</Label>
                <Label>Panel 2</Label>
                <Label>Panel 2</Label>
            </StackPanel>
            <StackPanel x:Name="panelAssignmentHistory" Grid.Row="2" Background="WhiteSmoke" Margin="2,2,2,10"
                        Visibility="{Binding IsChecked, ElementName=buttonAssignmentHistory, Converter={StaticResource BoolToVis}, FallbackValue=Collapsed}">
                <Label  Content="Assignment History" Background="LightSkyBlue" />
                <Label>Panel 3</Label>
                <Label>Panel 3</Label>
                <Label>Panel 3</Label>
                <Label>Panel 3</Label>
            </StackPanel>
            <StackPanel x:Name="panelMaterialAndSettings" Grid.Row="3" Background="WhiteSmoke" Margin="2" 
                        Visibility="{Binding IsChecked, ElementName=buttonMaterialAndSettings, Converter={StaticResource BoolToVis}, FallbackValue=Collapsed}">
                <Label  Content="Material and Settings" Background="LightSkyBlue" />
                <GroupBox Header="Treasures From God's Word:" Margin="2">
                    <StackPanel HorizontalAlignment="Stretch">
                        <Label>Bible Reading:</Label>
                        <TextBox/>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="Apply Yourselves To The Field Ministry" Margin="2">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">Student Assignment #1:</Label>
                        <ComboBox Grid.Row="1" Grid.Column="0" IsEditable="True" SelectedIndex="0" Margin="2">
                            <ComboBoxItem Content="Initial Call"/>
                            <ComboBoxItem Content="Return Visit"/>
                            <ComboBoxItem Content="Bible Study"/>
                        </ComboBox>
                        <TextBox Grid.Row="1" Grid.Column="1"/>
                        <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">Student Assignment #2:</Label>
                        <ComboBox Grid.Row="3" Grid.Column="0" IsEditable="True" SelectedIndex="1" Margin="2">
                            <ComboBoxItem Content="Initial Call"/>
                            <ComboBoxItem Content="Return Visit"/>
                            <ComboBoxItem Content="Bible Study"/>
                        </ComboBox>
                        <TextBox Grid.Row="3" Grid.Column="1"/>
                        <Label Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2">Student Assignment #3:</Label>
                        <ComboBox Grid.Row="5" Grid.Column="0" IsEditable="True" SelectedIndex="2" Margin="2">
                            <ComboBoxItem Content="Initial Call"/>
                            <ComboBoxItem Content="Return Visit"/>
                            <ComboBoxItem Content="Bible Study"/>
                        </ComboBox>
                        <TextBox Grid.Row="5" Grid.Column="1"/>
                    </Grid>
                </GroupBox>
            </StackPanel>
        </Grid>
    </StackPanel>
    <StackPanel Grid.Column="1" Margin="2,0,2,2">
        <StackPanel.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="{DynamicResource {x:Static SystemColors.ActiveCaptionColorKey}}"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </StackPanel.Background>

        <ToggleButton x:Name="buttonStudentPicker" Content="Student Picker" HorizontalAlignment="Right" Margin="2,10,2,10" BorderThickness="0,5,0,0" Background="{x:Null}">
            <ToggleButton.LayoutTransform>
                <RotateTransform Angle="90"/>
            </ToggleButton.LayoutTransform>
        </ToggleButton>
        <ToggleButton x:Name="buttonDemonstrationPicker" Content="Demonstrations Picker" HorizontalAlignment="Right" Margin="2,2,2,10" BorderThickness="0,5,0,0" Background="{x:Null}">
            <ToggleButton.LayoutTransform>
                <RotateTransform Angle="90"/>
            </ToggleButton.LayoutTransform>
        </ToggleButton>
        <ToggleButton x:Name="buttonAssignmentHistory" Content="Assignment History" HorizontalAlignment="Right" Margin="2,2,2,10" BorderThickness="0,5,0,0" Background="{x:Null}">
            <ToggleButton.LayoutTransform>
                <RotateTransform Angle="90"/>
            </ToggleButton.LayoutTransform>
        </ToggleButton>
        <ToggleButton x:Name="buttonMaterialAndSettings" Content="Material and Settings" HorizontalAlignment="Right" Margin="2" BorderThickness="0,5,0,0" Background="{x:Null}">
            <ToggleButton.LayoutTransform>
                <RotateTransform Angle="90"/>
            </ToggleButton.LayoutTransform>
        </ToggleButton>
    </StackPanel>

</Grid>

Have you tried creating another converter that takes the control element as the binding source and then access each of the buttons to see if ANY are visible or not? Only other way I see to do it is with a multi binding converter where you pass each button in to check visibility in the IMultiValueConverter implementation. Are you trying to avoid any code behind at all and do entirely in XAML? — David Glass, Jun 20 '16 at 18:14
@DavidGlass Thanks for the suggestion. With someone else's support I was able to come up with a solution. Thank you. — Andrew Truckle, Jun 20 '16 at 18:37
This is basically the same as the marked duplicate. The only difference being the specific properties involved. But this is the same answer as for any question of the form "how do I bind two or more source properties to a single target property?", e.g. "how do I bind four `IsChecked` properties to the single `Visibility` property?", as you are asking here. — Peter Duniho, Jun 20 '16 at 19:52
See also posts like https://stackoverflow.com/questions/15900255/can-you-bind-the-visibility-of-a-groupbox-to-the-visibility-of-its-children, https://stackoverflow.com/questions/29094144/how-do-i-collapse-parent-content-if-all-children-are-collapsed, and https://stackoverflow.com/questions/3881097/best-way-to-do-a-boolean-or-to-visibility, which provide other relevant advice (including some solutions similar to the `MultiDataTrigger` approach you're using here...which is also fine, by the way). — Peter Duniho, Jun 20 '16 at 19:57
@PeterDuniho I did a lot of searching. Did not come up with them. Thanks! — Andrew Truckle, Jun 20 '16 at 20:10
It's a lot easier to find something once you know what you're looking for. :) — Peter Duniho, Jun 20 '16 at 20:59

score 0 · Answer 1 · answered Jun 20 '16 at 18:30

Someone else brought to my attention about MultiDataTrigger.

Thus I was able to find a good resource on the subject.

I was able to come up with the following:

<StackPanel.Style>
    <Style TargetType="StackPanel">
        <Setter Property="Visibility" Value="Visible" />
        <Style.Triggers>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding ElementName=buttonStudentPicker, Path=IsChecked}" Value="False" />
                    <Condition Binding="{Binding ElementName=buttonDemonstrationPicker, Path=IsChecked}" Value="False" />
                    <Condition Binding="{Binding ElementName=buttonAssignmentHistory, Path=IsChecked}" Value="False" />
                    <Condition Binding="{Binding ElementName=buttonMaterialAndSettings, Path=IsChecked}" Value="False" />
                </MultiDataTrigger.Conditions>
                <Setter Property="Visibility" Value="Collapsed" />
            </MultiDataTrigger>
        </Style.Triggers>
    </Style>
</StackPanel.Style>

Trying to set a StackPanel Visibility with Binding if 1 or more other StackPanels are now visible

1 Answers1