Example

We want to display the name of the current race that comes from a JSON source on the internet.

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

[
    {
        "TimeOfDay": "2025-04-10 10:23:22",
        "Random": 0.6937257,        
        "RaceName": "Test Race"
    }
]

So we need the property called "RaceName" from the first element (index 0) or the list.

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 "RaceResult" and paste the URL from above:

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

<UserControl x:Class="AdvancedProject_400x300.FreetextLayout"
             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="Auto" />
        </Grid.RowDefinitions>
        <controls:TextElement  Foreground="{DynamicResource DefaultForeground}" Text="Current Race: " Grid.Row="0"></controls:TextElement>
        <controls:TextElement  Foreground="{DynamicResource DefaultForeground}" Text="{Binding Sources.RaceResult.Value[0].RaceName}" Grid.Row="1" FontSize="20"></controls:TextElement>
    </Grid>
</UserControl>

Import part here is the binding in the textElement's Text property: <controls:TextElement Foreground="{DynamicResource DefaultForeground}" Text="{Binding Sources.RaceResult.Value[0].RaceName}" Grid.Row="1" FontSize="20"></controls:TextElement>