Search code examples
c#wpfuser-interfacemvvmstyles

StackPanel Collapsed and Visible on Button Click


I am trying to show one collapsed stackpanel on button click, but I'm having problems so I tried reverse my thoughts and I was able to collapse an visible stackpanel. But unfortunately I was unable to implement the behavior I want, show an collapsed stack panel on button click. To the code :D

XAML

<Button x:Name="sentButton" Content="Add Friend" Style="{DynamicResource FlatButtonStyle}" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
    <StackPanel Style="{DynamicResource stackCollapsed}" Visibility="Collapsed">
        <Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
        <StackPanel Orientation="Horizontal" Margin="26,0,0,0">
            <Label Content="Enter your friend's email" Width="222" Height="25" />
            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}" Style="{DynamicResource MyTextBox}" x:Name="textBoxEmail" Width="298"/>
            <Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Style="{DynamicResource FlatButtonStyle}" Margin="20,0,0,0"/>
        </StackPanel>
    </StackPanel>

Styles

<!-- Style Collapsed-->
<Style x:Key="stackCollapsed" TargetType="StackPanel">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=sentButton,Path=IsPressed}" Value="true">
            <Setter Property="StackPanel.Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Solution

  • Instead of Button use ToggleButton and bind StackPanel.Visibility to ToggleButton.IsChecked property via BooleanToVisibilityConverter converter

    <ToggleButton x:Name="sentButton" Content="Add Friend" Margin="493,0,0,0" HorizontalAlignment="Left" Width="106"/>
    <StackPanel Visibility="{Binding ElementName=sentButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
        <Label Content="Invite Friends" FontWeight="Bold" Margin="0,0,477,0" Height="32" />
        <StackPanel Orientation="Horizontal" Margin="26,0,0,0">
            <Label Content="Enter your friend's email" Width="222" Height="25" />
            <TextBox Text="{Binding Email, UpdateSourceTrigger=PropertyChanged}"  x:Name="textBoxEmail" Width="298"/>
            <Button x:Name="button1" Content="Send" Command="{Binding AddCommand}" Width="77" Margin="20,0,0,0"/>
        </StackPanel>
    </StackPanel>
    

    where converter is defined as below

    <Window.Resources>
        <ResourceDictionary>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
        </ResourceDictionary>
    </Window.Resources>