Why UWP Flipview doesn't flip to second item? - c#

I have a control to manage a FlipView (flipView) and I want synchronize SelectedIndex with a ListBox (subMenuList) to navigate between my contents. And because product owners have wonderfull requirements, I have another ListBox (shortcutList) in a control for the first item of the FlipView which is also binded to SelectedIndex of the FlipView.
Warning : some items of the lists are collapsed to simulate shortcuts to Flipview contents.
Those controls are perfectly synchronized together but the second item of FlipView :
Using mouse: on the first click, I can go to page 1 and when I flip back to shortcutList, I can not go to page 1 but I can go anywhere else. And then, when I flip back again to shortcutList, I can go to page 1 again and so on !
Using touch: I can tap go to page 1 as long as I want, I never reach my first page but I can go anywhere else.
I extract the specific part of my project to reproduce the use case on Github, that way everyone can understand what I mean.
I hope someone can tell me why UWP Flipview doesn't flip to second item ? And thanks to try to help me to find an issue.

The problem is that the item is already in selected state, so you cannot select it again - at least selecting it does not do anything as there is no selection changed event and hence the SelectedIndex binding doesn't propagate any changes. To prove it - the same thing happens if you jump to page 4, flip back to first page and click page 4 again.
How to solve this? I think you will have to use code. This XAML solution although almost works is quite fragile. The easiest solution would be to replace the ListBox in FlipContent0Control with three simple buttons and in their Click handlers navigate to the appropriate page. For an even better approach you should try to change the app to use MVVM design pattern.

I also commited a dirty fix on Github using directions of Martin Zikmund
How to solve this? I think you will have to use code. This XAML
solution although almost works is quite fragile. The easiest solution
would be to replace the ListBox in FlipContent0Control with three
simple buttons and in their Click handlers navigate to the appropriate
page.
and a tip from Jawahar
it is because your finger is still touching the control, so flipview
cannot animate. So I gave a small break after before navigating. By
the time user would have released the finger and it works !!!
in the following post.
So, three steps to resolve :
Replace SelectedIndex in FlipContent0Control with Tapped event on each ListBoxItem inner canvas.
Provide a event on tap to raise the target index to select in the FlipView.
Add a Task.Delay(100) in the method handler of event TargetedIndexChanged

Related

How to avoid losing the input focus on an HTML element inside a WebView?

