Universal WPF hosting addin for NAV v1.1

Hello everybody

Today I am happy that I have managed to finish new version of the Uni WPF addin. Now you are able to catch events of the controls inside NAV and dynamically change properties of the controls. The demo object I have made is creating simple calculator inside the addin (calculator is not fully working, you can just type numbers and clear them), but it is not hard to extend it to fully functional because you need only modify code inside NAV.

Usage:

This addin is now ready to be used e.g. for creating touch screens for POS and other systems, to display dynamically created buttons, drawings, may be grids, pictures, media (you can easily play some video inside…). All the properties of WPF are used, thus the content is automatically resized if all is set correctly inside the XAML (data binding the controls between each other). Example is this “calculator”:

UniWPFAddin_v2

How it works:

If you bind the addin to BigText variable, you can pass XML into this addin in this format:

<SomeRootElement>
  <Element>
    //there is XAML describing the controls which should be added into the addin, the XAML must include correct name spaces
  </Element>
  <Host <attributexxx>="<zzz>" <attributeaaa>="<bbb>"/>
  <Addin <attributexxx>="<ZZZ>"/>
  <SetProperty Object="<objname>" Name="<name of property>" Type="<TypeName>">Value<\SetProperty>
  <SetEvent Object="<objname>" Name="<EventName>"/>"
</SomeRootElement>

When you refresh the page (when the new value is passed into the addin), the XAML from Element tag is used to create the controls. This XAML is not compiled, thus you cannot use things like Event directly in the XAML. But you can use it to define styles and other resources and the controls, which would be inside the addin. Example:

 

<Root>

<Element>

<!—Start of XAML definition –>

<Canvas Name="canvas1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Background="White">

  <Canvas.Resources>
    <RadialGradientBrush
      Center="0.5,0.5"
      RadiusX="1.0"
      RadiusY="1.0"
      x:Key="brOperator">
      <GradientStop Color="Lime" Offset="0.0" />
      <GradientStop Color="Green" Offset="1.0" />
    </RadialGradientBrush>
…..
    <Border x:Key="bdrSelected" Width="5" />
    <Style x:Key="styButton">
      <Setter Property="Control.Background" Value="{StaticResource brNumber}" />
    </Style>
  </Canvas.Resources>

  <Grid Width="{Binding ElementName=canvas1, Path=ActualWidth}"
    Height="{Binding ElementName=canvas1, Path=ActualHeight}">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.25*" />
      <ColumnDefinition Width="0.25*" />
      <ColumnDefinition Width="0.25*" />
      <ColumnDefinition Width="0.25*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="0.10*" />
      <RowDefinition Height="0.22*" />
      <RowDefinition Height="0.17*" />
      <RowDefinition Height="0.17*" />
      <RowDefinition Height="0.17*" />
      <RowDefinition Height="0.17*" />
    </Grid.RowDefinitions>
    <!– Row 1 –>
      <Button
        Background="{StaticResource brNumber}"
        Grid.Row="2"
        Grid.Column="0"
        Margin="2,2,2,2"
        Name="btnNum7" Focusable="False" Tag="7">7</Button>
      <Button
        Background="{StaticResource brNumber}"
        Grid.Row="2"
        Grid.Column="1"
        Margin="2,2,2,2"
        Name="btnNum8" Focusable="False" Tag="8">8</Button>
…..
    <Label
      Background="{StaticResource brResult}"
      Grid.ColumnSpan="4"
      Margin="2,2,2,2"
      Name="lblResult"
      HorizontalContentAlignment="Right"
      VerticalContentAlignment="Center">0</Label>
  </Grid>
  </Canvas>

<!—End of XAML definition –>
</Element>
<Addin AllowCaption="True"/> <Host Background="White""/>
<SetEvent Object="btnCe" Name="Click"/>
<SetEvent Object="btnC" Name="Click"/>
<SetEvent Object="btnNum0" Name="Click"/>
<SetEvent Object="btnNum1" Name="Click"/>
<SetEvent Object="btnNum2" Name="Click"/>
</Root>

This is example of the XML. First it define the XAML for the controls. Tag properties are used to return some integer in first parameter of the NAV event. Events are connected to the NAV event by using “SetEvent”element. You just pass the control name and name of the event. If it is supported type event, it will be connected to NAV event handler inside the addin. Addin element just set one property of the addin – if the Caption should be displayed or not. Host element set property of the ElementHost object used to host the WPF controls on the page. See the ElementHost properties on MSDN documentation to see what you can set.

If all is ok, the page will open with some buttons in a grid and one label. When you click the button, NAV event will be triggered and the Tag of the button will be passed in Index parameter and simple XML will be passed in the Data parameter. The XML looks like this:

<Root>
   <Sender>btnNum0</Sender>
   <Event>Click</Event>
</Root>

You can use the XML to check which specific event was triggered and on which control, because some controls could have more triggers connected into NAV (e.g. MouseEnter, MouseLeave etc.). You can react to the event in the NAV as you wish. You can e.g. dynamically change some properties of selected controls inside the addin by passing XML like this to the addin:

<Root>
   <SetProperty Object="lblResult" Name="Content" Type="System.String">
     <string>MyData</string>
   </SetProperty>
</Root>

This example will set the content of the label to string “MyData”. Because the PF controls are able to display different content, not just strings, you need to enter correct type and correctly format the inside XML for this tag. I can imagine that you will e.g. pass some picture or some other controls… If the page is refreshed, the addin will display the updated controls.

 

You can download the files there.

Universal WPF hosting addin for NAV

Today I hade short time to play with the addins in NAV. I created small addin which I want to share with you. It allows you to add any WPF component to the NAV page dynamically directly from NAV by just passing correct XML including XAML describing the WPF components.

SNAGHTML77d6c21

What you need:

  1. The addin dll file
  2. XML passed to the addin through text or bigtext in correct time with correct values (each change of the value is reflected in the addin)

Example of XML passed to the addin

<Root>
  <Element>
    <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http//schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    Height="378" Width="502">
      <Ellipse Height="53" HorizontalAlignment="Left" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="65" />
      <Ellipse Height="53" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ellipse2" Stroke="Black" VerticalAlignment="Top" Width="65" />
      <Ellipse Height="53" HorizontalAlignment="Left" Margin="25,25,0,0" Name="ellipse3" Stroke="Black" VerticalAlignment="Top" Width="65" />
    </Grid>
  </Element>
  <Host Width="10" Height="100"/>
  <Addin AllowCaption="True"/>
</Root>

This XML describe in “Element” the XAML of the created components. Element Host described the attributes of the ElementHost object which hosts the WPF components (you can change the colors, size, size limits etc.). Addin element could set attributes of the addin itself.

When the addin receive this XML, it create the WPF controls and display them in the host object. Right now the elements are only passive, you cannot click on them and fire the NAV trigger (for now…;-)). I am planning to add some dynamic way how to bind the control’s events to the NAV trigger, but this would be more complex task.

When it is good to use it

E.g. when you need to display some dynamic data on the page – you could display e.g. icons, draw some lines, objects, display labels, simply everything what WPF allows you. You just needs to create correct XAML and pass it into the addin.

 

I wish you luck when using this addin and I want only one from you – send me screenshots how did you used the addin on the NAV page. I will public the code in future, not right now…

 

The addin dll and example page could be downloaded from there.