> For the complete documentation index, see [llms.txt](https://docs.dbnetsoft.com/dbnetsoft/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dbnetsoft.com/dbnetsoft/screenspro/sources/examples/simple-binding-example.md).

# 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*](https://api.raceresult.com/335303/J6Y6115LQEVGISWVEMFNQEG7NM3LXUF4) and the content looks like this: 

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

<figure><img src="/files/oFis9pgBrTWf5zarv2OK" alt="" width="375"><figcaption></figcaption></figure>

Then we create a layout named RaceResultSimpleBindingLayout.xaml and paste this code (this assumes you have completed the [Visual Studio Projects](/dbnetsoft/screenspro/projects-and-configs/visual-studio-projects.md) 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>`