Displaying multiple controls at once

Question

I'm developing a UI with the WPF framework and MVVM. This is the grid while loading: image of the grid while displaying

This is the UI after the rendering has finished:

image of the grid when rendering is finished

So, as an example, the 3rd column isn't active and will collapse. But the user can see the whole building off the UI in the mainwindow. Every view I've got is depending on the viewmodel. But also the controls got their own viewmodel. When I take my information together in one control, WPF is getting the information and draws the whole control, for example my tablecontrol. It´s a selfmade control, that is taking data and displays the data in a grid. Because it's one control, the whole grid is loaded in the background and displayed at once. When I make my own grid, because my tablecontrol can't handle the data, every control in the grid is displayed one after one and the grid is slowly displayed on the mainwindow.

<Grid HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>  
    .
    .
    .      
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>   
    .
    .
    .    
</Grid.RowDefinitions>
    <unitControls:Label Grid.Row="1" Grid.Column="0" Text="{Binding xx}"/>
    <unitControls:Label Grid.Row="1" Grid.Column="1" Text="{Binding xx}"/>
    <unitControls:Label Grid.Row="1" Grid.Column="2" Text="{Binding xx}"/>    
    .
    .
    .
    <unitControls:Label Grid.Row="7" Grid.Column="7" Text="{Binding xx}"/>
    <unitControls:Label Grid.Row="7" Grid.Column="8" Text="{Binding xx}"/>
    <unitControls:Label Grid.Row="7" Grid.Column="9" Text="{Binding xx}"/>  
<Grid>

Is there a way to display the whole content in one view at once? I tried to manipulate the dispatcher in the viewmodel, but nothing helped.

shadow32 shadow32 · Accepted Answer · 2017-09-27T21:39:27

Try something like this:

XAML

<Window x:Class="Example.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <Button Content="Collect data" Click="OnCollectData" DockPanel.Dock="Top"/>
        <ContentControl x:Name="HostControl"/>
    </DockPanel>
</Window>

CS

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private async void OnCollectData(object sender, RoutedEventArgs e)
    {
        var data = await CollectDataAsync();
        HostControl.Content = new MyCustomGridControl(data);
    }

    private async Task<GridDataHolder> CollectDataAsync()
    {
        GridDataHolder result = null;
        await Task.Run(() =>
        {
            // Collect the logical data on the thread pool
            result = GetGridData();
        });
        return result;
    }
}

You can put the HostControl with a ProgressBar in a Grid and play with the Visibility property of the ProgressBar to improve the user experience.

Displaying multiple controls at once

1 Answers