Difference between revisions of "Version 1.3 (Xamarin)"
Line 30: | Line 30: | ||
= XAML changes = | = XAML changes = | ||
− | + | == [[Map_View_(Xamarin)#Context_Object|Show on map]] == | |
+ | To enable the selected effect, you need to add <code>SelectedPOI="{Binding SelectedPOI.WorldARItem}"</code> to the <code>mapsUi:MapView</code> control in the existing (if any) UBIKMapArea template. | ||
+ | |||
+ | == [[POI_View_(Xamarin)#Context_Object|Show in AR]] == | ||
+ | The selected effect is implemented in the following templates. | ||
+ | * UBIKWorldViewItemArea; | ||
+ | * UBIKDisplayViewItemArea; | ||
+ | * UBIKCameraViewItemArea. | ||
+ | If you have customized these templates, they need to be updated to display the effect. Below is the example effect added in the new default templates. | ||
+ | <source lang = "xml"> | ||
+ | <Grid x:Name="PoiGrid" xmlns:behaviors="clr-namespace:UBIK.CPL.Behaviors;assembly=UBIK.CPL"> | ||
+ | <Grid.Behaviors> | ||
+ | <behaviors:DataChangedBehavior | ||
+ | Binding="{Binding IsSelected}" | ||
+ | ComparisonCondition="Equal" | ||
+ | Value="True"> | ||
+ | <behaviors:ScaleAction FinalScale="2" TargetObject="{Binding Source={x:Reference PoiGrid}}" /> | ||
+ | </behaviors:DataChangedBehavior> | ||
+ | <behaviors:DataChangedBehavior | ||
+ | Binding="{Binding IsSelected}" | ||
+ | ComparisonCondition="Equal" | ||
+ | Value="False"> | ||
+ | <behaviors:ScaleAction FinalScale="1" TargetObject="{Binding Source={x:Reference PoiGrid}}" /> | ||
+ | </behaviors:DataChangedBehavior> | ||
+ | </Grid.Behaviors> | ||
+ | <Frame | ||
+ | BorderColor="Orange" | ||
+ | HasShadow="True" | ||
+ | IsVisible="{Binding IsSelected}" /> | ||
+ | <!-- Here goes the actual content of the POI --> | ||
+ | </Grid> | ||
+ | </source> | ||
+ | * Through the use of those two behaviors, the POI is scaled up/down when it becomes selected/unselected; | ||
+ | * The frame with a border color highlights the POI when it's selected. | ||
+ | |||
+ | {{Hint|You can implement different effects as you like.}} | ||
<headertabs /> | <headertabs /> |