Docs

In-depth how-to’s on PoshGUI features

WPF – Interacting with the UI – DataContext

DataContext

Data Context is a layer between your code and the UI

It is the recommended way of reading/writing data to/from the UI

It is a global object available even in new threads, allowing passing data and updating the UI in a multithreaded setup

Example: 

 

Step 1: Create a DataContext Property

Select the DataContext Panel on the Left Side Bar

Insert a property in the panel, using a JSON format
You can specify a string, array, object, or a number

It will define a property in the DataContext and assign an initial value to it

Example JSON:

{

    "WelcomeMessege" : "Hello user",

    "processList" : ["test","test2","test3"],

    "currentProcess" : {

        "name" : "test",

        "status" : "online"

    },

    "currentTab" : 0

}

Step 2: Bind a property to DataContext

Each property in the properties panel has a binding icon on the right side
You can click it and select a data context property from the list, binding it to it=

You can achieve the same by specifying the Bind in XAML Like that:

<Button Content="{Binding WelcomeMessege}" />

Arrays of values can be bound for properties like ItemsSource of Listview

Step 3: Reading and writing to the DataContext

A special $State object will be available in your code, representing the DataContext

You can update its properties like that –

$State.WelcomeMessege = "A new welcome messege"

You can read its value like that –

Write-Host $State.WelcomeMessege 

DataContext is a two-way binding, meaning if the user will update the UI, the DataContext will also be updated
For example, you can bind a Text property of an Input box and read it through $State for validation or function execution

Almost every property can be bound, like the currently selected tab or a list item

Using DataContext as Dummy Data

While designing the UI, you may want to check how it will look like when populated with data from your code.
You can use DataContext panel to fill it with data in order to check how does it look like