UWP PlaceHolderText in Textbox not showing at runtime - xaml

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.

Related

TextBox gaining unwanted focus

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.

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.

Unable to correctly swipe GridView XAML

I've created a GridView with a width of 1800, with several GridViewItems inside it which fills up more than the screen realestate, so I have to swipe to see more content. However, when I swipe horizontally, I can see the content which is not visible before swiping, but once I remove my finger/stop swiping, the GridView automatically slides back to the content on the very left. For some reason, the methods which I've usually used, won't work in this particular project. At the moment, the GridView contains:
<GridView
HorizontalAlignment="Left"
Width="1800"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="False">
What must be added to make the gridview swipe normally, as in it won't bounce back to start once you let go of the screen?
Regards.
Have you tried to wrap your gridview with a scrollviewer?
<ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}">
<GridView ... />
</ScrollViewer>
Here is the msdn doc

AppBar Button Animation on Add/Remove

I have a WinRT app in which an AppBar button can be one of two buttons depending upon what is selected. Changing from one button to another is straightforward, however it is lacking the visual fluidity we strive for with WinRT.
The visual behavior I am looking for is also seen in the Mail app that ships with Windows 8. If you select a message and bring up the bottom AppBar, tapping the "Mark as Read/Unread" buttons results in a nice transform effect between the two buttons.
Does anyone know if this is a pre-rolled animation or do I have to implement it by hand (or even better, is there a solution out there already)?
The available transitions are in the Windows.UI.Xaml.Media.Animation namespace. Check out what is there and if you don't see what you are looking for then you will have to create your own.
The transition that looks most similar to me is AddDeleteThemeTransition, though the effect is only present when app bar items are added/removed and not when the app bar is opened.
Here's an example of its use
<AppBar>
<Grid>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal">
<Button x:Name="Search" Style="{StaticResource SearchAppBarButtonStyle}" />
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>

Change button's background image programmatically in a metro style app

How do I change a button's background image in a Metro Style app using VS 2012?
In Windows Forms, a button has a BackgroundImage property that you can set.
Is this feature available for Metro Style apps?
In Windows Forms, I can do the following in C#:
btnImage.BackgroundImage = System.Drawing.Image.FromFile("...\Pictures\flower.png");
How can you programmatically change the button's background image in Metro Style apps ?
Pretty straightforward, actually, just modify the Button's XAML to include a closing tag, and drop an image control in between, like so:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button HorizontalAlignment="Left" Margin="532,285,0,0" VerticalAlignment="Top" Height="135" Width="283">
<Image Source="Assets/Logo.png" />
</Button>
</Grid>
In the snippet above, I'm pointing the image source to the Logo.png file that is part of the built-in templates for C#/XAML apps.
Another way to do it is to open the project in Blend for Visual Studio, drag the image from the Assets tab onto the design surface (making sure you have the desired container selected in the Objects and Timeline pane), and then right-click the image and select Make into Control..., and choose the Button control.
The only downside to this technique is that you don't get the default VisualStates that the built-in Button control has. Instead, Blend defines a style for you with empty VisualStates which you can style as desired.
Hope that helps.