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
Categories: Silverlight
Accordion, Expander, Silverlight
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.
Hi Fallon Massey,
Added another link with the sample updated to beta2
http://cid-71b364b59919d1e8.skydrive.live.com/self.aspx/Public/blog%20files/AnimatedExpander%20beta%202.zip
Thanks
WOW, that was quick.
Thanks Lee, and I love the work you’re doing here.
Fallon.
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.
the template was not applied when it was trying to handled the callback, so modified code
this code should allow you to set the IsExpanded property
http://cid-71b364b59919d1e8.skydrive.live.com/self.aspx/Public/blog%20files/AnimatedExpander%7C52%7C6.zip
Lee, where do I change the duration of the animation? In the generic.xaml, or somewhere else?
Fallon,
you should change in generic.xaml, only the height is changed in code
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.
Fallon,
try the updated version http://cid-71b364b59919d1e8.skydrive.live.com/self.aspx/Public/blog%20files/Accordion%20updated.zip, changed how it is used, see page.xaml for sample
2. I faced the same issue when I initially wrote it couple of months back, anything below 1sec doesnt work. No Idea
Thanks
Thanks Lee.
If I figure out #2, I’ll let you know.
Thanks Fallon
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.
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
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
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
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
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;
}
jon,
Thanks for the hint
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?
did you download the zip file?
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
Connie,
Create a folder called “Themes” in your project and move the “generic.xaml” file into that.
that should fix it
Lee,
How do I “nest” these babies?
Hi,
do you want expander as one of the items?. Let me know your scenario
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
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
could you send me a sample project
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:
I dont see any xaml
oops.. my bad
the xaml does not seem to want to be posted..
{}
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
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();
}
}
excellent
thanks alot
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?
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
Hmm Tried this but cant get it to work. Could you plz help me a bit on the way
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?
Yes this is what I want
Thanks alot
here is the sample with mouseover effects
http://cid-71b364b59919d1e8.skydrive.live.com/self.aspx/Public/blog%20files/samplewithmouseovereffetcs.zip
Thanks alot man
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
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();
}
}
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?
there is a HeaderTemplate property we can use that and change the Template to use it. I have uploaded a sample. you can specify a datatemplate for the header, where you can have an image
http://cid-71b364b59919d1e8.skydrive.live.com/self.aspx/silverlight%203%20files/accordion%20latest.zip
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.
Here you can see a image of what I mean
http://iybspq.bay.livefilestore.com/y1pRKsy0PzQJeSZSJLu9uQK2k8uMkw5D-T1hTyo38mueavuTL9hHhhcsllh3WzHxyhsNLK78cYvXH12aMbaHonJ4mMaewhyAMoA/del.jpg
Hi,
it might be better to use Expander control without any header instead of HeaderedItemsControl(which is being used now).