I'm currently trying to build a touch keyboard to be used with an UWP app. One of the solutions I came up with was to use a brokered component to call SendKeys funcitons with buttons (IsTabStop being set to false and ClickMode to Press to prevent any loss of focus from the input controls). So far, everything works (tested it on TextBoxes without any trouble).
The problem: I'm encountering some issues using the WebView control : when I click a button, the WebView keeps the focus, as expected; however, the DOM elements (such as HTML's <input> markup) lose the input focus (while still being visually selected).
I found a way to solve this by resetting the focus on the webview; but that uncovered another issue. Let's say the input element is set to select all of it's content (the string) whenever it is focused. Then, each time I click one of my buttons, the content is selected and replaced by the new letter I sent to the WebView.
So, my question is, is there any way to avoid losing the focus of the DOM object when clicking on a XAML button?
NB : I do know about the InputPane, but I can't use it for this app (due to some restrictions on the client side). Also, let me know if something is unclear, and I'll edit asap.
NB2 : I have absolutely no access to the source code of the pages that will be displayed by the WebView, nor can I rely on the presence of a specific element.
The Anniversary Update introduced a new property FrameworkElement.AllowFocusOnInteraction for this scenario. Set it to false on your Button and the Button won't take the focus when it is clicked. The focus will stay on the WebView and the selection shouldn't get cleared (if not there's something else going on as well).
Prior to this there wasn't a good solution. The least bad I've seen was to call WebView.Focus() in the Button.Click handler to return the focus, then wait for the focus events to complete before proceeding in the Click hander.
If you need to target earlier systems than the Anniversary Update then you'll need to set AllowFocusOnInteraction from code after checking that it exists with ApiInformation.IsPropertyPresent . You can't do this directly in Xaml, but you can wrap the check in an attached property which can be called from Xaml. See my blog entry ComboBox on a Flyout attached to an AppBarButton loses mouse input on 1607 for sample code.

FocusManager.FocusedElement and MVVM

I'd like to control which button is focused in my view. User must be able to perform a job without need to use mouse. And job is going through all elements. Depending on element, some buttons will appears, some disappears.
I could do it with dependency properties. To example, if there are buttons Previous and Next, then I can provide IsPreviousFocused and IsNextFocused to set focus to them after certain event. Events can be: showing window for the first time (something should have focus already), reaching 1 element (hiding Previous button, setting IsNextFocused), reaching last element (opposite), etc.
This looks reasonable more or less.
But, if I have, to example, 10 buttons (different operations), then all of them will have to have dependency property!
So I was thinking about much easier approach: when I hide button, there will be no focus
if(FocusManager.FocusedElement == null) { ... }
If I can detect, when there are no focus, then I can try to set it to one of the buttons somehow. This way, I don't really need any complicated focus management
Question is: how to deal with FocusManager.FocusedElement in MVVM scenario? How to detect when there is no focus (when window is shown first time, when certain button is clicked and become invisible, etc)?
P.S.: I actually hate ms for making another technology without thinking fully into it; focus is very basic feature (and everybody care about it in their software), but there is no direct support for it (in xaml); looks like "oh, its too complicated, lets skip it" solution.
You could control your focus from your ViewModel by using the approach shown here:
Set focus on textbox in WPF from view model (C#)

Resize Columns Width on button click trigger in XAML - without code-behind

Im trying to resize Columns width in XAML using button click without code-behind,when the button is pressed new data is loaded but till now no automatic resizing (which im trying now) ive tried several ways but every time i face a different problem, the solution must be Code-behind free!
the latest solution was to make style-event for the button, but the problem was within the Event i can not reach the columns width value, using TargetName for example, (GridViewColumn.width defined as dataGridView2) or even (GridView defined as dataGridView1), it would give an error.
i have tried to make a Style for the GridView or GridViewColumn but also it did not work too, i made a style-event for the ListView but the button events (IsPressed etc..) were not recognized inside it (when you tap TargetName and Property) and gave an error!
Thank you in advance for your answers!
XAML:Code
Add it to code behind, that is the precise instance where you actually need code behind. Where you need code behind. i.e. when you deal with strictly controls it is acceptable and easy to have code behind handle things like sizing etc. Keep it simple.

WP7 Complex Layout

I want to make a complex layout, and would like advice on the best way to go about this.
Here is the behaviour I'm looking for: Layout of some text blocks and some images, such that a tap anywhere on the layout will go to another related page to that item. I want a long list of this item in a scroll viewer.
First, I tried to make a grid, add the items in it, then add this grid in the outer grid, the main one for pressing, I made an event handler for mouse click, but a problem appeared; that when I try to scroll "on the item to view the all list" the event handler fired!, I tried the mouseButton up and down, and the same happen
Second, I'm not sure if it's an efficient way to make it.
I want a good way to design this complex layout, and of course it will be a programmatic way, and a way to recognize the item I press on.
It sounds like you're trying to create your own ListBox control. Using this will give you the scrolling functionality for free, and you can use the ListBox's SelectionChanged event to determine when an item has been clicked.
The best way to design the layout will depend on how complex it actually is. If it merely contains an image and some text, you should have no problem hand-coding that in XAML. If there's a lot more to it than that, I'd recommend looking into Microsoft's Blend tool. Whichever route you choose to produce the XAML, you will place the code in the ListBox's ItemTemplate, which determines how each item in the ListBox is displayed.
A good walkthrough of something similar to what you're doing can be found at http://weblogs.asp.net/psheriff/archive/2010/10/27/windows-phone-list-box-with-images.aspx

Windows Phone 7, creating temporary pages with data?

My project involves a panorama page with a panorama item. In that panorama item is a listbox containing a stackpanel of buttons. When each button is clicked, it opens up a new page with info pertaining to that button they clicked on.
Now my question is this -- I have about 100 unique buttons in this listbox stackpanel.
Do I have to go through and create 100 pages for these buttons? I am concerned that this might tax on the application size, but wanted to know if there was a way where I can only use 1 page, and all the buttons reference that page, but depending on the button they click that one page will be populated with the specific information.
Is this doable, and if so, could I be pointed in the direction of a tutorial for it or someone very nicely provide some code to accomplish this?
Sincerely,
Tom
Create an instance of PanoramaItem and add it to the Items collection of your Panorama object.
Since you will need to refer to your Panorama object in code, you should give it a name. (You don't have to, but that's the least mucking about.)
How you get content into this PanoramaItem is another matter for which several approaches spring to mind, but more interesting is the question of how you cause this new PanoramaItem to be the selected item. Fast forward through much debugging and heartache: you can't.
Use a Pivot control and PivotItem and you will be able to set the SelectedItem of the Pivot to the freshly minted PivotItem.

Categories