Hello everyone, and welcome to this video tutorial.
My name is Tomas, and I am a member of the Inxton developer team.
In this video tutorial, I would like to introduce you
In the previous video tutorial,
we have explained the attributes Name and Tooltip.
In this video tutorial, we are going to explain
how to modify the layout of the complete component
just by adding some attributes in the PLC project.
These attributes will automatically affect the layout on the .NET side.
For those who had run the application from the previous video tutorial successfully,
you need just to copy and rename the whole solution folder.
For those who are starting now, and meet the requirements on the screen,
let's proceed to www.github.com/inxton,
navigate to the section Tutorials-Inxton.Package.Vortex.Essentials,
Click on the CODE button,
and click on the copy link icon.
Those who are not very familiar with git
could also download the whole folder as a zip file.
Open Folder C:\WORK,
Right-click and select Git Bash Here,
 
Type git clone and hold Shift+Insert or 
Right-click and select Paste, 
type INXTON_ESSENTIALS.
This will clone all tutorial folders for the Inxton Essentials package.
So after successful cloning,
delete all folders except 201_EssentialsAutoGeneratedUI and 
202_EssentialsAttributesName.
Copy the folder 202_EssentialsAttributesName
and rename it to 203_EssentialsLayoutAttributes.
Open the renamed folder and start the InxtonEssentials solution.
Open Package Manager Console, 
and restore packages.
Just to be sure, let's also update and reinstall packages.
Check if the Solution Platform is set to Twincat Realtime 64bits 
and if MainPlcHmi project is set as the startup project, if not change it.
Activate configuration and start the PLC.
Start the application.
 
Try to click on the first four buttons which are 
end-position sensors and coils of the pneumatic actuator. 
As you can notice, they are accessible from the user-interface, but they should not be.
So firstly we are going to add ReadOnly attribute 
to all input and output variables of the function block fbPneumaticActuator.
 
Activate configuration and start the PLC.
Run the Inxton Builder.
Run the application.
You can check now, that all four variables have become unaccessible from the user-interface.
Only two buttons for manual control remained accessible.
Let's add now some layout attributes, that will change the positions of the individual controls.
All members after each layout attribute are placed according to that attribute 
until the new attribute is placed. 
Just copy the attributes according to the video.
In our case all six members are inside WrapPanel, 
that means they are stacked horizontally. 
All members are then grouped in the GroupBox.
However the two input variables are in Stack panel, that means they are stacked vertically,
so as the two output variables, and two internal variables.
So the final layout should be two input variables below each other, 
next to them, two output variables below each other and next to them,
two internal variables below each other.
Activate configuration and start the PLC.
Run the INXTON builder.
Start the application.
You should get such a nice red error message. 
This is a known issue, 
so just stop the application and change the "Copy Local" property 
for PresentationCore and PresentationFramework.
Start the application.
Now you should get the required result, 
and you can see that the layout of the buttons
fits the assignment by the layout attributes in the PLC code.
The look of the buttons is given by the Windows default style.
In the Inxton Essentials package, 
we have implemented our own style based on the Material Design by Google.
To apply this style, open the file App.xaml and add the resource according to the video.
You can also create your own style for some controls and place the resource below
into another ResourceDictionary.MergedDictionaries section.
Then the keys defined only in the first resource will be applied from the first resource,
while keys defined in both or just in the second resource
will be applied from the second resource. 
Start the application and test the functionality. 
 
You can notice significant visual changes, while functionality remains the same. 
As it was mentioned, this style is based on the Material Design.
It uses four main colours: Primary, Secondary, Accent and Alert
and four additional: OnPrimary, OnSecondary, OnAccent and OnAlert. 
To understand it more detailly, please refer to the manual of the Material Design.
To redefine the colours defined in the resource dictionary,
use the static resources according to the video, 
placed below the ResourceDictionary.MergedDictionaries section.
 
So, start the application and check if the changes have been affected.
OK, so that was all for this video tutorial.
The complete project is downloadable at www.github.com/inxton,in the tutorial section.
Just to be sure here is the link:
Thank you for your attention, and I look forward to the next tutorials. 
If you have some troubles,
please feel free to write an email to 
hello@inxton.com.
