Difference between revisions of "XAML"
| Line 621: | Line 621: | ||
As you maybe already noticed we have two different clients, one is WinX UWP and the other one Xamarin, which is used to develop clients for three different platforms namely iOS, Android and new UWP (-> it doesn’t really differentiate from the previously mentioned UWP except it’s developed in a different framework which is Xamarin in this case). The customizing stays the same in case of the syntax, but there are some differences in the naming of controls and attributes. Unfortunately, there is no decent documentation of these differences, but the Microsoft documentation and in general the internet can support you when searching e.g. for a control in Xamarin that you used in UWP. | As you maybe already noticed we have two different clients, one is WinX UWP and the other one Xamarin, which is used to develop clients for three different platforms namely iOS, Android and new UWP (-> it doesn’t really differentiate from the previously mentioned UWP except it’s developed in a different framework which is Xamarin in this case). The customizing stays the same in case of the syntax, but there are some differences in the naming of controls and attributes. Unfortunately, there is no decent documentation of these differences, but the Microsoft documentation and in general the internet can support you when searching e.g. for a control in Xamarin that you used in UWP. | ||
| − | More specific documentations about Xamarin Customizing can be found under | + | More specific documentations about Xamarin Customizing can be found under [[XAMARIN XAML]]. |
== Namespace changes == | == Namespace changes == | ||
| − | + | ||
Starting from the UBIK UWP client{{Version/WinXSince|3.0.0}}, we have restructured & renamed some of our outdated or inaccurate namespaces. This means modifications are necessary for any previous XAML customizing code that refers to these changed namespaces. The complete list of such changes is documented below. | Starting from the UBIK UWP client{{Version/WinXSince|3.0.0}}, we have restructured & renamed some of our outdated or inaccurate namespaces. This means modifications are necessary for any previous XAML customizing code that refers to these changed namespaces. The complete list of such changes is documented below. | ||
| Line 667: | Line 667: | ||
* One exception is the namespace '''''UBIK.WinX.UI.CollectionView'''''. It is '''not''' changed since the content is indeed WinX specific. | * One exception is the namespace '''''UBIK.WinX.UI.CollectionView'''''. It is '''not''' changed since the content is indeed WinX specific. | ||
* For namespaces that are changed from ''UBIK.Win8.UI'' such as '''''UBIK.Win8.UI.Controls''''', '''do not''' further '''remove the ''WinX''''' segment even though the results are something like '''''UBIK.WinX.UI.Controls'''''. | * For namespaces that are changed from ''UBIK.Win8.UI'' such as '''''UBIK.Win8.UI.Controls''''', '''do not''' further '''remove the ''WinX''''' segment even though the results are something like '''''UBIK.WinX.UI.Controls'''''. | ||
| + | |||
| + | == Further information regarding XAML == | ||
| + | [[Developer Mode]] <br> | ||
| + | [[Xamarin XAML]] <br> | ||
| + | [[XAML Basics]] | ||
[[Category:WinX|XAML]] | [[Category:WinX|XAML]] | ||
Revision as of 13:01, 27 April 2020
The WinX User Interface can be vastly customized using XAML. Starting with Version 3.2, this customizing experience can be largely controlled with the new Developer Mode.
Contents
Templates
The UI is controlled by several predefined XAML templates which are loaded into the App at startup. There is a set of default template deployed with the App at installation, however, each of them can be overridden by placing the respective file in the folder [AppInstallPath]\LocalState\XAML For further information see UBIK Templates.
General
Controls the overall styling and behavior of the App, like standard Brushes (Colors) and Fonts.
AuthenticationPage
- UBIKSplashArea.xaml
- UBIKPageNavigation.xaml -> Deprecated and changed to UBIKHomePageButtons.xaml
- UBIKProfileItem.xaml
Content Pages
- UBIKObjectIcon.xaml
- UBIKObjectIconSmall.xaml
RootPage
- UBIKMainLeftArea.xaml
- UBIKMainItem.xaml
- UBIKMainItemSmall.xaml
ChildPage
- UBIKChildItem.xaml
- UBIKChildItemSmall.xaml
- UBIKChildArea.xaml
- UBIKChildAreaSmall.xaml
- UBIKChildAction.xaml
- UBIKPriorityPropertyItem.xaml
DetailsPage
- UBIKDocumentItem.xaml
- UBIKDocumentItemSmall.xaml
Specific UBIK® Controls
Basic
- CoolGridSplitter (UBIK.WinX.Controls)
Allows to make rows or columns of a grid user-resizable
Example:
x:Name="ChildAreaGridSplitter"
Height="10"
HorizontalAlignment="Center" VerticalAlignment="Bottom"
Background="Transparent"
Foreground="White"
ResizeBehavior="CurrentAndNext" ResizeDirection2="Rows"/>
Advanced
Allows to evaluate a C# expression in XAML, using any amount of EvalExpressionParameters
Converters
These are classes in our code used to convert one form of data into another (For example: string to color, bool to string, color to string…). We are using it often on Data Bindings, so we can simply ‘change’ the data that got provided by the model. Mostly, in our environment, we use the Converters for the Visibility Property, Background Property or the Source Property (converting Byte to an Image).
Initialization of a converter in a XAML file:
x:Key="ItemCountLesserThanToColConverter"
EqualOrBiggerThan="Visible"
LesserThan="Collapsed" />
<!-- This Converter example specifically counts the items that will go into a container (ListView etc..) and gets a parameter passed when it should be a certain visibility. Next example shows you how to configure your converter.-->
Using the ItemCountLesserThanToVisiblity in a visibility attribute:
<!--In this case is the parameter 13, so when it gets passed the Count gets checked e.g. how many items there are and when it’s under 13 it will collapse. -->
Example of an EqualToVisConverter being used in order to set the visibility of a grid:
EqualToVisConverter}, ConverterParameter=30}">
</Grid>
<!--The grid will be ONLY visible if the value of this MetaProperty equals the value of the converter parameter. -->
Example of a StringFormatConverter, which converts a value into a string and also accepts a parameter, in this case the GlobalDateTimeFormat, which ‘tells’ the converter how to format the string:
Basic
- AddStringSuffixConverter
Appends a suffix expression to an existing (string) value. The suffix expression to be appended is provided via the converter parameter.
- BooleanToVisibilityConverter
Converts a Boolean into a Visibility, where true will result in Visibility.Visible.
- BooleanToCollapsedConverter
Converts a Boolean into a Visibility, where true will result in Visibility.Collapsed.
- BooleanInvertConverter
Converts boolean input into the inverted bool value.
- BooleanToScrollbarVisibilityConverter
Converts a boolean Value to ScrollbarVisibility
- BooleanToVisibilityConverter/BooleanToCollapsedConverter
Converts a boolean Value to Visibility
- ByteToImageSourceValueConverter
Converts a byte array to an ImageSource
- ChildItemTemplateSelectorSuffixConverter
- ClassificationToVisibilityConverter/ClassificationToCollapsedConverter
Converts the presence of a classification to visibility. One or more classification UIDs have to be provided separated by '|'.
- ContainsToVisibilityConverter/ContainsToCollapsedConverter
Converts the presence of one or more item(s) in a collection (e.g. int array) to visibility. Parameter with one or more items has to be provided separated with '|'.
- DistanceToStringConverter
A distance in meters provided as double will be converted into a comfortable redable distance (e.g. "0.5 m", "1.7 km")
- DoubleToLocalizedStringConverter
A double value will be converted to the current localisation
- EditablePropertyToVisibilityConverter/EditablePropertyToCollapseConverter
- EnumerableGetToValueConverter
- EqualToTrueConverter
- EqualToVisibilityConverter/EqualToCollapsedConverter
Converts equality to visibility. A parameter with a compare value hast to be provided.
- IntToSolidBrushConverter
Converts the 4 bytes (ARGB) of an integer value to a Brush
- ItemCountToVisibilityConverter/ItemCountToCollapseConverter
Converts presence of items in a collection to visibility.
- NullableIntToStringConverter
Converts a nullable int to a string. {null} will be an empty string
- NullObjectToBooleanConverter
Converts an object to boolean depending from being null or not.
- NullObjectToVisibilityConverter/NullObjectToCollapsedConverter
Converts an object to visibility depending from being null or not.
- NullOrEmptyStringToVisibilityConverter/NullOrEmptyStringToVisibilityConverter
Converts a string to visibility depending from being null/empty or not.
- NumericToGridLengthConverter
Converts an integer to grid length.
- NumericToVisibilityConverter/NumericToCollapsedConverter
Converts a number to visibility, depending from being '0'.
- PropertyItemToValueConverter
- PropertyNameExistsToVisibility
Delivers Visibility.Visible if the given property name exists at the context object, Visibility.Collapsed if not.
- PropertyNameToItemConverter
Delivers a PropertyItem with the given name, if it exists at the context object.
- PropertyNameToSymbolConverter
- PropertyNameToValueConverter
Delivers the value of a proiperty with the given name, if it exists at the content object.
- PushpinScaleConverter
- SelectiveListToItemsConverter
- SortDirectionToSymbolConverter
- ToStringFormatConverter
Converts an object to a formatted string. A format string has to be provided as Parameter (e.g. "#.0"). A special behavior is provided by the format string "0.": in this case the numeric value will be truncated at the separator instead of being rounded!
- ToTypeConverter
Attempts to convert an object into the type provided as Parameter (e.g. 'System.Int32' for an integer or 'System.String' for a string)
- TypeToVisibilityConverter
Converts the presence of a type to visbility (e.g. whether an object is "String")
- ValueValidityToVisibilityConverter
Advanced
Returns a formatted string where placeholders will be filled with values supplied to its parameter properties (Param0, Param1, Param2).
Example:
<StackPanel.Resources>
<!-- Instantiate the converter and bind the the Param0 to a SearchBox on this page -->
<converters:StringFormatConverter x:Key="URIConverter" Param0="{Binding ElementName=SkypeQuery, Path=QueryText}" />
</StackPanel.Resources>
<!-- Create a SearchBox that calls the typed Name via Skype on enter -->
<SearchBox
x:Name="SkypeQuery"
Width="240" Height="40"
FontSize="18"
PlaceholderText="Call Skype">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="QuerySubmitted">
<Core:InvokeCommandAction
Command="{Binding NavigateToURICommand}"
CommandParameter="{Binding ElementName=SkypeQuery, Path=QueryText, Converter={StaticResource URIConverter},
ConverterParameter=skype\:\{0\}\?call }" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</SearchBox>
</StackPanel>
Evaluates a C# expression with 3 optional variables (Param0, Param1, Param2) and returns the result. The object fed into the converter can be referenced in the expression as Context.
Example:
<Grid.Resources>
<!-- Instantiate the converter and bind the Context to the current DataContext, the Param0 to a UI element of this page -->
<converters:EvalExpressionConverter x:Key="CodeConverter" Context="{Binding}" Param0="{Binding ElementName=ChildListView, Path=Name}" />
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<!-- Create a TextBox where we can enter a C# expression -->
<TextBox
x:Name="CodeQuery"
MinWidth="240" Height="40"
FontSize="18"
PlaceholderText="Expression">
</TextBox>
<!-- Create a TextBlock where we display the result of the compiled expression -->
<TextBlock Text="{Binding ElementName=CodeQuery, Path=Text, Converter={StaticResource CodeConverter}}" />
</StackPanel>
</Grid>
Converts a collection into a view that can be filtered using C# expressions and returns the (filtered) result. The object fed into the converter can be referenced in the expression as Item.
Example:
<Grid.Resources>
<!-- Instantiate the converter and bind the Source to the collection we want to use on a UI element of this page -->
<converters:CollectionToViewConverter x:Key="ColConv" Source="{Binding Children.Items}" />
</Grid.Resources>
<StackPanel Orientation="Horizontal">
<!-- Create a TextBox where we can enter a C# expression -->
<TextBox
x:Name="FilterQuery"
Height="40" MinWidth="240"
Margin="0,10,10,0" HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="18"
PlaceholderText="Filter" />
<!-- Create a ListView and bind its ItemsSource to the expression pulled through the converter -->
<ListView
x:Name="ChildListView"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding ElementName=FilterQuery, Path=Text, Converter={StaticResource ColConv}}">
</ListView>
</StackPanel>
</Grid>
Converts a template selector to use templates with a certain suffix (e.g. "_Grid" to use "UBIKChildItem_Grid.xaml" instead of "UBIKChildItem.xaml"). The small template file name will be combined as <TemplateName><Suffix>Small.xaml (e.g. "UBIKChildItem_GridSmall.xaml").
Example:
<Grid.Resources>
<!-- Instantiate the template selectors and bind them to the instance of the coverter -->
<tpl:ChildItemTemplateSelector x:Key="ChildItemTemplateSelector" />
<tpl:ChildItemTemplateSmallSelector x:Key="ChildItemTemplateSmallSelector" />
<converters:ChildItemTemplateSelectorSuffixConverter x:Key="ChildItemTemplateSelectorSuffixConv" TemplateSelector="{Binding Source={StaticResource ChildItemTemplateSelector}}" TemplateSmallSelector="{Binding Source={StaticResource ChildItemTemplateSmallSelector}}"/>
</Grid.Resources>
<!-- The itemselector template binds to the suffix that should be used (in this case a binding to a stored profile parameter is used to switch the item template suffix between "_Grid" and "_List" -->
<StackPanel>
<CheckBox Grid.Column="0">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<!-- Store the Profile Variable "ChildItemsViewMode" to Grid or List - depending on the check state of the check box -->
<Core:InvokeCommandAction Command="{Binding StoreProfileParameterCommand}" CommandParameter="ChildItemsViewMode=_Grid"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="Unchecked">
<Core:InvokeCommandAction Command="{Binding StoreProfileParameterCommand}" CommandParameter="ChildItemsViewMode=_List"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</CheckBox>
<ListView
x:Name="ChildListView"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{Binding Path=StoredProfileParameters[ChildItemsViewMode], Converter={StaticResource ChildItemTemplateSelectorSuffixConv}, ConverterParameter=Normal, FallbackValue=List}"
ItemsPanel="{StaticResource ChildPageItemsPanelTemplate}"
ItemsSource="{Binding Children.Items}"
ScrollViewer.VerticalScrollBarVisibility="Auto" SelectionMode="None">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0,0,16,0" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="400" />
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
</StackPanel>
</Grid>
Behaviors
Properties
- ViewModel
- CurrentDateTime: the current date and time
- UserName: the current user name
- Self: the viewmodel itself
- AppStatus: the appplication status view model
- Content
- PropertyItems: Collection of all the content's PropertyItems, each accessible via a string indexer specifying the property ID.
- IsLocked: true, if the content islocked - false, if not
- IsReadOnly: true, if the content can be read only - false, if it is writeable
- ValueSeries: the value series, if available
- MROViewModel: if the content is an MRO related content, this is the sub view model for MRO
- GeoDataViewModel: if the content represents a geo object, this is the geo sub view model
- MetaDefinition: the meta definition of the content object
- Possible Children: collection if meta defintions the user can create new child content with
- ClassificationHandler: a classification handling object
- Content: the actual content object embedded in the viewmodel
- Icon: the content icon as a byte array
- HasIcon: true, if content object has an icon - false, if not
- Title: the content objects title
- SubTitle: the content objects sub title
- OrderId: the order id of the content
- GroupId: the group id of the content
- DownloadEnabled: true, if download is enabled - false, if not
- IsNewObject: true, if the object is created and not yet saved by the user - false, if not
- ToCommit: true, if the object is yet to be committed by pressing save - false, if not
- OfflineDate: date of the last offline download
- ToSave: true, if the object is yet to be saved by pressing save - false, if not
- ToEvaluateQuery: true, if a new query can be evaluated by pressing the sending the query
- ActionOverlayExpanded: true, if the action overlay is expanded - false, if not
- DeletionAllowed: true, if deletion of the object is allowed - false, if not
- RevertLocalChangesAllowed: true, if reverting the object is allowed - false, if not
- IsPictureChildCreationAllowed: true, if the creation of a picture child is allowed - false, if not
- PropertyItems: Collection of all the Content's Properties (all properties loaded when binding is triggered) - accessible via the property ID
- GeographyList
- ItemsSortedByZLevel: true, if the current items are sorted by z level - false, if not
- PolygonItem
- FillColor: the fill color of the polygon
- FillTransparency: the transparency if the polygon filling
- MRO
- ProjectData
- ParentViewModel
- Progress
- Weight
- TechStatus
- TaskOwner
- OrgaStatus
- IsConfirmed
- Task
- IsBooleanTask
- IsInspectionTask
- IsProgressReportingTask
- IsMeasurementTask
- Value
- PropertyItem
- DisplayValue
- PreviousValue
- Unit
- NotAppliccable
- IsTaskFinished
- IsValueMIssing
- WorkPackage
- WPOrgaStatus
- CanConfirm
- AlternativeNonDocumentChildrenList
- AppStatus
- Initializing
- UserAuthenticated
- Authentication
- LandscapeImage
- PortraitImage
- LoginState
- LoginType
- IsLoggedIn
- ShowLoginButton
- EnableLoginButton
- ShowTeamLoginButton
- EnableTeamLoginButton
- ShowLogoutButton
- EnableLogoutButton
- ShowTeamLogoutButton
- EnableTeamLogoutButton
- StatusText
- SplashImage
- AppVersion
- SyncModes
- ContentServiceConfigs
- KeyValues
- Profiles
- BuildingItem
- IsValidGeo
- BuildingLevelItem
- IsSelected
- LevelName
- LevelShortName
- Index
- Height
- IsValidGeo
- BuildingLevelList
- LowestLevelItem
- ItemsSortedByLevelDescending
- ChangedObject
- IsSelected
- ChildAppBar
- ContentChangeAware
- ContentDetailsPage
- DocumentScanMode
- LastScannedText
- LastScannedImage
- ContentListItem
- CachedPreviewDetails
- PreviewDetails
- SubDocuments
- ContentList
- ContentPageViewModel
- ContentSelectorDialog
- IsOpen
- SelectionText
- SelectedContent
- IsOK
- Dialog
- DocumentChildrenList
- DocumentListItem
- DocumentPage
- EditDialog
- GeoContentList
- GlobalAppBar
- GlobalStatusBar
- ListViewModel
- MapGeoContentList
- MapOverlayItem
- MapOverlayList
- MapViewModel
- NonDocumentChildrenList
- OverlayedPOIGroupItemItem
- ParentBaseViewModel
- POIBaseViewModel
- POIGroupItemItem
- POIGroupItem
- POIItemViewModel
- POI
- PreviewPage
- PropertyListItem
- PropertyList
- QueryDetailsPage
- RootContentList
- RootPage
- Scan
- SearchResultListItem
- SearchResultSelection
- Search
- TeamLogin
Commands
- ViewModel
- NavigateToURICommand: Navigate to an URI (e.g. open a web page or a file with a known file path)
- LaunchDocumentByReferenceCommand: Launch a file document in an external viewer by specifying the reference property ID or the document's UID (Version 2.6.37+)
- ShowMessageBoxCommand: show a message box with customizable text and title (Version 2.6.37+)
- Content
- NavigateToDetailsCommand
- NavigateToChildrenCommand
- NavigateToDocumentCommand
- RevertLocalChangesCommand
- DiscardContentCommand
- DeleteContentCommand
- SaveAndCommitCommand
- SetPropertyValueCommand
- SetPropertyValueAndValidateCommand
- EvaluateQueryCommand
- CaptureMediaCommand
- ShareContentCommand
- ExpandActionOverlayCommand
- StartFileEditingCommand
- ViewPropertyValueCommand
- EditPropertyValueCommand
- CreateChildItemCommand
- ActivateReferenceByScanCommand
- ActivateReferenceCommand
- ContinueReferenceByScanCommand
- SetActiveReferenceCommand
- CancelReferenceCommand
- LaunchDocumentByReferenceCommand
- GenericPropertyItem
- ChildrenList
- ContentListItem
- ContentList
- ContentPageViewModel
- ContentSelectorDialog
- Dialog
- DocumentChildrenList
- DocumentListItem
- ShowDocumentCommand
- StartRedliningCommand (Version 2.6.37+)
- DocumentPage
- GeoContentList
- GlobalAppBar
- GlobalStatusBar
- ListViewModel
- MapGeoContentList
- MapOverlayItem
- MapOverlayList
- MapViewModel
- NonDocumentChildrenList
- OverlayedPOIGroupItemItem
- ParentBaseViewModel
- POIBaseViewModel
- POIGroupItemItem
- POIGroupItem
- POIItemViewModel
- POI
- PreviewPage
- PropertyListItem
- PropertyList
- QueryDetailsPage
- RootContentList
- RootPage
- Scan
- SearchResultListItem
- SearchResultSelection
- Search
Differences between Xamarin and UWP
As you maybe already noticed we have two different clients, one is WinX UWP and the other one Xamarin, which is used to develop clients for three different platforms namely iOS, Android and new UWP (-> it doesn’t really differentiate from the previously mentioned UWP except it’s developed in a different framework which is Xamarin in this case). The customizing stays the same in case of the syntax, but there are some differences in the naming of controls and attributes. Unfortunately, there is no decent documentation of these differences, but the Microsoft documentation and in general the internet can support you when searching e.g. for a control in Xamarin that you used in UWP. More specific documentations about Xamarin Customizing can be found under XAMARIN XAML.
Namespace changes
Starting from the UBIK UWP client, we have restructured & renamed some of our outdated or inaccurate namespaces. This means modifications are necessary for any previous XAML customizing code that refers to these changed namespaces. The complete list of such changes is documented below.
| V.2.6 | V.3.0 | |
|---|---|---|
| Name- space prefix |
UBIK.Win8 | UBIK.WinX |
| UBIK.WinX.UI | UBIK.UI | |
| UBIK.WinX.Utility | UBIK.Utility | |
| UBIK.WinX.Library | UBIK.Library | |
| UBIK.WinX.DataProvider | UBIK.DataProvider | |
| UBIK.WinX.SyncHandler | UBIK.SyncHandler | |
| UBIK.WinX.DatabaseConnector | UBIK.DatabaseConnector | |
| UBIK.WinX.ContentDatabase | UBIK.ContentDatabase | |
| UBIK.WinX.MRO | UBIK.MRO | |
| UBIK.WinX.Coding | UBIK.Coding | |
| UBIK.WinX.DataService | UBIK.DataService | |
| UBIK.WinX.Redlining | UBIK.Redlining | |
| UBIK.WinX.Positioning | UBIK.Positioning |
Take the namespace UBIK.Win8 for example, it is now changed to UBIK.WinX. A few affected XAML namespace references are e.g.
- using:UBIK.Win8.Views -> using:UBIK.WinX.Views
- using:UBIK.Win8.GART.Controls -> using:UBIK.WinX.GART.Controls
Important notes on the namespace UBIK.WinX.UI:
- One exception is the namespace UBIK.WinX.UI.CollectionView. It is not changed since the content is indeed WinX specific.
- For namespaces that are changed from UBIK.Win8.UI such as UBIK.Win8.UI.Controls, do not further remove the WinX segment even though the results are something like UBIK.WinX.UI.Controls.
