Last modified on 18 May 2017, at 12:31

XAML

Revision as of 12:31, 18 May 2017 by LGE (Talk | contribs)

The WinX User Interface can be vastly customized using XAML.

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

General

  • UBIKThemes.xaml

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® Elements

Converters

Basic

  • 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.

Advanced

Returns a formatted string where placeholders will be filled with values supplied to its parameter properties (Param0, Param1, Param2).

Example:

    <StackPanel Orientation="Horizontal">
        <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>
        <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>
        <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>
        <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
    • 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
  • 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
    • CachePreviewDetails
    • 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

  • ContentList
  • ContentSelectorDialog
  • Dialog
  • DocumentChildrenList
  • GeoContentList
  • GlobalAppBar
  • GlobalStatusBar
  • ListViewModel
  • MapGeoContentList
  • MapOverlayItem
  • MapOverlayList
  • MapViewModel
  • NonDocumentChildrenList
  • OverlayedPOIGroupItemItem
  • ParentBaseViewModel
  • POIGroupItemItem
  • POIGroupItem
  • POI
  • PreviewPage
  • PropertyList
  • QueryDetailsPage
  • RootContentList
  • RootPage
  • Scan
  • SearchResultListItem
  • SearchResultSelection
  • Search