Answered by:
Accordion Item IsBusy

Question
-
Hi,
On the SelectionChanged event I wish to set a busy indicator in the ItemTemplate so that the user gets instant feedback while waiting for the Accordion to expand.
The reason is based on the item they select the ContentTemplate has to do some work in the viewmodel that takes ~3sec.
I have a busyindicator binding to the datacontext of the accordion but I need to change the property to true while the viewmodel is doing it's thing.
Any ideas?
Cheers
J
Friday, December 18, 2015 9:30 AM
Answers
-
The busy indicator disables it's contents whilst isbusy is true.
That means you probably want to put it inside the accordion but around the contents.
Assuming this 3 second delay is as the viewmodel goes and gets the data to be displayed in the accordion:
<toolkit:Accordion> <toolkit:AccordionItem Header="Some Stuff"> <Grid> <toolkit:BusyIndicator IsBusy="{Binding IsBusy}"> <ListBox or whatever/> </toolkit:BusyIndicator> </ListBox> </Grid> </toolkit:AccordionItem> </toolkit:AccordionItem> </toolkit:Accordion>
Your viewmodel would initially have IsBusy set to true.
As you expand you go get your data.
That comes back from your service or whatever supplies it.
Fill an observable collection or whatever you're using to present it's results to the view.
Once you have that data there then set IsBusy false and the raise property change notification on both isbusy and the data properties.
The busy indicator will disappear, your listbox ( or whatever) will be enabled, your data appear in the accordion item.
- Proposed as answer by Weiwei CaiModerator Friday, December 25, 2015 9:46 AM
- Marked as answer by Weiwei CaiModerator Monday, December 28, 2015 3:04 AM
Monday, December 21, 2015 1:41 PM
All replies
-
Hi greengumby2701,
Do you mean you want to add a busy indicator when the accordion menu open its items?
Please try add your accordion menu in BusyIndicator control as below XAML code shows.
<toolkit:BusyIndicator HorizontalAlignment="Center" VerticalAlignment="Center" Name="busyIndicator" IsBusy="False"> <toolkit:Accordion Name="Test" Height="138" HorizontalAlignment="Left" SelectedItemsChanged="Test_SelectedItemsChanged" VerticalAlignment="Top" Width="151" SelectionSequence="CollapseBeforeExpand" SelectionMode="ZeroOrOne"> <toolkit:AccordionItem Content="Level 1 Content" Header="Level 1" /> <toolkit:AccordionItem Content="Level 1 Item" Header="Level 1" /> </toolkit:Accordion> </toolkit:BusyIndicator>
Then add following code in accordion menu's selectionchanged event which let menu waiting a while when load items. The waiting time is based on your application.
private void Test_SelectedItemsChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) { busyIndicator.IsBusy = true; //busyIndicator.BusyContent = "Fetching Data..."; ThreadPool.QueueUserWorkItem((state) => { Thread.Sleep(3 * 1000); Dispatcher.BeginInvoke(() => busyIndicator.IsBusy = false); }); }
Best Regards,
WeiweiMonday, December 21, 2015 11:22 AMModerator -
The busy indicator disables it's contents whilst isbusy is true.
That means you probably want to put it inside the accordion but around the contents.
Assuming this 3 second delay is as the viewmodel goes and gets the data to be displayed in the accordion:
<toolkit:Accordion> <toolkit:AccordionItem Header="Some Stuff"> <Grid> <toolkit:BusyIndicator IsBusy="{Binding IsBusy}"> <ListBox or whatever/> </toolkit:BusyIndicator> </ListBox> </Grid> </toolkit:AccordionItem> </toolkit:AccordionItem> </toolkit:Accordion>
Your viewmodel would initially have IsBusy set to true.
As you expand you go get your data.
That comes back from your service or whatever supplies it.
Fill an observable collection or whatever you're using to present it's results to the view.
Once you have that data there then set IsBusy false and the raise property change notification on both isbusy and the data properties.
The busy indicator will disappear, your listbox ( or whatever) will be enabled, your data appear in the accordion item.
- Proposed as answer by Weiwei CaiModerator Friday, December 25, 2015 9:46 AM
- Marked as answer by Weiwei CaiModerator Monday, December 28, 2015 3:04 AM
Monday, December 21, 2015 1:41 PM -
Hi Andy,
Many thanks for your reply.
After attempting what you suggested I found that the viewmodel was not actually the blocker...
In my contenttemplate I have a RadRichTextBox which even when not bound seems to be the issue. I used JetBrains to try and get to the root cause which appears to be internal methods.
Is there a way I can fire an event before the animation starts to set IsBusy and then after the animation has completed set IsBusy false.
It seems that the SelectionChanged event fires after the fact...
Cheers
J
Tuesday, February 2, 2016 9:15 AM -
The busy indicator animation runs whilst you tell it to.
You set IsBusy true and the animation runs.
You set IsBusy false and the animation stops and the thing disappears.
Unless you're talking about some other animation.
If so then you could get a reference to that, handle it's completed event and set IsBusy false on your busy indicator.
- Edited by Andy ONeill Tuesday, February 2, 2016 12:44 PM
Tuesday, February 2, 2016 12:43 PM