In Win 8, the flipview control is a great control to browse the collection. But how or what is the best way to make a "selection" with a tap or a mouse click? I can always put a button outside of the flip view, but that's not the touch experience that everyone of a tablet would expect.
can someone give some example code (XAML/C#) of how to setup a flipview control with a selection of some sort that would navigate to a totally different page?
I wrote some sample code that works, if I'm understanding the question correctly. I am able to swipe through the FlipView and tap the individual item:
<FlipView Tapped="FlipView_Tapped_1">
<Image Source="Images/Apple.jpg" />
<Image Source="Images/Orange.jpg" />
<Image Source="Images/Banana.jpg" />
</FlipView>
And then
private YourTypeHere SelectedItem;
private void FlipView_Tapped_1(object sender, TappedRoutedEventArgs e)
{
this.SelectedItem = (sender as FlipView).SelectedItem;
}
You might not want to set a field, but you get the idea. Hopefully, you will be setting something in your view model. From there you can nav away or anything you need. A FlipView inherits from ItemsControl just like every other XAML repeater. So you can treat it exactly the same. http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx
Related
I've developed an app, as soon as the user enters a username and password and continues I display a dialog with a selection of buttons for the user to choose. As there is a login screen, the keyboard is displayed. I've hooked into the Enter button so that it is the same as tapping the Sign In button - this is where I hit issues.
IF the dialog is shown whilst the keyboard is active, the dialog content size is not full screen (despite the keyboard disappearing). But if the Sign In button is tapped (i.e. keyboard is not active) everything is fine.
The images below probably explain things better.
I'm not sure what to do to resolve this - any ideas?
FYI - I can scroll the buttons but only in that top section of screen.
As always - I ask a question and then find the answer.
When I catch the "Enter button tapped" event, I set focus to the page. It's a bit of a hack as I'd rather know why the issue is happening and stop it altogether instead of just dealing with it, but it works...
this.Focus(FocusState.Keyboard);// this is the line that solves it.
Full code:
private void tbPassword_KeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.Enter)
{
this.Focus(FocusState.Keyboard);
StartLogin();
}
}
#Rick have a good way.But I have other good way that you can make the keyboard show and UWP can arrange the UI.
You can use InputPane.GetForCurrentView().TryHide() to hide the keyBoard and use InputPane.GetForCurrentView().TryShow() to show the keyBoard. So you can hide it when you want to show the ContentDialog.
But I have not think it is a good way.
You can use InputPane.GetForCurrentView().Showing to know when is the keyBoard is Showed and use InputPane.GetForCurrentView().Hiding to know when hide the keyBoard .
First,you can make the Grid with a row is show keyBoard when show keyBoard it will get the Hight.
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition x:Name="HightKeyboard" Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
When the keyBoard be showed ,you can use e.OccludedRect.Height get the keyBoard's height.
InputPane.GetForCurrentView().Showing += (s, e) =>
{
HightKeyboard.Height=new GridLength(e.OccludedRect.Height);
};
And you should make the row height hide when hide the keyBoard.
InputPane.GetForCurrentView().Hiding += (s, e) =>
{
HightKeyboard.Height=new GridLength(1);
};
You can show the UI in the first Row ,and when the keyBoard show the height above will be arrange.
I am using Xamarin.Forms to display Items from a Websource in a Grid (within a ScrollView).
When the user hits the bottom of the grid, i want to load more items and add them to the grid. I know that usually a ListView is preferred for displaying data in this fashion (and that ListView has an ItemAppearing event) but sadly i have to use a grid.
If it helps, i could post some code, but im not sure if that is necessary here.
Thanks in advance
Edit: here is my really boring layout file:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyProject.MyNamespace.LayoutName"
SizeChanged="OnPageSizeChanged">
<ScrollView >
<AbsoluteLayout x:Name="myLayout">
<Grid x:Name="GridForItems" RowSpacing="6" ColumnSpacing="6">
</Grid>
</AbsoluteLayout>
</ScrollView>
</ContentPage>
I add all the rows, columns and items programmatically.
Since i had not gotten a satisfying answer to my original question (how to detect hitting the bottom of a scrollview) and i have not found a solution anywhere else on the net i am going to post how i solved this.
Note that this is probably the not an elegant solution and, if you have a better answer, please post it and i will accept it as the best answer.
What i did was implement a delegate for the Scrolled Event of ScrollView.
myScrollView.Scrolled += (sender, e) => { onScrolled(); };
Within my onScrolled i have the following if-clause to determine whether i have hit the bottom of the ScrollView:
private void onScrolled()
{
if(myScrollView.ScrollY >= myScrollView.ContentSize.Height - myScrollView.Height)
{
//Handle hitting the bottom
}
}
When you have a list of items you should use a ListView to display it. In the DataTemplate of this ListView you can specify how to display each item (use a grid there if you really need a grid).
In the Listview, you can implement following code to detect the bottom:
myListview.ItemAppearing += (sender, e) =>
{
// CHECK HERE
if(e.Item.Id == MyItems[MyItems.Count - 1].Id)
{
// YOU HIT THE BOTTOM
}
}
Why should I use Listview? Look at this forum thread about Dynamic Grids.
I'm new to Windows Phone apps development, and I've created a scrolling menu using the following xaml code :
<ScrollViewer HorizontalAlignment="Left" Margin="18,0,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="450" HorizontalScrollBarVisibility="Auto" Grid.Row="1">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<Button Height="620" FontSize="120" Name="gotoGmail" Width="Auto">Gmail</Button>
<Button Height="620" FontSize="120" Name="gotoYahoo" Width="Auto">Yahoo</Button>
</StackPanel>
</ScrollViewer>
I'd like to know whether it's possible to start an event once the user scrolls the menu from one button to another. If it is possible, i'd be grateful if you could explain how. If it's not , i'd like to hear about how could I do it using different tools rather than ScrollViewer. Thanks in advance !
There's no "Scrolled" event on the ScrollViewer, but what you can do is two-way bind a property to VerticalOffset. That lets you trigger an event/command from your view/viewmodel when the scroll changes.
Something like this:
<ScrollViewer VerticalOffset="{Binding VerticalOffset,Mode=TwoWay}" ...
And then in the data context:
public double VerticalOffset
{
get { return _verticalOffset; }
set
{
_verticalOffset = value;
// call "on scroll changed" actions here
}
}
private double _verticalOffset = 0;
how could I do it using different tools rather than ScrollViewer
You can of course make a scrolling menu using other approaches. I'll bet there is some nifty approach you could figure, using the WinRT transitions/animations stuff, but I'm not familiar enough with those to say. Here are some others (not sure which would be best/easiest for your scenario):
Probably using Canvas would be a quick-and-dirty way to do it (just set up buttons that set off Canvas.Left and Canvas.Top animations).
Extending ItemsControl along with a custom ControlTemplate would be a good approach if you want to create a re-usable component.
I like extending Panel, but you have to do the animations manually using a DispatcherTimer, and you have to lay out the buttons yourself using Measure and Arrange.
I have a problem with adding Item to FlipView dynamically, I have a very simple FlipView and I put these codes in SelectionChanged event:
private void myFlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
TextBlock tb = new TextBlock();
myFlipView.Items.Add(tb);
}
the strange is when I try to swipe between pages with mouse rapidly it works, but if I swipe with finger it stops working and I have to swipe on the page slowly to make it work.
I wish I could express the problem clearly....
I am not sure if I understood correctly? What exactly do you want to achieve?
In your case you are adding a new FlipViewItem which contains a TextBlock every time you navigate throught the FlipView. So theoretically you will never reach the end of a FlipView.
I have a WinRT/C#/XAML app with a view that has a vertical ListView of items. Depending on the amount of items the ListView shows a vertical scrollbar. Here's the XAML definition:
<UserControl.Resources>
<CollectionViewSource
x:Name="myViewSource"
Source="{Binding myViewModel.Items}" />
</UserControl.Resources>
...
<ListView
x:Name="myListView"
ItemsSource="{Binding Source={StaticResource myViewSource}}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</ListView>
Now everytime I navigate to this view, the selected item of the ListView is chosen by setting the databound SelectedItem property in the view model from code behind (OnNavigatedTo). My problem: the ListView doesn't scroll automatically to this selected item. The scrollbar remains at the top of the ListView and the user has to scroll manually to see the selected item.
I tried to execute myListView.ScrollIntoView(MyViewModel.SelectedItem); after setting the SelectedItem in the code behind (in OnNavigatedTo), but it doesn't work. The scrollbar remains at the top.
I'm aware of this thread on SO: Scroll WinRT ListView to particular group .
This seems to be a similar problem. But when I walk the visual tree of the ListView manually or with the WinRT XAML Toolkit, it doesn't find a ScrollViewer (returns null instead).
Thanks to Filip I noticed that calling ScrollIntoView() in OnNavigatedTo() was too early, because the ListView control is not loaded yet in this place.
The first solution idea was to bind the Loaded event of the ListView:
myListView.Loaded += (s, e) =>
myListView.ScrollIntoView(MyViewModel.SelectedItem);
Unfortunately that causes a nasty visual effect, where current ListView items overlap with the selected item for parts of a second, before everything is rearranged well.
The final solution I found is to call ScrollIntoView() asynchronously via the Dispatcher of the view:
myListView.Loaded += (s, e) => Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
() => myListView.ScrollIntoView(MyViewModel.SelectedItem));
With this solution the layouting works fine.
I had a similar need and resolved it in a slightly different manner. I subscribed to the SelectionChangedEvent from the ListView and performed the scrolling within the handler.
XAML:
<ListView x:Name="myListView" SelectionChanged="myListView_SelectionChanged" ...>
</ListView>
Code:
private void myListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
myListView.ScrollIntoView(myListView.SelectedItem);
}