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.

2 thoughts on “Universal WPF hosting addin for NAV v1.1”

  1. Hi Kine,

    that’s fantastic. I’m amazed this is possible -what a brilliant idea. Thanks for sharing the code. Hopefully I’ll get time to try it out. Have you any recomendations on how to get up to speed with XAML?

    Dave.

  2. May be using the Visual Studio and trying to create some custom control in XAML, reading books, Internet etc. I did it in this way.Some things I have from different Microsoft Developers days and other meetings. Idea is, that XAML is just text description of the controls/objects. (serialized objects).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>