Trigger Bindings

Trigger bindings allow your theme to change dynamically based on conditions — for example, different layouts in portrait vs landscape.

Written By Brian Faeran

Last updated 6 months ago

Orientation

Values: Landscape, Portrait

Example — Hide image in Portrait:

<Image> <Image.Triggers> <DataTrigger TargetType="Image" Binding="{Binding Orientation}" Value="Portrait"> <Setter Property="IsVisible" Value="False" /> </DataTrigger> </Image.Triggers> </Image>

AspectRatio

Values:

  • Ultrawide Landscape

  • Ultrawide Portrait

  • Widescreen Landscape

  • Widescreen Portrait

  • Full-Frame Landscape

  • Full-Frame Portrait

Example — Hide image in Full-Frame Portrait:

<Image> <Image.Triggers> <DataTrigger TargetType="Image" Binding="{Binding AspectRatio}" Value="Full-Frame Portrait"> <Setter Property="IsVisible" Value="False" /> </DataTrigger> </Image.Triggers> </Image>

IsSelected

Values: True, False
Only works inside a Wheel or List.

Example — Change text color to blue when selected:

<Label TextColor="White"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding IsSelected}" Value="True"> <Setter Property="TextColor" Value="Blue" /> </DataTrigger> </Label.Triggers> </Label>

NavigationInProgress

Values: True, False
True when navigation is happening, False when stopped.

Example — Fade label during navigation:

<Label TextColor="White"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding NavigationInProgress}" Value="True"> <DataTrigger.EnterActions> <anim:BeginAnimation /> <anim:FadeToAnimation Opacity="0" Duration="250" Delay="0" /> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <anim:BeginAnimation /> <anim:FadeToAnimation Opacity="1.0" Duration="250" Delay="0" /> </DataTrigger.ExitActions> </DataTrigger> </Label.Triggers> </Label>

When used in a Wheel or List, you may need to bind to the parent view’s context:

<DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference GamesCollectionView}, Path=BindingContext.NavigationInProgress}" Value="True">

NavigationChanged

Values: True, False
Turns True briefly when navigation changes selection.

Example — Slightly enlarge label on selection change:

<Label TextColor="White"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding NavigationChanged}" Value="True"> <DataTrigger.EnterActions> <anim:BeginAnimation /> <anim:ScaleAnimation Scale="1.1" Duration="100" Delay="0" /> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <anim:BeginAnimation /> <anim:FadeToAnimation Scale="1.0" Duration="100" Delay="0" /> </DataTrigger.ExitActions> </DataTrigger> </Label.Triggers> </Label>

In a Wheel/List:

<DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference GamesCollectionView}, Path=BindingContext.NavigationChanged}" Value="True">

NavigationDirection

Values:

0, 0 = No Input -1, 0 = Left 1, 0 = Right 0, 1 = Up 0, -1 = Down

Example — Move label left on Left navigation:

<Label TextColor="White"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding NavigationDirection}" Value="-1, 0"> <DataTrigger.EnterActions> <anim:BeginAnimation /> <anim:TranslateAnimation TranslateX="-20" Duration="100" Delay="0" /> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <anim:BeginAnimation /> <anim:TranslateAnimation TranslateX="0" Duration="100" Delay="0" /> </DataTrigger.ExitActions> </DataTrigger> </Label.Triggers> </Label>

In a Wheel/List:

<DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference GamesCollectionView}, Path=BindingContext.NavigationDirection}" Value="0, 1">