# 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:&#x20;

```json
[
    {
        "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:

<figure><img src="https://2559612140-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrJ4OFsK3ODNU79IRd1WF%2Fuploads%2FoX5AJFYlUtYZjFQBUSoy%2Fimage.png?alt=media&#x26;token=17ee0cf1-3036-4d51-b97b-3dbe3e4fd935" alt="" width="375"><figcaption></figcaption></figure>

Then we create a layout named RaceResultListBindingLayout.xaml and paste this code (this assumes you have completed the [Visual Studio Projects](https://docs.dbnetsoft.com/dbnetsoft/screenspro/projects-and-configs/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" >`