I\'m developing a Universal Windows application for Windows 10 and one of the first things I found is that the Trigger element (XAML) is not supported when styling images. H
No, you don't have Trigger
support in UWP.
A workaround is to use DataTriggerBehavior
with a ChangePropertyAction
to accomplish the exact same thing.
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
<Button x:Name="MyButton" Width="140" Height="80" IsEnabled="False">
<Image x:Name="MyImage" Source="Assets/xxx.jpg">
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding IsEnabled, ElementName=MyButton}" Value="False">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyImage}" PropertyName="Opacity" Value="0.5" />
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Image>
</Button>
Note that you will need to include BehaviorsXamlSDKManaged
from C:\Program Files (x86)\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\BehaviorsXamlSDKManaged\12.0\
. You will get a warning when you add the reference but just ignore it.
Update: You should be getting an updated Behavior SDK from nuget now.
Option 2
You can always do the same thing in VisualStateManager
. Open Blend and right click on your Button
and select Edit Template, Edit a Copy and then specify the resource name you want and hit OK.
Then look for the Disabled VisualState
and replace it with
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="RootGrid.(UIElement.Opacity)" Value="0.5" />
</VisualState.Setters>
</VisualState>
Alternatively you can use the namespaces
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
with
<ToggleButton Content="Execute"
IsChecked="{Binding ButtonIndicator}"
FontSize="8">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:InvokeCommandAction Command="{Binding ExecuteCommand}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ToggleButton>