Question

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:

<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

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.

Answer 1

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.