How can I delay loading a control until after a RadioButton selection finishes changing?

dispatcher, wpf, xaml

Solution

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.

Problem

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`.

Original source

Related problems