Changes

Data Binding is the process of connecting a display element, such as a user interface control, with the information that populates it. This connection provides a path for the information to travel between the source and the destination. For example, consider a simple application. You have things like a Search box, Buttons, TextBlocks etc. Each of these is a user interface control that accepts or displays, information for you. We bind to two different things, that is either a property, which lays beneath on a ViewModel as we saw in the MVVM pattern section. But we also bind to a MetaProperty, which is a property in an UBIK database.<br><div> [[File:bindings.png|thumb|Binding modes]]</div> <br>==== Modes ====* ''OneWay'' — values are transferred from the source to the target * ''OneWayToSource'' — values are transferred from the target to the source * ''TwoWay'' — values are transferred both ways between source and target * ''OneTime'' — data goes from source to target, but only when the BindingContext changes  ==== Binding options ====Standard (<span style="color: red">Recommended</span>) -> Attribute = ”{Binding Name of Property}” <source lang = "xml">Text = “{Binding CommentText}”</source> <br> '''On a MetaProperty -> Attribute =”{Binding Values [Name of MetaProperty]}”''' <source lang = "xml">Text=”{Binding Values[MP_SCOPECHANGE]}” </source> ''No Modes available'' <br>This is a special Binding option, and as above mentioned, you can’t use any of the Modes with it. With this Binding you are restricted to just being able to read this property. When changing a value in the client it won’t arrive to the database. <br> <br>  '''On a MetaProperty with an additional UBIK Property -> Attribute = ” {Binding PropertyItems [Name of MetaProperty].DisplayValue}”'''<source lang = "xml">Text=”{Binding PropertyItems[MP_SCOPECHANGE].DisplayValue}”</source>''No Modes available for several UBIK properties'' <br>But there are exceptions where you CAN actually use Modes. The property ‘Display’ provides this option.<source lang="xml">Text=”{Binding PropertyItems [MP_SCOPECHANGE].Value, Mode=”TwoWay”}”</source>This is NOT recommended, but still documented in case you’ll need it and nothing else works or you see it somewhere and you have no clue what it does. This Binding has the additional aspect that, with the second kind of the UBIK property, values can be saved back to the database but ONLY when you add a command to the object where your Binding is placed. When talking about a UBIK property, we mean properties from an UBIK ViewModel, which is the same as a simple property on a ViewModel in the end. The only difference is that they have certain limitations, as for example not all of the modes are available for all UBIK properties.<br> <br> '''On an element in your XAML code -> Attribute = “{Binding attribute, ElementName= x:Name}”'''<source lang="xml">Background=”{Binding Background, ElementName=ValueBall}”</source>This Binding can be very practical, if you want ‘copy’ their value of an attribute or switch e.g. the Visibility of an element by making it dependent of the attribute value on a different element. There are various possibilities in how to bind to an ElementName. Also, the usage of a converter and a parameter is possible, which often comes handy.<br>'''Using a converter and an additonal parameter could look like this -> Attribute = “{Binding ElementName=element, Path=attribute, Converter={StaticResource converter}}”'''<source lang="xml"><!--With a converter--><Grid Visibility="{Binding ElementName=ScopeChangesRadioButton, Path=IsChecked, Converter={StaticResource BoolToVisConverter}}"/><!--With an additonal parameter--><Grid Visibility="{Binding Values[MP_SCOPECHANGE], Converter={StaticResource EqualToColConverter}, ConverterParameter=30}"/></source> <br> <br> '''Binding a command to an Interactivity -> Command ="{Binding CustomCommand}"''' <br>Bindings are also used to bind custom commands to a command element. In this example we have even two commands bound to:<source lang="xml"><Interactivity:Interaction.Behaviors> <Core:EventTriggerBehavior EventName="Tapped"> <Core:InvokeCommandAction Command="{Binding NavigateToChildrenCommand}"/> </Core:EventTriggerBehavior> <Core:EventTriggerBehavior EventName="RightTapped"> <Core:InvokeCommandAction Command="{Binding BranchDownloadCommand}"/> </Core:EventTriggerBehavior></Interactivity:Interaction.Behaviors> </source> == Templates ==The function of the templates is basically re-describing an element (for example button or a textbox) you want to use, but a template can also define whole areas. You will see that we work very often with templates when customizing in the UBIK environment. <br>The default templates can be found, in general, on the internet. Or, if you are using Visual Studio, you can right-click on the control in the Visual Studio Designer and choose the option ‘Edit Template > Edit Copy’.<br> A <span style="color: orange">Control Template</span> describes the visual appearance and structure of a control. All of the UI elements have some kind of appearance as well as behavior, e.g., Button has an appearance and behavior. Click event or mouse hover events are the behaviors which are fired in response to a click and hover, and there is also a default appearance of button which can be changed by the Control template.  A <span style="color: green">Style Template</span> describes a uniform look to a set of controls. Styles give us the flexibility to set some properties of an object and reuse these specific settings across multiple objects for a consistent look.  A <span style="color: blue">Data Template</span> defines and specifies the appearance and structure of the collection of data. It provides the flexibility to format and define the presentation of the data on any UI element. It is mostly used on data related Item controls such as ComboBox, ListBox, etc.  '''Style/Control/Data Definition in UBIK''' In the UBIK surrounding we have a UBIKThemes.xaml file for our Client which describes a lot of style/control templates and colors etc. These are also configurable for our customizers, so they can adapt it to each project. But this process got more and more complicated, you just couldn’t have an overview of the things that you changed and the things that are here by default.In order to avoid such cases we created a new way to adapt this particular file. The process would look like this, you copy the style/color/control and create a new UBIKThemes file where you place the things you want to customize. The client will go over the default UBIKThemes and after that over your customized one, the default templates will be replaced -> identified via x:Key, so be careful to have them identical. == Namespaces ==Namespaces are very important in your XAML code, they identify the libraries of what controls/elements you can use. You can see them referenced on the top of your file directly in the parent object like DataTemplate, Window, Page etc. A few are already defined in your .xaml file per default. When you forget a required namespace or the spelling is not correct, you can crush your whole app and it’s hard , especially without debugging, to recognize that issue. It is good to check for misspelled or missing namespaces first when something doesn’t work. An example for a namespace is: xmlns:converters="using:UBIK.WinX.Converters" which you need when using converters in your XAML code that lays directly in the solution file. == What can I customize in UBIK? ==In the previous articles about XAML customizing it was all about how to create code from the beginning and what you need for it. In the UBIK environment it’s a little different, because we have already predefined XAML files (Data/Control Templates) for our standard UI. Of course, you have the option to override the existing ones or add new templates according to your needs. Customizing in our UBIK Environment occurs a lot through templates which can define different areas in the app. Only templates are customizable in UBIK, there are some areas which are not yet to be customizable.You can access the XAML templates via the [[Developer Mode]] in the Client. By activating it you can extract the needed XAML file into your XAML folder, further information can be found in the wiki article of the Developer Mode.