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

Video demonstrating the required steps

Install Visual Studio

• Download Visual Studio Community from visualstudio.com
• 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:

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:

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:

Select .NET 9 (Standard Term Support) in the next dialog and click Create.

Visual Studio will now look something like this:

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:

Click on it and click Install on the right-hand side - followed by some Accept clicks.

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.

In the Toolbox view right-click on an ampty area and click Chose Items... . In the WPF Components tab click Browse.

Not working like this.,

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:

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:

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.

Create Client config

In order to be able to show these layouts, we need a client configuration.

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.

In the layout tab add the following layouts:

Now you shoulkd be able to toggle layouts with the Play button.

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.

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

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.

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:

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

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