how to add items to flip view dynamically? - windows-8

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.

Related

FlipView SelectionChanged event occurs only when touch manipulations are complete

From the docs:
Note When a user flips through FlipView content using touch
interaction, a SelectionChanged event occurs only when touch
manipulations are complete. This means that when a user flips through
content quickly, individual SelectionChanged events are not always
generated for every item because the manipulation is still occurring.
Is there a way to configure the FlipView control to fire SelectionChanged for each flip? This behavior makes implementing paging interesting as the user, if flipping fast enough, can flip to the end of the list before more items can be added.
One solution to the problem is to extend the FlipView and monitor its ScrollViewer. Here is a quick sample of what I'm suggesting. Seems to work on horizontal flip view (haven't handled any other cases, and haven't tested too much).
public class FixedFlipView : FlipView {
public ScrollViewer ScrollViewer {
get;
private set;
}
protected override void OnApplyTemplate() {
base.OnApplyTemplate();
this.ScrollViewer = (ScrollViewer)this.GetTemplateChild("ScrollingHost");
this.ScrollViewer.ViewChanged += ScrollViewer_ViewChanged;
}
void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) {
var index = (int)this.ScrollViewer.HorizontalOffset - 2;
if (this.SelectedIndex != index) {
this.SelectedIndex = index;
}
}
}
Some things to note:
You may want to get the ScrollViewer in a different way that does not depend on its name. Like using the method in my answer here. Although, I'd guess this is fine, too.
It may be a better idea to use a separate event for this. In the code above I set the SelectedIndex property, which raises the SelectionChanged event, but it is also very likely to be doing other stuff as well, so it may be a problem in some cases.

Custom context menu XAML for WP8

I try to implement a custom ContextMenu in a LongListSelector.
I'm not using the ContextMenu from Microsoft.Phone.Controls.Toolkit, it's basically the same as in the Rowi App:
(source: hiddenpineapple.com)
Approach 1
My list item toggles a VisualState on hold and an overlay is shown with controls in it.
The problem
I can't find a way to go back to the default state when the user clicks outside of the list item (as in the default ContextMenu).
Approach 2
I've implemented a custom template for the toolkit ContextMenu which looks exactly the same. I had to move its margin top to -itemHeight, as by default it is below the item.
The problem
The problem with this solution is, that it automatically closes itself when opening and I couldn't figure out how to avoid this.
Another problem was that it didn't work well with TiltEffect.IsTiltEnabled from the Toolkit (visual problems).
I need your help
Any suggestions on how to get this working?
Answer
Thanks to Cheese, now I know how to properly close the menu when the user clicks outside.
His suggestion was to get the coordinates of a Tap event on the current page, and check if it's inside the menu. When not, close the menu.
So I added a Tap listener to the page when the menu opens, and removed it when the menu closes. From the page listener I got the event coordinates and could check if it's inside the control which holds the menu (same size and position). I received the position of the control with Point leftUpperPoint = control.TransformToVisual(page).Transform(new Point(0, 0)) and the rightLowerPoint by adding the ActualWidth and ActualHeight.
But then I realized:
Why should I even calculate if the tap is inside the menu? I always want to close the menu when the user taps anywhere on the screen. If it's outside, yes. If it's on a menu button, yes.
Another modification I made was to listen for MouseLeftButtonDown instead of Tap as it also triggers when the user swipes.
So I removed this code and came up with the following:
private void ToggleMenu(object sender, System.Windows.Input.GestureEventArgs e)
{
PhoneApplicationFrame frame = ((PhoneApplicationFrame)Application.Current.RootVisual);
VisualState state = this.States.CurrentState;
if (state == null || state.Name == "DefaultState")
{
frame.MouseLeftButtonDown += MouseDownDelegate;
this.State = "MenuState";
}
else
{
frame.MouseLeftButtonDown -= MouseDownDelegate;
this.State = "DefaultState";
}
}
private void MouseDownDelegate(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
ToggleMenu(sender, null);
}
This works perfectly!
Thanks to Cheese for the hint.
Something like this by #denniscode http://dotnet.dzone.com/articles/rowi-show-tap-menu
Approach 1 problem
The best solution would be:
Get the menus coordinates, when user makes a tap - you check are tap coordinates on menu or not, if not - dissmiss - simple.
Approach 2 problem
I guess you had some button in a corner and when you tapped on it - nothing happened? And when you dissmissed the Tilt all worked. It seems that tilt works faster than a click, so, tilt changes the button coordinates, and device thiks you have missed/or dragged off
You can use what #ScottIsAFool suggested and maybe create another Dependency Property on your TapMenu control of type UIElement named CloseWhenTappedElement and automatically listen for Tap events inside your control once set. For example
<Grid x:Name="TapArea"/>
<TapMenu CloseWhenTappedElement="{Binding ElementName=TapArea"}/>

