Simple Binding Example

We want to display the name of the current race that comes 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/J6Y6115LQEVGISWVEMFNQEG7NM3LXUF4 and the content looks like this:

[
    {
        "TimeOfDay": "2025-11-28 12:34:24",
        "Random": 0.74654231,
        "RaceName": "Test Race Marathon 2",
        "StartTime": "09:50",
        "IsStarted": true
    }
]

So we need the property called "RaceName" from the first element (index 0) of 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 RaceResultSimpleBindingLayout.xaml and paste this code (this assumes you have completed the Visual Studio Projects section):

<UserControl x:Class="AdvancedProject_400x300.RaceBindingLayout"
             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" />
            <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>
        <controls:TextElement  Foreground="{DynamicResource DefaultForeground}" Text="Rae Time: " Grid.Row="2"></controls:TextElement>
        <controls:Stopwatch2Element  Foreground="{DynamicResource DefaultForeground}" IsPaused="False" StartTime="{Binding Sources.RaceResult.Value[0].StartTime}" RunningFormat="hh:mm:sS.f" StoppedFormat="hh:mm:sS.ff" Grid.Row="3" FontSize="20"></controls:Stopwatch2Element>
    </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>