TextBox gaining unwanted focus - xaml

I have a simple xaml page with one TextBox and a RichTextBlock.
Inside that RichTextBlock there are some InlineUIContainers.
But when the user presses a button, I remove through code an InlineUIContainer. This goes well, but each time this is done, the TextBox that is on the page get's focus!
Resulting in the touch keyboard popping up. Anyone an idea why this is happening? Or how I can prevent this?
I can't set the IsTabStop, because the user still has to be able to fill something in if needed.
I'm working on the Windows Phone part of a WinRT Universal app
Some code, but the actual removal is done in the Attached Dependency Property
It's the KeywordsInput textbox that get's the focus after each removal
<TextBox x:Uid="Search_KeywordsInput" x:Name="SearchKeywordsInput"
Text="{Binding KeywordsInput, Mode=TwoWay}" />
<RichTextBlock Grid.Row="4"
Margin="0,9.5,0,0"
IsTextSelectionEnabled="False"
dependencyProperties:RichTextBlockTagCloud.Command="{Binding SelectedTagFilterCommand}"
dependencyProperties:RichTextBlockTagCloud.TagItems="{Binding SelectedFilters, Mode=TwoWay}">
<Paragraph x:Name="TagsFilters" />
foreach (InlineUIContainer container in buttonsToRemove)
tagParagraph.Inlines.Remove(container);

Have you try to set IsTabStop=False on Button, so clicking button doesn't steal RichTextBox focus.

If you remove the focused control then the focus will move to a valid control. In this case, the next control found is your TextBox. If you park the focus on a benign (non-text) control before removing the focussed button then the keyboard won't trigger.
Depending on your overall layout you may be able to set the focus to the page, you may have another button which would make sense, or you could add a non-editable control to the tab order.

Related

UWP PlaceHolderText in Textbox not showing at runtime

I have a small data entry form (ContentDialog) in UWP XAML.
<ContentDialog .....>
<StackPanel>
<TextBox PlaceholderText="Name" Text="{Binding ItemName}"/>
<TextBox PlaceholderText="Notes" Height="62" Margin="0" AcceptsReturn="True"/>
<ComboBox PlaceholderText="Item Type" ItemsSource="{Binding ItemTypeList}" .../>
</StackPanel>
In the designer the placeholder text shows correctly for all controls, but as soon as the dialog is shown at runtime, the placeholder text is blank for the text boxes, even the ones without focus. The placeholder text is correct for the combo box (and some AutoSuggestBox controls) but all TextBox controls show empty - whether they are bound or not.
I am fairly new to UWP, is there something else that could be affecting this?
More Info:
I found that this also happens on normal pages and usercontrols. Only the TextBox seems to be affected.
Testing a bit more shows that if the pages are displayed directly, eg: changing rootFrame.Navigate in App.xaml.cs to display "HomePage" instead of "MainPage", the placeholders show. However my "MainPage" has a hamburger menu (I am using the Devexpress Hamburger Menu Frame) and it seems once this is loaded, my TextBoxes no longer display the PlaceHolderText at runtime. I'll keep testing and maybe raise this with DevExpress as it seems to be an issue with that control. I'll update this post when I solve this.

How to show image icon instead of text in ToggleButton in Windows Phone 8.1?

This is the XAML code for a simple toggle button in Windows Phone 8.1.
<ToggleButton Content="Text_Here" />
How can we show an icon for the same Toggle Button??
ToggleButton has ContentPresenter inside - you can put most of things into it for example icon:
<ToggleButton>
<SymbolIcon Symbol="Message"/>
</ToggleButton>
or Image if you want:
<ToggleButton>
<Image Source="image.jpg"/>
</ToggleButton>
or any Panel, Button another ToggleButton and so on.
You can also play with its Style and Enabled/Disabled Content.
First you can try if the AppBarToggleButton fits your needs. It toggles an Icon.
Else, you have to edit the ControlTemplate for the ToggleButton. (In Designer: Right click it, got Edit Template -> Edit a Copy).
The default Template features two content presenters for enabled and disabled content, which you can replace to display your icons.

How to create toggle buttons in Windows 8?

I need to create a group of 5 buttons. Only one can be pressed, like Radio Button, but I do not want to show the circle. I would like to use the button look.
Somebody do know which is the best way to do it?
I have found for WPF:
<RadioButton Style="{StaticResource {x:Type ToggleButton}}" />
but it does not work for Windows 8.
Thank you
Is this a group of actual buttons with an action assigned to the click event of each, or are you just trying to remove the circle form a RadioButton type control?
Please note that the user will likely expect a RadioButton control to look and feel like a RadioButton. Changing this just for the sake of it may not be a good idea, but if you want to go ahead with it you could try one of the following options.
1) Edit the template for a radiobutton control to hide the selcetion circle. (I don't know if that's even possible in all honesty, but in theory, it should be)
or
2) Emulate the behaviour with a ListView with SelctionMode set to "Single"
Things get a little more complicated if you want to handle click events on each "button", but it is not impossible. In your ItemTemplate, add a button (presumable with a style of "TextButtonStyle") and set the event handler of the Click event to check which button was pressed and act accordingly.
There is a control called ToggleButton, why don't you use that?

