Hello everyone, and welcome to this video tutorial.
My name is Tomas, and I am a member of the Inxton developer team.
In the previous video tutorial, 
we have explained the mechanism of the layout attributes.
In this video tutorial, we are going to explain 
how to create an own visualisation component for the complete structure
or instance of the PLC element.
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 first three project folders
starting with the 201_EssentialsAutoGeneratedUI up to the 203_EssentialsLayoutAttributes.
Copy folder 203_EssentialsLayoutAttributes
and rename it to 204_EssentialsCustomizedView. 
Open the renamed folder and start the Inxton Essentials solution.
Open the 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.
You should get the same view as at the end of the last video tutorial.
Just to be sure if everything works fine, check the functionality.
In the MainPlcHMI project add a new folder and name it CustomView.
Into this folder add a new WPF User Control and name it fbPneumaticActuatorManualView. 
Change the namespace of the newly added UserControl 
to be in the same namespace as the type that will represent, 
in our case MainPlc. 
Change the local namespace. 
Add the namespace MainPlc from the assembly MainPlcConnector.
Set the horizontal so as the vertical alignment to stretch to fill the whole area.
Set the design-time data context with prefix d: to see functional binding during design-time.
Add GroupBox and create data binding to AttributeName. 
This will show later the name of the instance of the fbPneumaticActuator, if specified.
Add the uniform grid with three rows and two columns.
Add the button, name it buttonExtend, 
bind its content to _manualExtend.AttributeName and 
assign the ButtonExtend_Click event handler to the click event of this button.
Add another button and do similar for the retract command.
Add a CheckBox, bind its data context to outExtend variable. 
Create the data binding for its IsChecked property and bind it to Cyclic.
Create the data binding for its Content and bind it to AttributeName.
Add another three CheckBoxes and do similar for the rest variables
outRetract, inExtended and inRetracted.
Now you can see the final layout, 
so as the texts, taken from AttributeNames of respective variables. 
This is thanks to the data context for design-time set in the line thirteen.
In the runtime this data context will be ignored,
and specific data context will be assigned to each instance of this complete user control.
So, close and save the XAML file, and open the respective .cs file.
Add namespace MainPlc.
Correct its namespace to MainPlc to match the namespace of the XAML file.
Add private property _context of the type fbPneumaticActuator, 
that returns the DataContext.
Add the event handler ButtonExtend_Click already assigned to the button buttonExtend.
In the body of this event handler 
just set the variable _context._manualExtend.Cyclic to the value true.
Do similar for the button buttonRetract and its event handler.
Close and save the .cs file.
Open the MainWindow.xaml file.
Navigate to the RenderableContentControl, 
change the PresentationType property to Manual-Control, 
and set PreferCustomized property to true.
Start the application and check the functionality of this custom user control.
And now let's profit from the previous work. 
Open the MAIN program in the PLC project and create three instances of the 
fbPneumaticActuator in the declaration part.
Let's also apply addProperty Name for each of them.
In the body of the MAIN program add calls of the methods
.Manual() and .SimulateInputs() for each of them.
Activate PLC configuration and start the PLC.
Run the Inxton builder.
In the MainWindow.xaml change the binding to MAIN,
so complete content of the MAIN should be displayed.
Start the application.
As you can see, now all three instances are displayed and fully functional.
Ok, so let's talk a little about RenderableContentControl 
and how the render pipeline works.
It searches for the user control with name of the type
+ first value of the PresentationType property + View.
So in our case, it would be fbPneumaticActuator+Manual+View.
If such a user control is not found,
it searches for a user control with the next value in the PresentationType property, 
in our case fbPneumaticActuator+Control+View.
If such a user control exists, it will use it, 
otherwise, it will apply the autogenerated mechanism shown in the previous lesson
and construct the final view from the base controls.
Nevertheless, if there is no user control for the specific type,
we can use the PresentationType property with two specific values, namely: 
Control and Display. 
If the Control value is used, all values that are not explicitely specified as the read-only
will be writable, 
if the Display value is used, all variables will be read-only in that page or user control.
So let's make a copy of our user control and rename it to 
fbPneumaticActuatorOnlyView that will contain just input and output signals.
So correct the class name in the .xaml file, 
delete the first two buttons and correct the number of the rows.
Close and save it.
Open the corresponding .cs file, 
correct the class name and
delete the event handlers for the buttons removed.
As you can see, now the name of the user control consists of
fbPneumaticActuator+Only+View.
So to look at the instancies using this user control,
 we will need to use Only as a value of the PresentationType property.
So, open the MainWindow.xaml file,
change the grid to Uniform grid and define two columns.
Copy the whole line with data binding and just change the Manual to Only in the copied line.
Start the application.
You can see now that both user controls are looking at the same objects, 
but using different views.
Check the functionality to see, 
if the values are changing in the both user controls respectively.
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.
