Simple List Binding

We want to display the current resullist from a JSON source on the internet (in this case from RACE RESULT).

The list can be retrieved from this URL https://api.raceresult.com/335303/4QM1IA1295PPXDOR07YNHBRXMWR3D9I1 and the content looks like this:

[
    {
        "Rank": 1,
        "Bib": 5,
        "Name": "Vondra Klaus",
        "Nation": "FRO"
    },
    {
        "Rank": 2,
        "Bib": 4,
        "Name": "Butzhammer Robert",
        "Nation": "ERI"
    },
    {
        "Rank": 3,
        "Bib": 6,
        "Name": "Bichl Daniel",
        "Nation": "ATF"
    },
    {
        "Rank": 4,
        "Bib": 2,
        "Name": "Däuber ",
        "Nation": "GER"
    },
    ...
]

First we need to add this URL known to ScreensPro. In the Sources tab click the plus button, then select HTTP Rest (Json), name it "RaceResultResults" and paste the URL from above:

Then we create a layout named RaceResultListBindingLayout.xaml and paste this code (this assumes you have completed the Visual Studio Projects section):

<UserControl x:Class="AdvancedProject_400x300.RaceResultOutputListListBinding"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:AdvancedProject_400x300"
             mc:Ignorable="d" 
               xmlns:controls="clr-namespace:Screens.Controls;assembly=Screens.Controls"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <ResourceDictionary Source="Styles.xaml"/>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <controls:TextElement  Foreground="{DynamicResource DefaultForeground}" Text="Current Results" Grid.Row="0"></controls:TextElement>
        <controls:ListElement  Foreground="{DynamicResource DefaultForeground}" Data="{Binding Sources.RaceResultResults.Value}" Grid.Row="1" FontSize="20" RowsVisible="3" RowIncrementPerChange="1" ChangeInterval="0:0:2" DataChangedDelayMode="Now" DataChangedMode="KeepPosition" DataContentChangedMode="KeepPosition" >
            <controls:ListElement.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <controls:TextElement Text="{Binding Rank}" Width="30" />
                        <controls:TextElement Text="{Binding Name}" Width="300" />
                        <controls:TextElement Text="{Binding Nation}" Width="50" />
                    </StackPanel>
                </DataTemplate>
            </controls:ListElement.ItemTemplate>

        </controls:ListElement>
    </Grid>
</UserControl>

Import part here is the binding in the ListElement's Data property: <controls:ListElement Foreground="{DynamicResource DefaultForeground}" Data="{Binding Sources.RaceResultResults.Value}" Grid.Row="1" FontSize="20" RowsVisible="3" RowIncrementPerChange="1" ChangeInterval="0:0:2" DataChangedDelayMode="Now" DataChangedMode="KeepPosition" DataContentChangedMode="KeepPosition" >