5

I have a ListBox that is styled to use RadioButtons, and changing the SelectedItem also changes the UserControl displayed in a ContentControl below it. The application looks like this:

Mockup of app

<ListBox ItemsSource="{Binding AvailableViewModels}"
         SelectedItem="{Binding SelectedViewModel}"
         Style="{StaticResource RadioButtonListBoxStyle}" />

<ContentControl Content="{Binding SelectedViewModel}" />

My problem is the UserControls each contain a customized Grid control (Telerik's RadGridView), which has a noticeable delay when loading due to the amount of data it contains.

I am setting the ItemsSource binding in the Loaded event after the Grid loads to prevent the UI from locking up while the Grid loads, however no matter how I try to run this, the RadioButtons still reflect the delay while loading, which gives the illusion of a frozen UI

Screenshot of radio buttons while loading

I have tried using the lowest possible DispatcherPriority for setting the binding, but it doesn't seem to make a difference.

XAML:

<telerik:RadGridView x:Name="MyGrid" Loaded="MyGrid_Loaded" Unloaded="MyGrid_Unloaded">
     <!--....-->
</telerik:RadGridView>

C#:

private void MyGrid_Loaded(object sender, RoutedEventArgs e)
{
    this.Dispatcher.BeginInvoke(DispatcherPriority.SystemIdle,
        new Action(delegate()
    {
        BindingOperations.SetBinding(
            MyGrid,
            RadGridView.ItemsSourceProperty,
            new Binding("ViewModelProperty")
        );
    }));
}

private void MyGrid_Unloaded(object sender, RoutedEventArgs e)
{
    MyGrid.ItemsSource = null;
}

It should be noted that the very first time each UserControl loads, it loads just fine with the RadioButton selection changing right away, and the Grid loading a few seconds later. Its only switching away from a UserControl and going back again that causes the RadioButtons to pause while getting selected.

Does anyone have any idea about what is causing the UI to appear frozen when switching Views, or how to solve it?

Edit

I created a small reproduction of the problem, and found it only happens when I use RadioButtons for my ListBox items. Using a regular ListBox does not cause the same delay in selection behavior.

XAML:

<Window.Resources>

    <!-- Need two separate DataTemplates -->
    <DataTemplate DataType="{x:Type local:Test}">
        <StackPanel>
            <TextBlock Text="Test" />
            <TextBlock Margin="10" Loaded="TextBlock_Loaded" />
            <TextBlock Text="Test" />
        </StackPanel>
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:Test2}">
        <StackPanel>
            <TextBlock Text="Abc" />
            <TextBlock  Margin="10" Loaded="TextBlock_Loaded" />
            <TextBlock Text="Abc" />
        </StackPanel>
    </DataTemplate>

    <Style x:Key="RadioButtonListBoxStyle" TargetType="{x:Type ListBox}">
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Cycle" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="{x:Type ListBoxItem}" >
                    <Setter Property="Margin" Value="2, 2, 12, 2" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border Background="Transparent">
                                    <RadioButton
                                            Content="{TemplateBinding ContentPresenter.Content}" VerticalAlignment="Center"
                                            ContentTemplate="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Path=ItemTemplate}"
                                            IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<StackPanel>
    <ListBox x:Name="TestListBox"
             ItemsSource="{Binding Test}"
             Style="{StaticResource RadioButtonListBoxStyle}">

        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="Option" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    <ContentControl Content="{Binding ElementName=TestListBox, Path=SelectedItem}" />
</StackPanel>

C#:

private void TextBlock_Loaded(object sender, RoutedEventArgs e)
{
    this.Dispatcher.BeginInvoke(DispatcherPriority.ContextIdle,
        new Action(delegate()
        {
            System.Threading.Thread.Sleep(1000);
            ((TextBlock)sender).Text = "Delay Loaded Test";
        }));
}

