Windows Phone 8. Panorama control ergonomic ambiguity - xaml

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>

Related

How to manually scroll using ItemsRepeater

I'm using ItemsRepeater. And using a ScrollViewer to scroll left/right.
For some reason, I have to disable ScrollViewer' HorizontalScrollMode, and add Left/Right Button to manual scroll.
The xaml is
<Grid>
<muxc:ItemsRepeaterScrollHost Margin="12" Loaded="ItemsRepeaterScrollHost_Loaded">
<ScrollViewer
x:Name="sss"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollMode="Disabled"
HorizontalScrollMode="Disabled">
<muxc:ItemsRepeater
x:Name="HorizontalRepeater"
ItemsSource="{x:Bind product}"
ItemTemplate="{StaticResource HorizontalTemplate}">
<muxc:ItemsRepeater.Layout>
<muxc:StackLayout Orientation="Horizontal" Spacing="12"/>
</muxc:ItemsRepeater.Layout>
</muxc:ItemsRepeater>
</ScrollViewer>
</muxc:ItemsRepeaterScrollHost>
<Button
x:Name="ButtonLeft"
Tapped="ButtonLeft_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
<Button x:Name="ButtonRight"
Tapped="ButtonRight_Tapped">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="18" />
</Button>
</Grid>
Then I use
sss.ChangeView(step, null, null);
Nothing happens.
Why, thx.
How to manually scroll using ItemsRepeater
For my testing, ChangeView can't works for ItemsRepeater, Please try replace it with ScrollToHorizontalOffset or ScrollToVerticalOffset method.
Update
After update OS to latest version (1909) ChangeView works well, It may be a issue within previous version.

UWP xaml: How to display a button with icon and text in it?

How can I display an image/icon AND text in a button?
<StackPanel Name="stackPanel" Orientation="Horizontal" Tapped="stackPanel_Tapped">
<Button x:Name="button" FontFamily="Segoe MDL2 Assets" Content="" Width="50" Height="50" Background="Transparent" />
<TextBlock Text="Grades" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
I can add a taplistener to the stackpanel, but that won't make the stackpanel have visual effect like a real button.
I've also tried:
<Button FontFamily="Segoe MDL2 Assets" Width="50" Height="50" x:Name="button" Content="test">
<Image x:Name="button" Source="Assets/test.png" />
</Button>
But I can't set the content twice. I want both text and an icon in a button so when a user clicks on it, it will have a visual effect like a button. Is this possible? Or does anyone else have another method to achieve this?
Thanks for reading.
So since I couldn't find a direct duplicate (which I could swear this is the type of question that's been asked before) I guess I'll supply a legitimate answer.
At the heart of the button's template is a ContentPresenter which allows you to pass in any CLR object. The caveat though is that only one can be passed. HOWEVER, if that object is a panel capable of containing children then it will pass everything through as the content.
So in this instance if we did it this way:
<Button>
<Image/>
<TextBlock/>
</Button>
Then it will fail and complain about only one object allowed at a time.
Except when you provide a parent panel to hold those children, it respects it all as content and will provide the desired result as example:
<Button>
<StackPanel>
<Image/>
<TextBlock/>
</StackPanel>
</Button>
So since StackPanel is a CLR object that can host children, you're good to go. Hope this helps, cheers!

Windows Phone - ToggleSwitch in LongListSelector (not changing when scrolling)

This is my LongListSelector in my page.xaml:
<phone:LongListSelector Name="ModuleList"
Margin="0,0,0,0"
Padding="0,0,0,0"
Style="{StaticResource LLSFloatingScrollbarStyle}"
ItemTemplate="{StaticResource ModuleListTemplate}"
ItemsSource="{Binding Modules}"/>
My template:
<DataTemplate x:Key="ModuleListTemplate">
<StackPanel Margin="{Binding StackModuleMargin}">
...
<toolkit:ToggleSwitch x:Name="LockSwitch"
Grid.Row="2" Margin="0,4,0,-26" Padding="0"
Content="" SwitchForeground="{StaticResource TrackitoOrange}"
IsChecked="{Binding IsToggleCheck, Mode=TwoWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<Command:EventToCommand Command="{Binding DataContext.LockSwitchTapCommand, ElementName=LayoutRoot}"
CommandParameter="{Binding}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</toolkit:ToggleSwitch>
...
The problem is that click is raised when I just scroll with list. Yes I have my finger in place where is toggle but I want to fix it when I scroll then toggle shoudn't be changed. Thanks
There's a probably a design issue you should explore if you have two competing tap events in your UI.
That said, you could override OnScroll and mark the event as handled at the original level so it doesn't bubble up to your toggle button.

WP8 Pivot inside Panorama

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

XAML: why is button on top when I clearly said to go on bottom?

In XAML, I want the button to go on the BOTTOM of the red rectangle.
I clearly say:
"HorizontalAlignment="Right"
VerticalAlignment="Bottom"
It goes to the right but stays on the top. Why is that?
alt text http://tanguay.info/web/external/buttonTop.png
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MultiplePages.Page"
Width="300" Height="150">
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="300" Height="150" Orientation="Vertical">
<StackPanel Width="300" Height="100" Background="Blue">
<TextBlock x:Name="theTextBlock" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. "
TextWrapping="Wrap" Height="100" Width="300" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Width="300" Height="50" Background="Red">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</UserControl>
The StackPanel is meant to take it's sizing from it's elements and it's container (depending on it's orientation), although what you've done looks correct, that's not the way the StackPanel is "meant" to be used. Although it looks like it's the height it's set, it's actual height (that it uses for laying out child controls) is the size of it's content (the button). The StackPanel has it's uses, but if you are doing anything other than a simple stack of controls then you generally should be using something else.
You can fix it by either sticking a sized grid inside:
<StackPanel Width="300" Height="50" Background="Red">
<Grid Height="50">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
/>
</Grid>
</StackPanel>
Or, for that particular layout, you might want to look at DockPanel, which will behave more like you would expect it to.