Difference between revisions of "XAML Tips"
| Line 1: | Line 1: | ||
== Functionality related == | == 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. | ||
| + | |||
| + | <source lang = "xml"> | ||
| + | <Grid> | ||
| + | <Interactivity:Interaction.Behaviors> | ||
| + | <Core:EventTriggerBehavior EventName="Tapped"> | ||
| + | <Core:InvokeCommandAction Command="{Binding NavigateToChildrenCommand}" /> | ||
| + | </Core:EventTriggerBehavior> | ||
| + | </Interactivity:Interaction.Behaviors> | ||
| + | </Grid> | ||
| + | </source> | ||
| + | |||
| + | |||
| + | 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. | ||
| + | |||
| + | <source lang = "xml"> | ||
| + | <DataTemplate | ||
| + | ... | ||
| + | xmlns:Core="using:Microsoft.Xaml.Interactions.Core" | ||
| + | xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"> | ||
| + | ... | ||
| + | </DataTemplate> | ||
| + | </source> | ||
=== Fit mode === | === Fit mode === | ||
Revision as of 10:16, 11 April 2019
Contents
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.
<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.
...
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.
...
xmlns:hs="using:UBIK.WinX.HotSpotting.Document">
...
<Grid.Resources>
...
<DataTemplate x:Key="FlipDocItemTemplate">
...
<hs:Document
...
FitMode="{Binding DocumentViewModel.FitMode}" />
</DataTemplate>
</Grid.Resources>
</DataTemplate>
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.
...
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.
