I'm using pivot control to display a large number of images (about 300). I thought of just using 3 pivot item, and when user swipes, change either pivot item or update item source. But I don't know how to do this efficiently ?
Or is there a way of using gesture and stimulating swipe effect as the pivot does ? Something like transition ?
You can use normal Image Control with gesture Manipulation events to swipe left to right and right to left for previous/next photos.
Please find the code below.
XAML Code
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Margin="0">
<Image Margin="0" x:Name="ImagePanel" Source="{Binding SelectedPhoto.PhotoURL}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
C# code
public SlideShow()
{
// Tag ManipulationCompleted event for the current page in the constructor.
ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(SlideShow_ManipulationCompleted);
}
// ManipulationCompleted event. Update the Previous/next photo based on the swipe direction.
void SlideShow_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
var manipEndPoint = e.TotalManipulation.Translation;
const int threshold = 100;
if ((manipEndPoint.X > _manipStartPoint.X) && ((manipEndPoint.X - _manipStartPoint.X) > threshold))
{
LoadPreviousPhoto();
}
else if ((manipEndPoint.X < _manipStartPoint.X) && ((_manipStartPoint.X - manipEndPoint.X) > threshold))
{
LoadNextPhoto();
}
}
Let me know if you need any more help.
Thanks,
Kamal.
Related
I have a xamarin.forms app in which I am trying achieve a specific UI.Please find the attched image.
.
As you can see It is a list view and have a breadcrumbs below it. What I am trying to achieve is when user click any of the other items such as "stores" or "users" in breadcrumbs, then the upper layout horizontally slide and show another list view.Where I am stuck is I want to fix the breadcrumbs at the bottom and the change only needs the upper layout i.e.; the list view layout. How can I achieve this. Any ideas will be much helpfull.
What I am thinking is putting four listview inside horizontal scroll view.But is it the better approach?
This could be achieved by simple Translate animation.
A simple implementation of the idea of using translation. Change as per need.
XAML layout:
<StackLayout>
<Grid x:Name="rotatingView">
<ListView
...../>
<ListView
TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
...../>
<ListView
TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
...../>
<ListView
TranslationX="{Binding Width, Source={x:Reference rotatingView}}"
...../>
</Grid>
<Button
Text="0"
Clicked="Button_Clicked"/>
<Button
Text="1"
Clicked="Button_Clicked"/>
<Button
Text="2"
Clicked="Button_Clicked"/>
<Button
Text="3"
Clicked="Button_Clicked"/>
</StackLayout>
Xaml.cs clicked:
int previousSelectedIndex = 0;
private async void Button_Clicked(System.Object sender, System.EventArgs e)
{
Button selectedtab = (sender as Button);
int selectedViewIndex = int.Parse(selectedtab.Text);
VisualElement previousView = rotatingView.Children[previousSelectedIndex];
VisualElement selectedView = rotatingView.Children[selectedViewIndex];
bool isMovingForward = true;
if (previousSelectedIndex < selectedViewIndex)
{
isMovingForward = true;
}
else if(previousSelectedIndex > selectedViewIndex)
{
isMovingForward = false;
}
if (selectedViewIndex != previousSelectedIndex)
{
selectedView.TranslationX = rotatingView.Width * (isMovingForward ? 1 : -1);
await Task.WhenAll(
selectedView.TranslateTo(0, 0),
previousView.TranslateTo(rotatingView.Width * (isMovingForward ? -1 : 1), 0));
}
this.previousSelectedIndex = selectedViewIndex;
}
Here I have used the text of buttons to select index of the view. Hope this could help.
if you are looking for a breadcrumb navigation control.
I have created a control that will generate one automatically, and it's highly customisable.
https://github.com/IeuanWalker/Xamarin.Forms.Breadcrumb
When a Windows Phone 7 application opens a view, a certain order of business is followed in order to create. As far as constructors and events go, I have found this order to be true:
Constructor
OnNavigatedTo
OnLoaded
However, I am in a position where I need to databind a List to a ListBox after the basic view (background, other elements etc) has loaded. So I need to know when and how to know that the view is loaded before I get on with the data binding.
I have tried to do this on the OnLoaded-event, but it seems like if I do the data binding here - and right after it traverse those elements - they don't seem to exist yet (the VisualTreeHelper-class can't seem to find the nodes). So as you see, I am stuck.
Any help would be greatly appreciated.
Edit: As requested, here is some more information about what's going on.
My List is populated by some custom (not too complicated) objects, including an asynchronously loaded image (courtesy of delay.LowProfileImageLoader) and a rectangle.
The XAML:
<ListBox x:Name="ChannelsListBox" ItemsSource="{Binding AllChannels}">
//...
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="ChannelTile" Margin="6,6,6,6" Tap="ChannelTile_Tap" Opacity="0.4">
<!-- context menu goes here -->
<Rectangle Width="136" Height="136" Fill="{StaticResource LightGrayColor}" />
<Image Width="136" Height="136" delay:LowProfileImageLoader.UriSource="{Binding ImageUri}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The code-behind:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
UpdateApplicationBar();
pickChannelsViewModel = new PickChannelsViewModel();
DataContext = pickChannelsViewModel;
if (hasUpdatedTiles)
{
pickChannelsViewModel.IsLoading = false; // Set by UpdateTiles()
}
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
// This is where I would data bind the list (instead of in XAML)
UpdateTiles(); // Traverses the list and changes opacity of "selected" items.
}
protected void UpdateTiles()
{
foreach (var item in ChannelsListBox.Items)
{
if (pickChannelsViewModel.SelectedChannels.Contains(item as Channel))
{
var index = ChannelsListBox.Items.IndexOf(item);
// This returns null when databinding in codebehind,
// but not in XAML
ListBoxItem currentItem = ChannelsListBox.ItemContainerGenerator.ContainerFromIndex(index) as ListBoxItem;
if (currentItem != null && VisualTreeHelper.GetChildrenCount(currentItem) == 1)
{
var OuterWrapper = VisualTreeHelper.GetChild(currentItem, 0);
var MiddleWrapper = VisualTreeHelper.GetChild(OuterWrapper, 0);
var InnerWrapper = VisualTreeHelper.GetChild(MiddleWrapper, 0);
Grid currentItemGrid = VisualTreeHelper.GetChild(InnerWrapper, 0) as Grid;
currentItemGrid.Opacity = 1.0;
}
}
}
pickChannelsViewModel.IsLoading = false;
hasUpdatedTiles = true;
}
The items themselves are in-memory (fetched from REST at an earlier stage in the application), so should be available instantaneously.
The issue I am trying to resolve is a fairly long load time on this particularly view (there is about 140 of these items being created, then filtered through and changing the opacity).
I believe you are doing something like:
myListBox.ItemSource=myList;
Once you set the ItemSource of a ListBox the changes in your List should be reflected in the ListBox at all times. If the ListBox is empty the reason must be that the List is not being populated properly or invalid Bindings in the ItemTemplate. You should debug and find out if your List has any items by inserting a breakpoint in the Loaded() method. Also, you've not mentioned what items does your List contains or, where is it being populated in the application? Incomplete information doesn't help anyone.
I have a Pivot control in a page.
<controls:Pivot x:Name="pvtSearchFlights">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragCompleted="GestureListener_DragCompleted" Flick="GestureListener_Flick" />
</toolkit:GestureService.GestureListener>
<controls:PivotItem x:Name="pvtItemCurrent">
<StackPanel Height="700" Background="AliceBlue">
</StackPanel>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemNext">
<StackPanel Height="700" Background="Red">
</StackPanel>
</controls:PivotItem>
<controls:PivotItem x:Name="pvtItemPrevious">
<StackPanel Height="700" Background="Green">
</StackPanel>
</controls:PivotItem>
</controls:Pivot>
Here i am able to find the whether flick is right or left by the below code:
private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Angle > 90 && e.Angle < 270)
{
txtTest.Text = "right";
}
else
{
txtTest.Text = "left";
}
}
If i drag the pivot pivot control, the pivot item is Changing but GestureListener_Flick event is not fired because it is a drag event(here it fired GestureListener_DragCompleted event). So while i am dragging also i have to find whether it is dragged to left or right?
Here my main aim is to find the whether pivot is moved right to left or left to right?
How can i find whether it is dragged to left or right?
Thanks in advance.
What about storing current index of Pivot and add SelectionChanged event handler and then just compare old stored index and new one from event?
If diff "new - old" is gt 0, it is to the right and if diff is lt 0 it is to the left. You have to handle special state, when old or new is 0.
I'm trying to find a method of displaying a text block or that will allow me to arbitrarily drag and drop drop that control around the screen.
I've scoured google and here, but every drag and drop related question I find is around exchanging data, not just position.
Is anyone aware of something ready to go, or can you point me in the direction I should be looking?
You can do this by using behaviors:
<TextBlock Text="Hello!">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</TextBlock>
You need to add a reference to Microsoft.Expression.Interactions in your solution, and the following namespace at the top of your XAML file:
xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
The xaml:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="30" Margin="125,132,0,0"
Name="textBlock1" Text="TextBlock"
Width="83" MouseMove="textBlock1_MouseMove" />
</Grid>
and the code behind:
private void textBlock1_MouseMove(object sender, MouseEventArgs e)
{
TextBlock realSender = (TextBlock)sender;
var theParent = (Grid)realSender.Parent;
var position = e.GetPosition(theParent);
realSender.Margin = new Thickness(
position.X - realSender.Width / 2,
position.Y - realSender.Height / 2, 0, 0);
}
The toolkit sample used to include an example of doing this.
Not sure if it's still in there though as it was based on the gesture support which has since been deprecated. If it's gone check the August 2011 version.
Question:
Get scroll event for ScrollViewer on Windows Phone
I have a scrollviewer like so:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer x:Name="MyScroller">
<StackPanel>
<!-- ... -->
</StackPanel>
</ScrollViewer>
</Grid>
I need the event for when the scrolling occurs for MyScroller:
// MyScroller.Scroll += // <-- "Scroll" event does not exist on ScrollViewer
MyScroller.MouseWheel += MyScroller_MouseWheel; // Does not fire on scroll
MyScroller.ManipulationDelta += MyScroller_ManipulationDelta; // Fires for pinch-zoom only
MouseMove fires when ScrollViewer is scrolled:
public MainPage()
{
InitializeComponent();
MyScroller.MouseMove += MyScroller_MouseMove;
}
void MyScroller_MouseMove(object sender, MouseEventArgs e)
{
throw new NotImplementedException();// This will fire
}
It isn't intuitive, since it is named as a "mouse" event and there is no mouse on the phone. The touch point does move, however, relative to the ScrollViewer container, which is how it can handle scrolling.
It's not that simple, but there's a few scroll detection mechanisms written in this question:
WP7 Auto Grow ListBox upon reaching the last item
Basically take a look at the way OnListVerticalOffsetChanged is called and used.
With Mango, you can watch for the "ScrollStates" visual state to change as described in this sample project.