Expander in silverlight

I was trying to do something like ‘Accordion’ in silverlight, but ran into issues with animating the height. I had set the ‘To ‘ value for the double animation(s) in code and still have to figure out why the rotate transform is not rotating at the center

Here is the sample updated to beta 2

Here is the sample updated to fix an issue with IsExpanded property

Advertisements

49 thoughts on “Expander in silverlight

  1. Lee, I can’t get this to work in Beta 2.

    Any chance you could take a look at it, and make the conversion?

    Thanks.

  2. Is there a way to have the expander start in the expanded state? If I set IsExpanded to true after constructing the object (in code) then I get a Null Ref exception in the IsExpandedChanged callback.

    Thanks.

  3. Lee, a couple of items.

    1. On your updated sample, after you close the first level, it loses, or possibly never had it’s ScrollableHeight set. Therefore, it is never able to open again, except to the 10 pixels you add on in code.

    2. I tried to make the expander open up faster, but no luck. No matter what I change the duration to, it still goes at the same rate… help.

  4. In your latest code, I think the +10 in IsExpandedChanged only needs to be applied to the ScrollableHeight, not to the border.ActualHeight. I seemed to be getting a double spacing on the second and subsequent expands.

  5. Richard,
    I am not seeing the same thing as you are. I know I have changed the sample few times. are you looking at the same .zip file as in comment#9. that is the latest of what I have

    Thanks
    lee

  6. Yes, I’m pretty sure I have the same code for those few lines. I think the difference is that I create my expanders and have them in the expanded state, perhaps this is why you are not seeing it?

    Regards,
    Richard

  7. Lee,

    Very nice work. I am having an issue however you may be able to help me with. I dynamically change the number of items in the expansion area by changing the ItemsSource at runtime. When I do so to an set that has been expanded at any point the expansion area does not expand to the correct size if re-expanded. So if the original expansion had 5 items on re-expansion only 5 items will show. Any ideas on where this should be addressed ?

    Thanks,
    Bob

  8. Bob,
    In the code I believe, the height of the border is set after the initial load and is not reacting to future changes of number of Items(ItemsSource). Let me take a look and will see if that can take into ItemSource changes

    Thanks

  9. Bob,
    quick fix – Adding the following in HeaderedItemsControl.cs file, should make it size accordingly.

    (note: this will not work if the Item is expanded when you are changing the Itemssource)

    protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
    base.OnItemsChanged(e);
    ChangedStoryboard = false;
    }

  10. 8) #2 To fix the duration problem, in the generic.xaml file move the “Duration” lines from the Storyboard to the DoubleAnimation line.

  11. i can’t get this to open in a browser.
    i can’t get this to open in visual studio.
    i can’t get this to open in Blend 2.

    it doesn’t support SlControls ?

    Any hint’s for us dreamweaver coders?

  12. Hi Lee,

    I have tried your accordion control with the newly released Silverlight 2. I keep having this Null reference problem. It was in HeaderedItemsControl.cs, during OnApplyTemplate(), _header was null. Any hint on how to fix this in Silverlight 2? I love to have this accordion control shown on my web app.

    Thanks,
    Connie

  13. Hi,

    Yes, the nested item is also expander.

    Am having problem. On load last item is open right? After closing it, it does not open again.

    Edu

  14. sorry for such a vague question on nesting but yes I want to add a nested expander.

    So I go

    but this causes error when it prepares each item..

    foreach (HeaderedItemsControl hec in this.Items)
    {
    hec.IsExpanded = false;
    }

    because it encounters an item which is not an hec.

    //edu

  15. Hi lee,

    Sorry it took me so long. The code I posted was from the sample project I downloaded from here. I was playing around and wondered how to nest this control. So, from your project, I edit the xaml to be like this:

  16. Hi
    is it possible to start the control with one of the HeaderedItemsControl expanded?
    Now I have to start the application and expand e.g fist item by using Acordian.SelectedIndex=0. this works and is ok, but I dont want the animation effect the first time I start my application.
    Can this be done?
    tnx

    1. Hi,
      In the function (headeredItemscontrol.cs)
      void ip_Loaded(object sender, RoutedEventArgs e)
      {
      if (IsExpanded)
      {
      border.Height = (border.Child as ScrollViewer).ScrollableHeight + 10;
      //ChangeVisualState();<– comment this line }
      }

      and modify the following function to look like this

      private static void IsExpandedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
      {
      HeaderedItemsControl h = (d as HeaderedItemsControl);
      if (h.Template != null && h.border != null)
      {
      //if (!h.ChangedStoryboard)
      //{
      ScrollViewer sv = h.border.Child as ScrollViewer;
      double height = h.border.ActualHeight;
      (h.ExpandState.Children[0] as DoubleAnimation).To = (sv.ScrollableHeight== 0? height : sv.ScrollableHeight) + 10.0;
      //h.ChangedStoryboard = true;
      //}

      h.ChangeVisualState();
      }
      }

  17. Is it possible to create a mouse over effect as well? So that when a user holds the mouse over a item this changes color?

    1. All you have to do is to add a event handler for mouse events and begin a storyboard . or it is better to use VSM

    1. sure, but will be couple of days before I can. when the mouse is over the header, you wan to change(animate) the color right?

  18. How can I remove the animation on the accordion? I just want them to open/close quick. I have tried setting the duration to 0 without luck
    hope you can help

    1. change the IsExpandedChanged method to look like this
      private static void IsExpandedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
      {
      HeaderedItemsControl h = (d as HeaderedItemsControl);
      if (h.Template != null && h.border != null)
      {
      //if (!h.ChangedStoryboard)
      //{
      ScrollViewer sv = h.border.Child as ScrollViewer;
      double height = h.border.ActualHeight;
      if (h.IsExpanded)
      h.border.Height = sv.ScrollableHeight;
      else
      h.border.Height = 0;
      //(h.ExpandState.Children[0] as DoubleAnimation).To =
      //h.ChangedStoryboard = true;
      //}

      //h.ChangeVisualState();
      }
      }

  19. Hi
    Thanks for this cool control.
    I just wonder about one thing. I do everything in codebehind and want to change the
    headeritemcontrol.Header = “Header”;
    and add a person object insted.
    This because I want the header to display
    e.g
    (image) John Nelson ENG

    Do you understand what I mean? Is this possible?

  20. Excellent. This is what I needed.
    But I have one other issue. I do not display a list in the content, but more info about the customer.
    So I want to have
    A)(img) Name Age
    —————
    B) Birth: …
    Natinality: ..

    for each item. Now the way you do it I can dynamically change the A part but not the B part.
    Is there I way I can make both dynamically?
    Now I have just written the code in the generic class witch is not good if I want to use it other places.

    1. Hi,
      it might be better to use Expander control without any header instead of HeaderedItemsControl(which is being used now).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s