# 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="" %} Video demonstrating the required steps {% endembed %} ## Install Visual Studio * Download Visual Studio Community from [visualstudio.com](http://www.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: \ `` 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": `` 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: \ `Red` 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: \ ``\ ``\ `` 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}"`