Windows Phone 8.1 scrolling image gallery - windows-phone-8.1

I'm creating an image gallery that users can view by swiping an image to the left or right (horizontally) to see the next (or previous) image. Ideally, the image would snap into place like a hub section. I don't want to use a hub, however, due to memory concerns, as well as a hub isn't meant for this purpose.
I'm getting the first image to load, but I cannot swipe or move to another image in the collection. The first image loads, and I cannot slide it left or right.
Any help or suggestions would be appreciated.
Here's my relevant code:
ViewModel
Images = (await _service.GetImages(sectionId))
.Where(i => "Image".Equals(i.Type))
.SelectMany(sr => sr.Images
.Where(ii => "Standard Resolution".Equals(ii.Type))
.ToList();
(This above code successfully returns a list of image objects.)
XAML
<Grid x:Name="ImagesLayout" Grid.Row="1" Height="250">
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Visible"
ItemsSource="{Binding Images}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Url}" Stretch="Fill" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Here's a good article that outlines exactly how to implement an image carousel for Windows Phone 8.1. http://www.captechconsulting.com/blogs/windows-81-image-carousel

Related

Enable scroll when user scroll by placing finger on richtextbox in winrt phone application

I have a page with too many richtext boxes and when scrolling if user place his finger on top of rtb form doesn't scroll, user has to place his finger on empty place.
Is there any possible way to stop that behavior?
I am working on a winrt universal application, question is specifically for windows phone project.
UPDATED:
Actually I am using component one library, and for some reason I want to use its richtextbox control just like a richtextblock. Below is xaml:
<as:C1RichTextBox x:Name="rtbBox" Grid.Row="0" Background="Transparent"
BorderBrush="Transparent" BorderThickness="0" Xaml:C1NagScreen.Nag="True" IsReadOnly="True" IsTapEnabled="False" DisableSelection="True" HideCaret="True"/>
<Grid Grid.Row="0" Height="Auto" Background="Transparent"></Grid>
<Image Margin="0,0,0,20" Width="200" Grid.Row="2" Source="{Binding InstallationInstructionPic1Bind}"/>
<as:C1RichTextBox x:Name="rtb1Detail" Grid.Row="3" Background="Transparent"
BorderBrush="Transparent" BorderThickness="0" Xaml:C1NagScreen.Nag="True"
NavigationMode="Always"
/>
These border and background properties are just to make its look more like a textblock, and to stop editing I have marked isReadonly property to true in .cs file. I have also placed transparent gridview above my first rtb to scroll and that works but there are some links in some of the rtb's and if I place grid view on top of all rtb I'll not be able to click these links. Ask anything if its not clear.

how to swap images like only one image display in one page,next image in next page just like windows phone gallery,in windows phone 8

I am new to windows phone 8 development so any one can you please help me in getting the Original size images which is stored into the camera roll (sdcard) in windows phone. and how to swap images like only one image display in one page,next image in next page just like windows phone gallery.I want to develop app that capture images fro camera roll,but all images display same size here i use listbox & scrollviewer(can you provide simple code for this)
You should use Pivot Control and in its content load the image
<phone:Pivot x:Name="PivotAttachment"
ItemsSource="{Binding ObsDownloadedAttachments}" Foreground="Black" FontSize="48">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Image Grid.Row="1" Source="{Binding DownloadedBitmap}" />
</DataTemplate>
</phone:Pivot.ItemTemplate>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding ImageUrl}"
Foreground="{Binding Converter={StaticResource ThemeColorBrushConverter}}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<!--Pivot item one-->
<!--Pivot item two-->
</phone:Pivot>

How to remove labels from search page in windows phone?

I want to remove the labels look like that image.
How to remove this. Please help me.......
Thanks in advance.
you can do this by using simple listbox.
just put image and textblock inside your listbox itemtemplete.
here is the code example.
<ListBox x:Name="lst">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Margin="10" Source="{Binding image}" Width="60" Height="60"/>
<TextBlock Text="{Binding text}" VerticalAlignment="Center" Margin="20,0"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
you cant remove jumplist property from app list as it is automatic ... it will show up whenever the count of the items in your applist is more than 40-45 apps and if u remove some apps it will automatically will be gone ... so if you want to remove that jump list view u will have to uninstall some apps.

