WP8 Pivot inside Panorama - xaml

I want to place Pivot inside Panorama and disable horizontal flick gestures for Pivot.
If I set IsLocked="True" for Pivot, when I make horizontal flick,
Panorama item is not changing.
If i set IsHitTestVisible="False" for
Pivot, I cant tap anything inside Pivot.
How can make this:
Pivot can "sense" Tap and vertical flick gestures
Panorama can "sense" horisontal flick gestures

This is not recommended behavior for Windows phone platform. Putting a Pivot inside a Panorama doesn't make sense at all and goes against WP design guidelines. Cant you have the same functionality with Panorama control alone?
Use PanoramaItems as you use PivotItems, if you want vertical scrolling use a ScrollView instead. Doing like you mentioned might make your app not certifiable.
<Grid x:Name="LayoutRoot">
<phone:Panorama Title="my application">
<!--Panorama item one-->
<phone:PanoramaItem Header="item1">
<Grid>
<ScrollViewer Height="480">
<StackPanel>
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
<Button Content="Button" />
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem Header="item2">
<Grid/>
</phone:PanoramaItem>
<phone:PanoramaItem Header="item3">
<Grid/>
</phone:PanoramaItem>
</phone:Panorama>
</Grid>
With the above Panorama Page you can have horizontal scrolling among PanoramaItems and Vertical Scrolling for the content of the PanoramaItem

Related

How to set z-index on a control within AbsoluteLayout in xaml?

I have an AbsoluteLayout on a view in my Xamarin.Forms app, with 3 buttons in it. After another control is added programmatically, it covers the buttons. I cannot figure out how I can make the buttons to be always in front.
<ContentPage.Content>
<AbsoluteLayout x:Name="Container" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button
Style="{StaticResource CallButtonStyle}"
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.02"
Text="{Binding CameraSwitchIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".15,.95,80,80"
Text="{Binding VideoToggleIcon}" />
<Button
...
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".85,.95,80,80"
Text="{Binding AudioToggleIcon}" />
</AbsoluteLayout>
</ContentPage.Content>
all XF Layouts have RaiseChild() and LowerChild() methods you can use to adjust the Z index

Xamarin.Forms: how to automatically hide first CollectionView

I work on a Xamarin.Forms app that will contain a page with 2 CollectionView items:
an horizontal CollectionView that will display events
a vertical CollectionView that will display posts
I would like that the first list is progressively hidden as soon as the user starts to scroll on the second list.
We can found this behaviour on a sample from Syncfusion: but they use a SfRotator as control for the horizontal list:
I've tried to reproduce the same behaviour on my page, but it doesn't work as expected. My horizontal list is not hidden until I scroll vertically on this first list itself. If I scroll on the second vertical list, the first list is still visible:
My XAML looks like this:
<ContentPage.Content>
<RefreshView x:DataType="vm:NewsViewModel"
IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<ScrollView>
<StackLayout Padding="16" Spacing="16">
<CollectionView x:Name="EventsListView"
ItemsSource="{Binding Events}"
HeightRequest="250"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame BackgroundColor="Red">
<StackLayout x:DataType="model:Event" >
<Label Text="{Binding Name}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView x:Name="NewsListView"
ItemsSource="{Binding News}"
VerticalScrollBarVisibility="Never"
SelectionMode="None">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<ctrl:ShadowFrame>
<StackLayout x:DataType="model:News">
<Label Text="{Binding Description}" />
<Label Text="{Binding Date}" />
<Image Source="{Binding Image}" />
</StackLayout>
</ctrl:ShadowFrame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
=> Is there a way to achieve this?
Quick reminder that you Shouldn't use Scrollable Elements inside other Scrollable Element, it usually breaks how both work, Quoting:
Xamarin doesn't recommend using the ListView, WebView, or ScrollView
inside a ScrollView. Microsoft Xamarin.Forms Official Documentation
says that ScrollViews should not be nested. In addition, ScrollViews
should not be nested with other controls that provide scrolling, like
ListView and WebView.
And this is what happening:
The ScrollView isn't actually scrolling, the Vertical CollectionView is the one giving the Illusion that the page is scrolling, meaning that the Horizontal one is always on top.
How to fix it?
To fix this, you should remove the Vertical CollectionView and use some kind of Repeater View, this Post will guide you on how to achieve it.

HorizontalAlignment not working for Image inside Button (UWP)

I have a button with an Image inside it
<Button BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image HorizontalAlignment="Right" Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>
I want the image to be on the right end of the button so gave HorizontalAlignment="Right". But the Image always comes in the middle of the button. How can I fix this?
In the default style of Button, there is a ContentPresenter control to display the content of Button, it uses HorizontalContentAlignment property to control the horizontal alignment of the control's content. The default value is Center. So if you want to put the image in the right of Button, you can change the HorizontalContentAlignment to Right.
<Button HorizontalContentAlignment="Right" BorderThickness="0" Background="Black" Grid.Column="0" Width="400" >
<Image Height="20" Source="ms-appx:///Assets/LockScreenLogo.scale-200.png" Width="20" />
</Button>

XAML babysteps. Using the child element to set a button background color

I have the following and am trying to use an alternative syntax to set the property element but the button now seems to be filling the whole page:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me" />
<!--Background="Blue"-->
<Button>
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>
</Page>
How do I still use this alternative syntax but apply the color to bluebutton ?
There are two buttons in your code. Perhaps you wanted to do this:
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me">
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>

Windows Phone 8. Panorama control ergonomic ambiguity

I am developing Windows Phone 8 application.Everything is pretty good , but i found one thing i have not handled beforehand - and now than Panorama Control behavior confuses me.
Here`s simplified example of my application Hub Page (with Panorama Control):
Simplified page XAML is next :
<phone:Panorama>
<i:Interaction.Behaviors>
<b:PanoramaBehaviour/>
</i:Interaction.Behaviors>
<phone:PanoramaItem Header="Panorama1">
<ScrollViewer>
<StackPanel>
<Button Height="72" Content="Button1" Click="Button_Click"/>
<Button Height="72" Content="Button2" Click="Button_Click"/>
<Button Height="72" Content="Button3" Click="Button_Click"/>
<Button Height="72" Content="Button4" Click="Button_Click"/>
<Button Height="72" Content="Button5" Click="Button_Click"/>
<Button Height="72" Content="Button6" Click="Button_Click"/>
<Button Height="72" Content="Button7" Click="Button_Click"/>
<Button Height="72" Content="Button8" Click="Button_Click"/>
<Button Height="72" Content="Button9" Click="Button_Click"/>
</StackPanel>
</ScrollViewer>
</phone:PanoramaItem>
<phone:PanoramaItem Header="Panorama2">
<Grid Background="Red" Tap="GridTap"/>
</phone:PanoramaItem>
</phone:Panorama>
So the problem is next - often, when i try to swipe panorama from one item to another, i have one of buttons of first panorama item clicked. So i`m navigated to another application page.
Can somebody tell me, how do i prevent this panorama control behavior ?
-----------------EDIT:
EventToCommand solutions doesnt work for me.
Yes that one bugs me too and has been an issue since WP7. The solution is to use the Tap event in this case rather than the Click event as that doesn't give false activations in the same way. Tap is available on any UIElement, not just buttons.
DONE!)
As Paul Annetts told, tap event is raised in another way that Click event does.
So for Button on Panorama control solution is next :
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<Button Content="Button1">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<i:InvokeCommandAction IsEnabled="True" Command="{Binding TestCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>