locked
How do I make a button click event collapse a container? RRS feed

  • Question

  • I have a window setup as a dock panel. I want a button to collapse a grid within my dock panel. What would be the best practice to do this?
    Thursday, March 4, 2010 3:31 PM

Answers

  • <Grid>
     <Grid.Style>
      <Style TargetType="{x:Type Grid}">
       <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="True">
         <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="False">
         <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
       </Style.Triggers>
      </Style>
     </Grid.Style>
    </Grid>
    This is the way that i would do it.  Unfortunatley i dont know of any good resources that will explain datatrigger.
    Thursday, March 4, 2010 4:10 PM

All replies

  • That depends on whether or not you want to do it in the Xaml or the view? 

    If you want to do it in the Xaml i would suggest using a togglebutton, and setting up a datatrigger in the grid style the changes the grid visibility to collapsed when the ToggleButton IsChecked = true, and to Visible when ToggleButton IsChecked = False.

    If you want to do it in the view i will need to know what language you are using?
    Thursday, March 4, 2010 3:39 PM
  • Doing it in Xaml is fine. I already have the button set as a toggle button. How do I setup a datatrigger? Or where can I go to read more about them? Thanks for the quick response.
    Thursday, March 4, 2010 3:51 PM
  • <Grid>
     <Grid.Style>
      <Style TargetType="{x:Type Grid}">
       <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="True">
         <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding ElementName=ToggleButton, Path=IsChecked}" Value="False">
         <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
       </Style.Triggers>
      </Style>
     </Grid.Style>
    </Grid>
    This is the way that i would do it.  Unfortunatley i dont know of any good resources that will explain datatrigger.
    Thursday, March 4, 2010 4:10 PM