Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UWP style trigger missing

Tags:

It seems that UWP XAML doesn't support triggers in styles. What is the common workaround to accomplish triggers like the following?

<Style TargetType="Button">     <Style.Triggers>         <Trigger Property="Visibility" Value="Collapsed">             <Setter Property="Text" Value="" />         </Trigger>     </Style.Triggers> </Style> 

At the moment I see the following options to accomplish triggers in UWP:

Use Animations or VisualStateTriggers. Both seem to be wrong if I use them not to adjust the controls to the screen.


I think I found the correct way to implement Triggers in general for Controls. See the below code as demonstration:

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"  xmlns:Core="using:Microsoft.Xaml.Interactions.Core"  <Border x:Name="BackgroundElement" Tag="Text">     <Interactivity:Interaction.Behaviors>         <Core:DataTriggerBehavior Binding="{Binding Tag, ElementName=BackgroundElement}" Value="Text">             <Core:ChangePropertyAction PropertyName="BorderBrush" Value="AliceBlue" />         </Core:DataTriggerBehavior>     </Interactivity:Interaction.Behaviors> </Border> 

It would be awesome if there is a solution without ElementName. I would have done this in WPF with AncestorType, but that's missing in UWP too. Anyway, it seems that you can't use the Core:DataTriggerBehavior in styles.

like image 928
Briefkasten Avatar asked Nov 11 '15 10:11

Briefkasten


1 Answers

In WinRT, RelativeSourceMode only support Self and TemplatedParent mode, FindAncestor is not available. So when you use XAML Behaviors, you need to use ElementName as a workaround. And if you are using DataContext or ViewModel in your project, you can bind to the DataContext or ViewModel to avoid using ElementName. For example:

<Page ...>     <Page.Resources>         <local:MyViewModel x:Key="ViewModel" />     </Page.Resources>     ...     <Border x:Name="BackgroundElement" DataContext="{Binding Source={StaticResource ViewModel}}">         <Interactivity:Interaction.Behaviors>             <Core:DataTriggerBehavior Binding="{Binding Tag}" Value="Text">                 <Core:ChangePropertyAction PropertyName="Background" Value="Red" />             </Core:DataTriggerBehavior>         </Interactivity:Interaction.Behaviors>     </Border>     ... </Page> 

And the ViewModel used above:

public class MyViewModel : INotifyPropertyChanged {     public event PropertyChangedEventHandler PropertyChanged;      private string _tag;      public string Tag     {         get         {             return _tag;         }          set         {             _tag = value;             if (PropertyChanged != null)             {                 PropertyChanged(this, new PropertyChangedEventArgs("Tag"));             }         }     } } 
like image 190
Jay Zuo Avatar answered Sep 20 '22 06:09

Jay Zuo