Fetching data async on page load and display it in xaml

[Feuerhamster]

I am currently building my first Windows app with the Windows App SDK and WinUI3. But I ran into some problems doing basic stuff.

I have a navigation sidebar which navigates to pages. On a page, I want to execute a function that loads some data. But the function has to be executed asynchronously, because otherwise it would block the UI for a few seconds. Then I want to display the Data in my xaml template.

But I couldn't find any tutorial on how to do this. No tutorial on how to fetch async data. No tutorial on how to display collections.

The code here is what I currently have. It does not work at all. First, the UI is not responding if I navigate to that page and then the app crashes without an exception displayed in Visual Studio.

PlaybackDevices.xaml.cs

public sealed partial class PlaybackDevices : Page
{
    public ObservableCollection<AudioControlModel> Devices = new ObservableCollection<AudioControlModel>();
    public PlaybackDevices()
    {
        this.InitializeComponent();
        this.LoadDevices();
    }

    private async void LoadDevices()
    {
        IEnumerable<CoreAudioDevice> devices = await App.CoreAudioController.GetPlaybackDevicesAsync();

        devices = devices.Where(device => device.State != DeviceState.Active).ToList();

        foreach (CoreAudioDevice device in devices)
        {
            Devices.Add(new AudioControlModel(device.InterfaceName, device.Id, DeviceIcon.Digital, device.Volume));
        }
    }

    private void Slider_VolumeChanged(object sender, AudioControlVolumeChangedEventArgs e)
    {
        App.CoreAudioController.GetDevice(e.DeviceId).Volume = e.Volume;
    }
}

PlaybackDevices.xaml

<Page
    x:Class="BetterAudioControl.Pages.PlaybackDevices"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BetterAudioControl.Pages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:controls="using:BetterAudioControl.Controls"
    mc:Ignorable="d">

    <ScrollViewer x:Name="ScrollView" Padding="16">
        <ItemsControl ItemsSource="{x:Bind Devices}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="16" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <controls:AudioControl
                        Name="{Binding Name}"
                        Icon="{Binding Icon}"
                        Id="{Binding Id}"
                        Volume="{Binding Volume}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Page>

Can someone explain me how to do it right?

[ghost1372]

I don't think your problem has anything to do with WASDK. However, you can change your code somewhat as follows.
1.Use the load event to call the functions as async and await

public PlaybackDevices()
{
    this.InitializeComponent();
    Loaded += PlaybackDevices_Loaded;
}

private void PlaybackDevices_Loaded(object sender, RoutedEventArgs e)
{
    LoadDevices();
}

2. you dont need to use foreach loop:

public ObservableCollection<AudioControlModel> Devices;

private async void LoadDevices()
{
    var devices = await App.CoreAudioController.GetPlaybackDevicesAsync();

    devices = devices.Where(device => device.State != DeviceState.Active).ToList();

    Devices = new (devices);
}

3.Make sure the x:Bind mode is OneWay

ItemsSource="{x:Bind Devices, Mode=OneWay}"

4. if you cant see any items in your view, use INotifyPropertyChanged