How can I create an AppBar in Metro that works in a WebView?

So I got a normal AppBar to work in a C# metro app, but the problem is I need the app to display an html page. I create a WebView that takes up 100% of the width and height of the page, and by doing so, the AppBar doesn't show up anymore on right clicks and edge swipes. Is there a way for the AppBar to work with such a WebView in place?
--Resolved--
What I ended up doing was adding a 1px border around the WebView so that swipes could be detected. Since what I included in my WebView dynamically changes with time, WebViewBrush didn't work out for me. Instead I just shrunk the size of the WebView when the AppBar is opened and then expanded it when it was closed.
Not trying to steal Filip's answer, but I think a few more details are necessary to fully answer the question.
Even with a WebView running full-screen, the AppBar tries to show itself when you right-click or swipe. You can prove this by subscribing to the AppBar.Opened event. What's interesting is that the AppBar appears to somehow know it's obscured and automatically closes itself. Even if it didn't close itself, you wouldn't be able to see it because it's obscured under the WebView.
Filip had the right idea about hiding the WebView and using WebViewBrush while the AppBar is open. You can find a good example of doing that here:
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webviewbrush.aspx
As for when to swap between WebView and WebViewBrush, I'd simply do it on AppBar.Opened and reverse it on AppBar.Closed. AppBar is light dismiss, meaning as soon as you tap anywhere outside of it's client area it will close.
One last word of advice: In my testing it seemed that the swipe gesture was getting swallowed sometimes. That problem seemed to go away when I put a 1 pixel boarder on top and bottom of the WebView. Your mileage may vary.
You need to hide the WebView while displaying XAML UI on top of it and use the WebViewBrush instead.
As suggested above, the 1px border can help with ensuring the top/bottom swipe is honored for the AppBar. However, similar to #matthieu I was still having issues getting the AppBar to open reliably when using the mouse and right-click method.
The issue was that I included the XAML element as a peer to the WebView, rather than as a parent as the MSDN reference for AppBar.Closed suggests:
<Border BorderBrush="Gray" BorderThickness="2" Margin="100,20,100,20">
<Grid>
<WebView x:Name="contentView" Source="http://www.contoso.com"/>
<Rectangle x:Name="contentViewRect"/>
</Grid>
</Border>
If I apply the border this way, the AppBar also reliably opens with the mouse.
One last thing to note is that using a BorderBrush="Transparent" works fine as well, so you don't have to actually see the ugly border. My final XAML was something like:
<Border BorderThickness="0,1,0,1" BorderBrush="Transparent">
<Grid>
<WebView x:Name="WebView"></WebView>
<Rectangle x:Name="RectWebViewBrush"></Rectangle>
</Grid>
</Border>

It is possible to select a ListView item with a single tap or left click?

I am developing a Windows 8 metro application that uses semantic zoom in the following way:
The zoomed in view contains a ListView with complex controls that allow for user interaction (by using TextBox and Button controls), therefore this ListView has IsItemClickEnabled="False". The user must trigger the zoomed out view manually.
The zoomed out view contains another ListView which displays a simple list that displays some status information for the controls in the zoomed in view. The ItemsSource property of this ListView is populated dinamically with plain objects that are created in the moment that the view is made active. This ListView has IsItemClickEnabled="True".
What do I want:
When the user taps or clicks on an item in the zoomed out view, the zoomed in view should activate and the control matching the clicked item should be made visible (the zoomed in ListView allows scrolling, so the control could be hidden). I know how to do this as long as the SelectionChanged event is triggered when a item is clicked.
What happens instead:
When the user taps or clicks on an item in the zoomed out view, the zoomed in view activates automatically and no SelectionChanged event is triggered. However, it works fine when using right click or Ctrl+click instead.
So, my question is:
Is there any way to make a ListView trigger the SelectionChanged event on item tap or left click, in addition to right click and Ctrl+click? If not, how can I detect the tap or left click?
Thank you very much!
I found out the solution. I must control the Tapped event of the control that is inside the defined DataTemplate for the list, NOT the event of the ListView itself:
<SemanticZoom...>
<SemanticZoom.ZoomedOutView>
<ListView ...>
<ListView.ItemTemplate>
<DataTemplate>
<Border ... Tapped="Item_Tapped">
And in the Item_Tapped method, I just cast sender to FrameworkElement and look at its DataContext.
There is no more click events in Windows 8 but instead there is gestures (i.e. Tapped, RightTapped, Holding) and pointers (i.e. Pressed, Released, Moved).
Starting from this you can handle through a switch different cases depending on the input devices which is used (i.e. Mouse, Pen, Touch).
Here a little piece of code as example.
void MyElement_Holding(object sender, Windows.UI.Input.HoldingEventArgs e)
{
switch (e.PointerDeviceType)
{
case PointerDeviceType.Mouse:
break;
case PointerDeviceType.Pen:
break;
case PointerDeviceType.Touch:
break;
}
}
Hope this help.