none
Expand and Collapse in listBox RRS feed

  • Question

  • hi
    I have a ListBox that is presented like this.

    item1
    item2
    item3
    item4
    OTHER
    item5
    item6
    item7
    item8
    TOTAL
    item9

    Thanks for your help from this link (thanks :))
    I am able now  to customize the line i  which  Content is  OTHER and TOTAL.
    Now I would like to add a Expand and Collapse  function   on the line that contains the word OTHER.

    onclick ==> item5, item6, item7, item8 ==> collapsed

    2n click ==> item5, item6, item7, item8 ==> expanded

    The line that which content is  'OTHER'   can change position according to the list that is displayed.

    Is it possible to do that ??

    Thanks in advance

    Tuesday, March 3, 2015 12:43 PM

Answers

  • If "item5" is an item of the same type as "OTHER" in the same ItemsSource collection you could hide this (or these) item initially by binding the Visiblilty property of the ListBoxItem to a boolean source property of this type (.e.g. IsVisible):

    <Style TargetType="ListBoxItem">
              <Style.Triggers>
                <DataTrigger Binding="{Binding IsVisible}" Value="False">
                  <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
              </Style.Triggers>
            </Style>

    You could then for example handle the MouseLeftButtonDown event handler of the ListBoxItem and set the IsVisible source property to true to expand the these rows:

                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <EventSetter Event="MouseLeftButtonDown" Handler="lb_MouseLeftButtonDown"/>
                        <Style.Triggers>
                            ...
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>


        private void lb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ListBoxItem lbi = sender as ListBoxItem;
            YourType t = lbi.DataContext as YourType;
            t.IsVisible = true;
        }


    Note that your type must implement INotifyPropertyChanged correctly for this to work as expected. You should bind to a DataView or DataTable but you must bind to an IEnumerable<YourType> where YourType represents a row in the ListBox.

    That should give you the idea. Please don't expect anyone on the forums to write an entire application, class or method for you though. The forums are for helping solving specific issues, not for anyone else to do your work for you :)

    Please remember to close your threads by marking all helpful posts as answer and please start a new thread if you have a new question.

    You may also want to post your current code when you start a new thread if you want us to be able to help you. In the following thread, you should post the code for all of your classes, the markup of the TreeView and how you set its ItemsSource for example: https://social.msdn.microsoft.com/Forums/vstudio/en-US/87193e4a-8ff7-4af0-8e56-802d7fcddd7e/hierarchicaldatatemplate-with-menu-item?forum=wpf#87193e4a-8ff7-4af0-8e56-802d7fcddd7e

     

     

     

    Tuesday, March 3, 2015 2:48 PM

All replies

  • If "item5" is an item of the same type as "OTHER" in the same ItemsSource collection you could hide this (or these) item initially by binding the Visiblilty property of the ListBoxItem to a boolean source property of this type (.e.g. IsVisible):

    <Style TargetType="ListBoxItem">
              <Style.Triggers>
                <DataTrigger Binding="{Binding IsVisible}" Value="False">
                  <Setter Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
              </Style.Triggers>
            </Style>

    You could then for example handle the MouseLeftButtonDown event handler of the ListBoxItem and set the IsVisible source property to true to expand the these rows:

                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <EventSetter Event="MouseLeftButtonDown" Handler="lb_MouseLeftButtonDown"/>
                        <Style.Triggers>
                            ...
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>


        private void lb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ListBoxItem lbi = sender as ListBoxItem;
            YourType t = lbi.DataContext as YourType;
            t.IsVisible = true;
        }


    Note that your type must implement INotifyPropertyChanged correctly for this to work as expected. You should bind to a DataView or DataTable but you must bind to an IEnumerable<YourType> where YourType represents a row in the ListBox.

    That should give you the idea. Please don't expect anyone on the forums to write an entire application, class or method for you though. The forums are for helping solving specific issues, not for anyone else to do your work for you :)

    Please remember to close your threads by marking all helpful posts as answer and please start a new thread if you have a new question.

    You may also want to post your current code when you start a new thread if you want us to be able to help you. In the following thread, you should post the code for all of your classes, the markup of the TreeView and how you set its ItemsSource for example: https://social.msdn.microsoft.com/Forums/vstudio/en-US/87193e4a-8ff7-4af0-8e56-802d7fcddd7e/hierarchicaldatatemplate-with-menu-item?forum=wpf#87193e4a-8ff7-4af0-8e56-802d7fcddd7e

     

     

     

    Tuesday, March 3, 2015 2:48 PM
  • Thanks 

    We do not intend to have entiere application writted by another.

    we hope that our questions will be useful for someone else in the forum.

    As you said, I will give next time more details about my class and methods, so that you can help me.

    Anyway, thank you for your answers. It  help me solve many problems :)

    Tuesday, March 3, 2015 6:31 PM
  • Maybe use an Expander via a datatemplate.

    It's a headeredcontrol so it has a header and you can put anything you like in it as content.

    Very simply:

    <Expander>
      Content
    </Expander>

    That content could be a listbox which is bound to a sub collection of items.

    The Expander itself has a header as I mentioned.

    You can put "Other" in there.

    Make Other a different type to the other rows and present a collection<object>

    Then use datatemplate specific to each type to shape your data.

    The only thing is that Expander has a little round button with a chevron on it to do the expanding.

    https://msdn.microsoft.com/en-us/library/system.windows.controls.expander%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396

    You could re-template it and put the header in a toggle button which is styled to look flat if you don't like the default look.


    Hope that helps.
    Recent Technet articles: Property List Editing; Dynamic XAML

    Tuesday, March 3, 2015 7:35 PM
    Moderator