Reset SelectedItem in LongListSelector after selection

I'm using Caliburn.Micro and the LongListSelector. Because binding SelectedItem is a problem I act on the SelectionChanged event. Problem is, after returning to the list, when I click the same item again, it is already selected. So the event doesn't fire. I could set the SelectedIndex to -1 or something, but in Caliburn.Micro I can't access UI controls. That's the point of MVVM, isn't it?! :)
Here's my XAML
<LongListSelector x:Name="NewsItems"
ItemsSource="{Binding NewsItems}"
cal:Message.Attach="[Event SelectionChanged] = [NavigateToArticle($eventArgs)]" />
How to solve this? How can I reset the SelectedItem when I can't access the LongListSelector from code?
Thanks!
You have to put your LongListSelector SelctionMode="Multiple",
or
You can get it using Gesture Tap event.
Did not understood real problem but
I think you can solve your problem if selection change event fire every time when user select item-
private void productList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
LongListSelector productList= (LongListSelector)sender;
if (productList.SelectedItem == null)
return;
//Write your code here
//For Tapping many times..
productList.SelectedItem = null;
}
The above code will make selection change event to fire on selection of same item every time.

click a textblock without selecting the parent listview item

I'm developing a windows store application with C# and XAML. I am using a ListView to display the collection of data.
Inside the ListView I have a data template which has grids and a TextBlock in the grid. I want to tap/click the TextBlock and give action without selecting the parent ListView item as I already have event to handle the selected ListView item. I don't want both to overlap.
Thanks in advance for any response.
So you want to be able to select the ListViewItem when tapping one part of it, but not the TextBlock? If this is the case, in the TextBlock's Tapped event add e.Handled = true;. This should make it so that it isn't further routed up to the parent ListView.
The other thing you can do (which will likely be a more general solution to whatever you want to do with your ListViewItems) is to not use thing SelectionChanged event and instead handle everything with ItemClick. You can then deduce whether the OriginalSource of the event is indeed your TextBlock. Then, if it's not the TextBlock, change the parent ListView's SelectedItem.
An example for chceking the OriginalSource
public static void ItemClickEvent(object sender, ItemClickEventArgs e)
{
if(e.OriginalSource is TextBlock)
DoNothingOrMaybeTextBlockEvent();
else
{
ListView.SelectedItem = e.ClickedItem;
}
}
Hope this helps.
Edit: Added some example code for the OriginalSource check

adding images to the label suggestion

In my project I need to create some play,pause,stop buttons in one composite.
For that I created one composite and added these buttons there. Also I have added the images
for each button. But after drawing, it does not look good. I mean images on the buttons does not look good.Clients are not satisfied. Now is it possible to add Images to Label and give some Toggle button actions to the label? I know I can add images to the label. But when I click the label,it does not give button effect..
If you want a custom look for your 'buttons' you could use labels with custom images (one for the normal state and one for the "pushed" state. Something like:
final Label stop = new Label(composite, SWT.NONE);
stop.setSize(STOP_IMG.getImageData().width, STOP_IMG.getImageData().height)
stop.setBackgroundImage(STOP_IMG);
stop.addMouseListener(new MouseAdapter()
{
#Override
public void mouseUp(MouseEvent e)
{
stop.setBackgroundImage(STOP_IMG);
}
#Override
public void mouseDown(MouseEvent e)
{
stop.setBackgroundImage(STOP_DOWN_IMG);
// DO ACTION
}
});
For a nice UI you could also add a MouseTrack listener and have different images for the mouse over states.
Disadvantage of this is you are making it less accessible as it will only respond to mouse events. If you go for this approach you should look at creating your own class that extends MouseAdapter, and takes the label, images and action to invoke in a constructor so you don't end up with tonnes of very similar anonymous classes.
I have used toolbars in the past to achieve a nice effect.
This will create a toolbar with an item that behaves like a regular button:
//Toolbar button
ToolBar toolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toolItem = new ToolItem(toolBar,SWT.PUSH);
toolItem.setImage(image);
This will a toolbar with an item that has toggle behaviour:
//Create a toggle effect
ToolBar toggleToolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toggleToolItem = new ToolItem(toggleToolBar,SWT.CHECK);
toggleToolItem.setImage(image);