How to use EventToCommand (Catel) in UWP apps - xaml

The code below under the Windows Phone 8.1 Silverlight works like a charm
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<interactivity:EventToCommand Command="{Binding ApplyCommand}"
DisableAssociatedObjectOnCannotExecute="True"
PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
Is exist any way to work under Universal Application (Windows 10)?

EventToCommand is not available in UWP (WinRT). You can (or should) use this instead:
1.Install the Behaviors sdk via NuGet
2.Use this code
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Loaded">
<Core:InvokeCommandAction Command="{Binding ApplyCommand}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>

Related

Hiding an element when "ImageBrush" image fails to load

I'm using an OpacityMask with an ImageBrush, and would like to hide the element in cases where the image fails to load. I tried using an EventTrigger, but this is
<Rectangle x:Name="imageRoot"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Fill="{StaticResource PhoneForegroundBrush}"
>
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{Binding ImagePath}" Stretch="Uniform">
<i:Interaction.Triggers>
<i:EventTrigger EventName="ImageFailed">
<ei:ChangePropertyAction PropertyName="Visibility"
TargetName="imageRoot">
<ei:ChangePropertyAction.Value>
<Visibility>Collapsed</Visibility>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</ImageBrush>
</Rectangle.OpacityMask>
</Rectangle>
This seems to just fail silently: there are no compile-time errors, nor runtime nor binding errors but the element does not collapse.
For some reason, "TargetName=imageRoot" is failing to bind the action to the element. Using TargetObject="{Binding ElementName=imageRoot}" does work, however.

Advanced ApplicationBar background color? (Windows Phone 8)

How do you change the background from a Advanced ApplicationBar? I tried this but it stays black.
<Sh:AdvancedApplicationBar Background="Gray">
<Grid>
<Sh:AdvancedApplicationBarIconButton Text="edit"
IconUri="/Assets/ActionBarButtons/btn_actionbar_edit.png"
Command="{Binding EditCommand}"
VerticalAlignment="Bottom" />
</Grid>
</Sh:AdvancedApplicationBar>
replace <Sh:AdvancedApplicationBar Background="Gray"> by <Sh:AdvancedApplicationBar BackgroundColor="Gray">
I found it out, it is a wrapper arround the normal Appbar so you need to do this:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar BackgroundColor="Gray"
Opacity="0.5" />
</phone:PhoneApplicationPage.ApplicationBar>

Why am I getting a XamlParseException here?

With this XAML:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource BrowsePhotosAppBarButtonStyle}" Click="btnOpenImgFiles_Click"/>
<Button Style="{StaticResource OpenAppBarButtonStyle}" Click="btnOpenMap_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource SaveAppBarButtonStyle}" Click="btnSaveMap_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
(which I adapted from markup I found online) I got a "Windows.UI.Xaml.Markup.XamlParseException"
Looking at this, I figured it should be AppBarButton instead of Button, so I changed them to that...but I'm still getting the same err msg. Is it because there's no such thing as "BrowsePhotosAppBarButtonStyle" (I can't find a list of valid values for that) or...???
Yes. It's probably the button styles which are based on legacy Windows 8 code. If you're targeting Windows 8.1 then you should use AppBarButtons rather than Buttons. I'd also put them in a CommandBar rather than layout out your own Grid in an AppBar.
If BrowsePhotosAppBarButtonStyle isn't specific to the sample you got that from it is probably available in the StandardStyles.xaml file included with Windows 8 templates. That file included a large number of commented out button styles for you to uncomment as needed.
Here's how you'd set this up in a Windows 8.1 app. For simplicity I didn't hook up the Click handlers, and you may want to update the Label and Automation names:
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" />
</CommandBar.SecondaryCommands>
<CommandBar.PrimaryCommands>
<AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File"/>
<AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</AppBar>
</Page.BottomAppBar>
See Adding app bars (XAML) for more details.

windows phone : no trigger in xaml?

I don't know how to use triggers in xaml of windows phone 8.
But I have seen some people do it, like below:
<toolkit:ListPicker Header="Background"
ExpansionMode="FullscreenOnly"
Template="{StaticResource ListPickerControlTemplate}"
VerticalAlignment="Top"
ItemsSource="{Binding Path=Buildings.ObjectList}"
Margin="0"
x:Name="buldings"
Padding="0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding Path=BuildingSelectionCommand}"
CommandParameter="{Binding Path=SelectedItem, ElementName=buldings}" />
</i:EventTrigger>
</i:Interaction.Triggers>
But I don't have System.Windows.Interactivity.
And I failed to find a compatible package through Nuget.
Thanks for your patience.
Right click on References -> Add Reference.. -> Extensions -> Select
System.Windows.Interactivity
The assembly resides here:
C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\Windows
Phone\v8.0\Libraries\

How to implement smooth transitions between containers in WinRT?

I have a Silverlight 4 game that I'm attempting to port to WinRT. It makes heavy use of Blend's FluidMoveBehavior to animate item transitions between containers (items float from one container to another). It appears that this functionality is missing from WinRT, and I have been unable to find a substitute.
In Silverlight, this XAML does it all:
<ItemsPanelTemplate x:Key="TransitioningPanelTemplate">
<StackPanel Orientation="Horizontal" Margin="0" Background="Transparent">
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.400" Tag="DataContext">
<il:FluidMoveBehavior.EaseY>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseY>
<il:FluidMoveBehavior.EaseX>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseX>
</il:FluidMoveBehavior>
</i:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
I looked into Transitions as suggested in this post, but this appears to only work within a single container.
Is there some use of Transitions that will allow this behavior? If not, is anyone aware of possible alternatives?
Try this
<ItemsPanelTemplate x:Key="TransitioningPanelTemplate">
<StackPanel Orientation="Horizontal" Margin="0" Background="Transparent">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<Your Transitions />
</TransitionCollection>
</StackPanel.ChildrenTransitions>
<i:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children" Duration="0:0:0.400" Tag="DataContext">
<il:FluidMoveBehavior.EaseY>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseY>
<il:FluidMoveBehavior.EaseX>
<BackEase EasingMode="EaseInOut" Amplitude="0.35" />
</il:FluidMoveBehavior.EaseX>
</il:FluidMoveBehavior>
</i:Interaction.Behaviors>
</StackPanel>