Test is simply an ObservableCollection<ITest>, which contains both Test and Test2 objects. The delay only occurs when switching between two different objects because a new DataTemplate is drawn instead of re-using the existing DataTemplate.

Rachel
  • 130,264
  • 66
  • 304
  • 490
  • Does your output window gets spammed with lots of binding errors / informations ? – franssu Aug 21 '12 at 13:11
  • @franssu No, I don't get any errors in the output window. I added some code to my question that will reproduce the problem in a test environment though. – Rachel Aug 21 '12 at 13:16
  • Is it possible that you use a VirtualizingStackPanel instead of StackPanel as ItemsPanelTemplate for your ListBox? Maybe the virtualization can speed up things – Jehof Aug 21 '12 at 13:28
  • @Jehof The `UserControls` get loaded immediately with no delay, so I don't think that's the problem. The delay only occurs in the selection behavior of the `RadioButtons`. Also, I think `ListBoxes` use a `VirtualizingStackPanel` by default anyways. – Rachel Aug 21 '12 at 13:33
  • Your RadioButtonListBoxStyle uses a normal StackPanel. Does the "RadioButtonListBox" only contain some few items? – Jehof Aug 21 '12 at 13:38
  • @Jehof Sorry didn't notice that, yes it only contains 3 items – Rachel Aug 21 '12 at 13:38
  • @Jehof Yes, I have tried that too. If you look at my sample code to reproduce the problem you'll see the `Unloaded` event isn't even there. – Rachel Aug 21 '12 at 13:46

1 Answers1

4

The problem with using the dispatcher and some low priority is that there is no real guarantee of when you code will execute. You want to ensure that the slow-running code is executed after the UI updates. A can think of a pretty hack way to do this ...

DispatcherTimer timer = new DispatcherTimer();
timer.Interval = Timespan.FromMilliseconds(100);
timer.Tick += (s, e2) =>
{
  // update your binding
  BindingOperations.SetBinding(
        MyGrid,
        RadGridView.ItemsSourceProperty,
        new Binding("ViewModelProperty")
    );

  timer.Stop();
};
timer.Start();

The above creates a single 'tick' timer that executed after 100 milliseconds.

ColinE
  • 68,894
  • 15
  • 164
  • 232
  • I'm looking at the answer [here](http://stackoverflow.com/a/1746975/302677), which suggests that the Measure/Arrange passes are done first, then the Loaded event gets fired, and finally the visual rendering occurs. I suspect `LayoutUpdated` occurs in the Measure/Arrange passes, but this may work if I can find an event that occurs after the visual rendering occurs. – Rachel Aug 21 '12 at 13:30
  • Sadly the same problem occurs with that event too. The code actually locks up the entire application until the Grid finishes loading without a Dispatcher call in there, and if I put run the binding with the Dispatcher I get the same behavior as I have now: the `UserControl` loads instantly, but the selection behavior is delayed until after the Grid loads. – Rachel Aug 21 '12 at 13:45
  • 1
    @Rachel bother. Last idea, create a DispatcherTimer with a short interval, 50milliseconds for example, then update your binding the first time it fires. It's a shame that such hacky solutions are required! – ColinE Aug 21 '12 at 13:55
  • A `DispatcherTimer` does indeed make it work without the delay! And I agree, its a shame that an artificial delay is needed to make this work correctly. If you update your answer with that, I'll accept it providing nobody can post anything better (I'll change my -1 to a +1 too. Sorry about that, I only downvoted to counter an upvote so this would stay on the unanswered list since your answer didn't actually fix my problem at the time). Thank you so much for your help with this :) – Rachel Aug 21 '12 at 14:03
  • @Rachel *phew* glad I finally found a solution. Answer updated, it woudl be great if you could accept :-( – ColinE Aug 21 '12 at 15:01
  • Thanks Colin :) I also used 400ms for the timer instead of 100ms since the `RadioButton` selection animation is longer than 100ms – Rachel Aug 21 '12 at 15:04