Last modified on 6 September 2016, at 06:59

XAML

Revision as of 06:59, 6 September 2016 by BMA (Talk | contribs) (→‎Advanced)

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

Content Pages

  • UBIKObjectIcon.xaml
  • UBIKObjectIconSmall.xaml


RootPage

  • UBIKMainLeftArea.xaml
  • UBIKMainItem.xaml
  • UBIKMainItemSmall.xaml

ChildPage

  • UBIKChildItem.xaml
  • UBIKChildItemSmall.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.

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.

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="ChildTemplateSelector" />
            <tpl:ChildTemplateSmallSelector x:Key="ChildTemplateSmallSelector" />
            <converters:ChildTemplateSelectorSuffixConverter x:Key="ChildTemplateSelectorSuffixConv" TemplateSelector="{Binding Source={StaticResource ChildTemplateSelector}}" TemplateSmallSelector="{Binding Source={StaticResource ChildTemplateSmallSelector}}"/>
        </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 ChildTemplateSelectorSuffixConv}, 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

Commands