WP8: Non-active PanoramaItem is tappable even when it is not active

When using the Panorama control, elements in a non-active PanoramaItem respond to tap events. You can reproduce this with the following XAML, which is only very slightly modified from the Panorama Application solution template that ships with the Windows Phone 8 SDK. You can see how items in the second PanoramaItem are tappable, even when that PanoramaItem is not active.
<phone:Panorama Title="my application">
<phone:Panorama.Background>
<ImageBrush ImageSource="/PanoramaApp1;component/Assets/PanoramaBackground.png"/>
</phone:Panorama.Background>
<!--Panorama item one-->
<phone:PanoramaItem Header="first item">
<!--Single line list with text wrapping-->
<phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-6,0,12">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
<!--Panorama item two-->
<phone:PanoramaItem>
<!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
<phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432" Tap="SecondItem_OnTap">
<!--Replace rectangle with image-->
<Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
<StackPanel Width="311" Margin="8,-7,0,0">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PanoramaItem>
</phone:Panorama>
Notice the "SecondItem_OnTap" Tap event handler hook-up in the LongListSelector.ItemTemplate in the second PanoramaItem.
I've observed this behavior in every app that isn't pre-installed on the phone, in other words, all non-Microsoft apps, including apps like Facebook and Pandora. Does anyone have
First, any insight as to why the behavior is different between Microsoft and non-Microsoft apps; and
Secondly, any suggestions on how to work around this behavior?
It's cumbersome, but you could capture the SelectionChanged event of the Panorama and disable clickable elements.
Yeah, this is a well known issue with panorama control. We addressed it in one of our apps by creating transparent overlay on top of inactive panorama item. Downside of this method is if you start side swipe on top of the overlay the gesture will be ignored. For our latest app we simply ignore this behaviour. If Microsoft was concerned about it they would fix it. As to why, well, Microsoft obviously doesn't use standard phone controls in their apps.
Thanks for the answers guys! I solved it with the following:
private void Panorama_OnSelectionChanged(object sender, SelectionChangedEventArgs e) {
this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem);
}
private void Panorama_OnLoaded(object sender, RoutedEventArgs e) {
this.UpdateHitTestForPanoItems(this.Panorama.SelectedItem ?? this.Panorama.Items.FirstOrDefault());
}
private void UpdateHitTestForPanoItems(object selectedItem) {
foreach (PanoramaItem item in this.Panorama.Items) {
item.IsHitTestVisible = item == this.Panorama.SelectedItem;
}
}
Of course, you'll need to actually hook up the Loaded and SelectionChanged events to the Panorama_OnLoaded and Panorama_OnSelectionChanged methods, respectively. I could also see moving this to a Behavior, which you could use on other Panoramas in your app.

In WinRT XAML App ListView.CanDragItems enables drag only in one direction when using touch

See the following very basic XAML. I run it in simulator in touch mode. I can drag the item right or left, but cannot down. It does work great when using mouse mode. After some googling I saw this thread (http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/8bb5e423-4517-448b-89ce-179a978e9e2d/), but it did not help me out.
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListView Background="AliceBlue"
AllowDrop="True" CanDragItems="True" SelectionMode="None" CanReorderItems="False"
IsItemClickEnabled="False" IsSwipeEnabled="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Margin="10">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="Blue" Width="100" Height="100"/>
</DataTemplate>
</ListView.ItemTemplate>
<x:String>s1</x:String>
<x:String>s2</x:String>
<x:String>s3</x:String>
</ListView>
</Grid>
</Page>
This is something so basic and it is strange that it does not work for me.
Does somebody know any solution or workaround?
Thanks
Meir
I might be wrong but AFAIK using touch you can only tear off items perpendicular to the scrolling direction. The same has been mentioned in the forum post you're linking to. If you set IsSwipeEnable=False you disable this behavior as well.
If you want your ListView to scroll horizontally instead, since you've already changed the orientation of ItemsPanelTemplate, you need to add the following to your ListView:
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Now tear off will work vertically instead of horizontally which should be more intuitive given your current layout.