UWP Grid data not display in auto-refresh

Question

I am new in developing UWP desktop application. The grid cannot show data at auto-refresh stage.

I am trying to create a page with a grid which will retrieve data from database. When page is loaded, i start a timer and refresh the grid every 10 seconds. The result is good when the page contains the grid only. But if i add a commandbar on top, the grid cannot display data in the 1st refresh. The data can display at the first time when the page is loaded. Can anyone advise which part i did wrong?

code behind:

public sealed partial class DataGridPage : Page
{
    public string Titletext="";
    public DataGridViewModel ViewModel { get; } = new DataGridViewModel();

    DispatcherTimer dispatcherTimer;
    DateTimeOffset startTime;
    DateTimeOffset lastTime;
    DateTimeOffset stopTime;
    int timesTicked = 1;
    int timesToTick = 10;

    // TODO WTS: Change the grid as appropriate to your app, adjust the column definitions on DataGridPage.xaml.
    // For more details see the documentation at https://learn.microsoft.com/windows/communitytoolkit/controls/datagrid
    public DataGridPage()
    {
        InitializeComponent();
    }

    private void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        DispatcherTimerSetup();
    }

    protected override async void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        await ViewModel.LoadDataAsync();
        //if (Titletext != "")
        //{
        //    GridTitle.Text = Titletext;
        //}
    }

    public void DispatcherTimerSetup()
    {
        dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 10);
        //IsEnabled defaults to false
        //FormattingCommandBar.Content += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
        startTime = DateTimeOffset.Now;
        lastTime = startTime;
        //FormattingCommandBar.Content = "Calling dispatcherTimer.Start()";
        dispatcherTimer.Start();
        //IsEnabled should now be true after calling start
        //GridTitle.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
    }

    async void dispatcherTimer_Tick(object sender, object e)
    {
        DateTimeOffset time = DateTimeOffset.Now;
        TimeSpan span = time - lastTime;
        lastTime = time;
        await ViewModel.LoadDataAsync();
        //Time since last tick should be very very close to Interval
        //FormattingCommandBar.Content = "Running dispatcherTimer: " + ViewModel.Source.Count;
        timesTicked++;
        if (timesTicked > timesToTick)
        {
            stopTime = time;
            //FormattingCommandBar.Content = "Calling dispatcherTimer.Stop()\n";
            dispatcherTimer.Stop();
            //IsEnabled should now be false after calling stop
            //GridTitle.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
            span = stopTime - startTime;
            //GridTitle.Text += "Total Time Start-Stop: " + span.ToString() + "\n";
        }
    }
}

xaml (data can display at auto-refresh)

<Page.Content>
        <Grid x:Name="ContentArea">
            <Grid>
                    <controls:DataGrid
                    AutoGenerateColumns="False"
                    GridLinesVisibility="Horizontal"
                    ItemsSource="{x:Bind Mode=OneWay, Path=ViewModel.Source}" >
                        <controls:DataGrid.Columns>
                            <controls:DataGridTextColumn Binding="{Binding PaymentNo}" Header="Payment No." />
                            <controls:DataGridTextColumn Binding="{Binding PaymentDate}" Header="Payment Date" />
                            <controls:DataGridTextColumn Binding="{Binding Dept}" Header="Department" />
                            <controls:DataGridTextColumn Binding="{Binding PAYCD}" Header="Payee Code" />
                            <controls:DataGridTextColumn Binding="{Binding Vendor.companyName}" Header="Payee Name" />
                            <controls:DataGridTextColumn Binding="{Binding FC}" Header="F.C." />
                            <controls:DataGridTextColumn Binding="{Binding Amount}" Header="Amount"  />
                            <controls:DataGridTextColumn Binding="{Binding CountryID}" Header="Country ID" />
                        </controls:DataGrid.Columns>
                    </controls:DataGrid>

            </Grid>
        </Grid>
</Page.Content>

xaml (if stackpanel is added, data cannot display at auto-refresh)

<Page.Content>
    <StackPanel>
        <Button x:Name="ABC" Content="Options" Click="ABC_Click" ></Button>
        <Grid x:Name="ContentArea">
            <Grid>
                    <controls:DataGrid
                    AutoGenerateColumns="False"
                    GridLinesVisibility="Horizontal"
                    ItemsSource="{x:Bind Mode=OneWay, Path=ViewModel.Source}" >
                        <controls:DataGrid.Columns>
                            <controls:DataGridTextColumn Binding="{Binding PaymentNo}" Header="Payment No." />
                            <controls:DataGridTextColumn Binding="{Binding PaymentDate}" Header="Payment Date" />
                            <controls:DataGridTextColumn Binding="{Binding Dept}" Header="Department" />
                            <controls:DataGridTextColumn Binding="{Binding PAYCD}" Header="Payee Code" />
                            <controls:DataGridTextColumn Binding="{Binding Vendor.companyName}" Header="Payee Name" />
                            <controls:DataGridTextColumn Binding="{Binding FC}" Header="F.C." />
                            <controls:DataGridTextColumn Binding="{Binding Amount}" Header="Amount"  />
                            <controls:DataGridTextColumn Binding="{Binding CountryID}" Header="Country ID" />
                        </controls:DataGrid.Columns>
                    </controls:DataGrid>

            </Grid>
        </Grid>
    </StackPanel>
</Page.Content>

Answer 1

StackPanel in terms doesn't support Data Virtualization. Which means handling a large amount of data is a mess. Grid does support Data Virtualization by default that's why it does refresh.

You can go with Grid. If you still want StackPanel Try VirtualizingStackPanel

if i want to have a commandbar on top of the grid, what is the best way to do it

You could do something like this

<Page.Content>
<Grid>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="*"></RowDefinition>
  </Grid.RowDefinitions>
    <Button x:Name="ABC" Content="Options" Click="ABC_Click" ></Button>
    <Grid x:Name="ContentArea" Grid.Row="1">
    ...
    </Grid>
</Grid>
</Page.Content>