XAML Tips

Functionality related

Attachable behaviors

It's quite often that you need to attach behaviors to certain XAML elements. For example, on a Grid, you want to attach a behavior which executes a command upon a Tapped event like the following.

<Grid>
    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="Tapped">
            <Core:InvokeCommandAction Command="{Binding NavigateToChildrenCommand}" />
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</Grid>

Notice here that "Interactivity" and "Core" are both namespaces and you have to make sure that they are defined at the root of your XAMLs like the following.

<DataTemplate
   ...
   xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
   xmlns:Interactivity="using:Microsoft.Xaml.Interactivity">
    ...
</DataTemplate>

Fit mode

If you are using the standard app without XAML customizings, the fit mode feature should work out of the box. However, when using a FlipView for displaying documents in your customized XAMLs, you must make sure to include the following binding to the FlipView's ItemTemplate so that the fit modes are properly applied.

<DataTemplate
   ...
   xmlns:hs="using:UBIK.WinX.HotSpotting.Document">
    ...
    <Grid.Resources>
        ...
        <DataTemplate x:Key="FlipDocItemTemplate">
            ...
            <hs:Document
               ...
               FitMode="{Binding DocumentViewModel.FitMode}" />
        </DataTemplate>
    </Grid.Resources>
</DataTemplate>

Content creation

To directly create an object on a child of the current object, you can define a Button as follows. The method "Item.IsTypeCreationAllowed" used in the expression gets the uid of the type that should be created below a child, if a child does not allow the creation of that type underneath it, the child will be hidden in the selection dialog. To actually create the object, the "CreateChildItemCommand" needs to be passed a KeyValueList with two parameters: The Parent-key is the ContentViewModel of the child underneath the object should be created, the Type-key is the type of object which should be created--this should match the uid passed to the "Item.IsTypeCreationAllowed" method.

<x:String x:Key="PlantMap">Item.IsTypeCreationAllowed(&quot;21fc990a-d064-4bee-8d48-3293351f827a&quot;)</x:String>
<cv:ListCollectionView x:Key="PlantMapView" Expression="{StaticResource PlantMap}" ItemsSource="{Binding Children.Items}" />

<AppBarButton>
<AppBarButton.Flyout>
  <Flyout Placement="Full">
        <ListView ItemsSource="{Binding Source={StaticResource PlantMapView}}">
          <ListView.ItemTemplate>
                <DataTemplate>
                <Button Content="{Binding Header}" Command="{Binding CreateChildItemCommand}" x:Name="CreateButton" Tag="{Binding}">
                        <Button.CommandParameter>
                          <uc:KeyValueList>
                                <uc:KeyValueParameter Key="Parent" Value="{Binding Tag, ElementName=CreateButton}"/>
                                <uc:KeyValueParameter Key="Type" Value="21fc990a-d064-4bee-8d48-3293351f827a"/>
                          </uc:KeyValueList>
                        </Button.CommandParameter>
                  </Button>
                </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>
  </Flyout>
</AppBarButton.Flyout>
</AppBarButton>

Hotspotting

The hotspotting command is used for hotspotting as well as for annotating, to configure the button for hotspotting, the commandparameter "Mode" should be set to "HotSpotting", for annotating the "Mode" should be "Annotate". The parameter commit is optional, if set to true, the changes get automatically persisted when leaving the editing mode.

<AppBarToggleButton
                IsChecked="{Binding EditingAnnotation, Mode=TwoWay}"
                IsEnabled="{Binding IsAnnotatable}"
                Command="{Binding HotSpottingCommand}">
                <AppBarToggleButton.CommandParameter>
                        <uc:KeyValueList>
                                <uc:KeyValueParameter Key="Mode" Value="Annotate"/>
                                <uc:KeyValueParameter Key="Commit" Value="true"/>
                        </uc:KeyValueList>
                </AppBarToggleButton.CommandParameter>
</AppBarToggleButton>

Performance related

FlipView

When using the FlipView control in your XAML code, it's better to enable UI virtualization. The difference in performance gets more obvious as the number of items in the FlipView increases. Here's how to enable it.

<FlipView
   ...
   VirtualizingStackPanel.VirtualizationMode="Standard">
    <Flipview.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </Flipview.ItemsPanel>
</FlipView>

VirtualizingStackPanel.VirtualizationMode offers two possibilities: Standard & Recycling. In case you are interested, here are their differences.