# Visual Studio Projects

The built-in designer can be used for editing simple layout files. Advanced users can use Visual Studio (available in the free Community edition) to create a project that has many advantages:

* Styles 
  * E.g. colors and fonts can be defined in an additional resource style file and be changed globally
  * Common place to put reusable items
* Designer
  * Layouts can be designed both visually and in code, which provides much more flexibility
* Bindings
  * WPF (and therefore ScreensPro) work a lot with bindings. Bindings can be used to bind an element's property to another settings
  * E.g. a HTTP JSON source can be defined and an element's Text property can be bound to a property of the JSON file

## Video Tutorial

{% embed url="<https://youtu.be/2sW44HOB-3k>" %}
Video demonstrating the required steps
{% endembed %}

## Install Visual Studio

* Download Visual Studio Community from [visualstudio.com](http://www.visualstudio.com)&#x20;
* Select *.NET Desktop Development* in the *Workloads* tab to be installed

## Create Advanced Project in ScreensPro

Create a new project folder, e.g. *AdvancedProject\_400x300* (it is best practice to include the resolution into the folder name for clarity)

In ScreensProServer, click *Config* - *New Config* and name the new config *AdvancedProject\_400x300* and place it in the newly created folder:

<figure><img src="/files/1UJyyCtSNWiKYNbI6aBs" alt="" width="563"><figcaption></figcaption></figure>

Leave the *Working Directory* empty to indicate that the project files are in the same directory as the config file. Set the dimensions to 0 0 400 300 to indicate a position the top left corner:<br>

<figure><img src="/files/TandeqCBAEe7vbbueuaz" alt="" width="563"><figcaption></figcaption></figure>

## Creating the Project in Visual Studio

Open Visual Studio and click *Create a new project*. Select *WPF Class Library* in the next dialog. Name the Project *AdvancedProject\_400x300* and make sure to have the checkbox for *Place solution and project in the same directory* ticked. Also make sure that the project is created inside our newly created folder, this may mean to adjust the location accordingly:<br>

<figure><img src="/files/iqpiG9tnzBMMgEMRvCoE" alt="" width="563"><figcaption></figcaption></figure>

Select *.NET 9 (Standard Term Support)* in the next dialog and click Create.&#x20;

Visual Studio will now look something like this:<br>

<figure><img src="/files/ADqkLrnZbvRpXtOIU7fU" alt="" width="563"><figcaption></figcaption></figure>

In order to use special controls for ScreensPro (e.g. RuntimeElement or TextElement), we need to include the ScreensPro.Controls nuget package from the internet. Right-Click on the project name and then  *Manage Nuget-Packages...* In the newly opened view, select *Browse* tab and enter *ScreensPro.Controls* in the *search* text box:<br>

<figure><img src="/files/3SCxqloVJ5C1l1j7p3QL" alt="" width="563"><figcaption></figcaption></figure>

Click on it and click *Install* on the right-hand side - followed by some *Accept* clicks.&#x20;

Now we are done and can use this project.

## Bringing custom controls to Toolbox

If you do not see the ScreensPro controls in the Toolbox view, you have make them available first.

First build your project by right-click on the project and then select *Build*.&#x20;

In the Toolbox view right-click on an ampty area and click *Chose Items...* . In the *WPF Components* tab click *Browse*.&#x20;

<kbd>Not working like this.,</kbd>

## Designing Layouts in Visual Studio

### Clock Layout

Now we are ready to create our first layout: Right-Click on the project and select *Add* and then *User Control (WPF)* - this will a bring up a new dialog asking fo a name. We want ot start with a layout showing the current clock, therefore we name it *ClockLayout*:<br>

<figure><img src="/files/BCtxieKG7v5DlJhm9rin" alt="" width="563"><figcaption></figcaption></figure>

First we need to tell Visual Studio about our custom user controls. Add a new line (attribute) in the `UserControls`  attributes list: \
`xmlns:controls="clr-namespace:Screens.Controls;assembly=Screens.Controls"`

Then you can add a clock element into the `Grid` content: \
`<controls:ClockElement Foreground="White"></controls:ClockElement>`

Ater that, you will be able to see a preview:<br>

<figure><img src="/files/YBYWvKO9QTHCSc7X6BHy" alt="" width="563"><figcaption></figcaption></figure>

### Text Layout

Next we want ot add a text layout. Again we add a new WPF User Control as seen in the previous section, name it *FreetextLayout.xaml*.

Also register the custom controls again as in the previous section.

Then add a TextEelement control into the grid and name it x:Name="TextElement": `<controls:TextElement x:Name="TextElement" Foreground="White"></controls:TextElement>`

We are now ready to create the ScreensProClient for remoting.&#x20;

## Create Client config

In order to be able to show these layouts, we need a client configuration.&#x20;

Open ScreensPro Client application and click on the config toolbar - New Config: Place it in the newly created folder and name it AdvancedProject\_400x300 and click Save.<br>

<figure><img src="/files/62PtAE8nLhSymkB4znqE" alt="" width="563"><figcaption></figcaption></figure>

In the layout tab add the following layouts:&#x20;

<figure><img src="/files/lLhoVjFZwFhQSY4klAen" alt="" width="563"><figcaption></figcaption></figure>

Now you shoulkd be able to toggle layouts with the *Play* button.&#x20;

## Common Resoulrces (Style file)

Now all of the texts are white. We want to have the default color to be specified in a Style file that can be changed just once and the reused across all layouts.&#x20;

First right-click on the project, select *Add* and then click *Resource Dictionary (WPF)* and name it *Styles.xaml.*&#x20;

Inside the `ResourceDictionary` node, add this line to define a default brush with color Red: \
`<Brush x:Key="DefaultForeground">Red</Brush>`

We need to make ScreensPro aware of this style file, therefore click *Config* - *Settings* in ScreensPro and go to *RenderManager* - *StyleFilenames* and add *Styles.xaml*. In order for this to become effect restart ScreensPro.&#x20;

Now in both the ClockLayout and FreetextLayout file, add these lines directly as the first node inside the UserControl to make the layouts aware of the resource file to use: \
`<UserControl.Resources>`\
`<ResourceDictionary Source="Styles.xaml" />`\
`</UserControl.Resources>`

Now you can select all the resource file content as local resources. Select the clock element, in the *Properties* view expand *Brush*, click on the arrow next to *Foreground* and select *Local Resource* - *DefaultForeground*: <br>

<figure><img src="/files/74yT4VU2Hv8b3zJuPcaD" alt="" width="563"><figcaption></figcaption></figure>

The clock element's text should now be displayed in red in trhe preview. Repeat this for the FreetextLayout.&#x20;

Instead of using the Properties view, you can also apply the local resource directly in code via the DynamicResource extension: \
`Foreground="{DynamicResource DefaultForeground}"`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dbnetsoft.com/dbnetsoft/screenspro/projects-and-configs/visual-studio-projects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.