Develop Reference

Formatted Textboxes for UWP

I was wondering if anybody had any recommendations on how I could format a textbox for time inputs(hh:mm:ss) as well as Coordinates in Degrees,Minutes, Seconds (dd°mm'ss"). I am well aware that you can set the format of a string by the String.Format() method.... this does give me the desired layout in the textbox, but I want a control that has the appropriate symbols locked in and will autotab over those symbols as the user gives their inputs.
I have been searching for a way to do this in C#/UWP for a while with no luck, if anybody has any suggestions or could point me in the right direction it would be greatly appreciated.

The UWP Community Toolkit has some very good controls which are easy to integrate and one of them is the TextBox Mask control which is ideal for your scenario.
You can also try out the TextBoxRegex control which is not quiet what you want but is indeed something you should check out before proceeding.
Please reach out in case you are having difficulty in integrating the control for your specific requirement.
Optionally, you can download the sample app for the UWP toolkit to know about all the available controls /Tools. (UWP Community Toolkit Sample App)
EDIT 1:
As you might have noticed, the default behaviour for tab is that it sets the focus to the next control. Thus, having a single control will not be ideal since on press of tab, your textbox would lose focus and you would need to update the text and set the focus back to your textbox.
A relatively simpler way would be the following:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="1">
<StackPanel.BorderBrush>
<SolidColorBrush Color="{ThemeResource SystemBaseHighColor}"/>
</StackPanel.BorderBrush>
<TextBox x:Name="hour" MaxLength="2" BorderBrush="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" LostFocus="hour_LostFocus"></TextBox>
<TextBlock Text=":" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="minute" MaxLength="2" BorderBrush="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" LostFocus="minute_LostFocus"></TextBox>
<TextBlock Text=":" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<TextBox x:Name="second" MaxLength="2" BorderBrush="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" LostFocus="second_LostFocus"></TextBox>
</StackPanel>
This is basically your custom build control/usercontrol. So that when user tabs out it moves to the next textbox inside the stackpanel and so on.
In your hour_LostFocus event you can validate the textbox's current value and append 0 and do other validations .
private void hour_LostFocus(object sender, RoutedEventArgs e)
{
string val = (sender as TextBox).Text;
Regex regex = new Regex(#"^([0[0-9]|1[0-9]|2[0-3])$");
Match match = regex.Match(val);
if (!match.Success)
{
//append 0 and other validations
}
}
The same applies for minute and seconds .. just that the regex would be different in these cases.

Slider control giving odd values?

Okay so I know I can fix this with some string formatting on the textbox, but it's bugging me why this is happening in the first place. I have a slider control, which is going to get its max, min, and precision values from the viewmodel, depending on which page it's loaded into.
As an example, I've hard coded these values.
<DockPanel VerticalAlignment="Center"
Margin="40,0,0,0"
Height="100">
<TextBox Text="{Binding ElementName=Slider, Path=Value, UpdateSourceTrigger=PropertyChanged}"
DockPanel.Dock="Top"
TextAlignment="Right"
Width="634"
Margin="0,0,0,20" />
<Slider DockPanel.Dock="Bottom"
Name="Slider"
Width="634"
Padding="0"
Maximum="5000"
Minimum="-5000"
SmallChange="0.01"
LargeChange="0.01"
TickFrequency="0.01"
SnapsToDevicePixels="True"
IsSnapToTickEnabled="True" />
</DockPanel>
I know I probably don't need a few of those properties, but threw them in trying to fix this.
For the most part this has worked, and the slider is being constrained to two decimal places. But I've noticed (especially with large ranged) that I'm still getting random values which are ignoring this. For example when I set a range of -5000 to 5000 I still randomly get values like 80.20000002.
I know I can apply a string format to the textbox to resolve the issue, (although a tad annoying with the viewmodel setting the precision) just wondering why it's happening.
As an aside, users also need to be able to set the value using a keyboard, again this works perfectly, but I'm wondering if there's a way to make the slider textbox acceppt a decimal point without having a number behind it.

WPF- Cut-off issue in WrapPanel

when i use more than one controls inside the wrap Panel if any control contains lengthy text (more than the window size) cut-off is happening. (See the image)
I have two textblocks and one button control.
<Grid>
<WrapPanel>
<TextBlock Text="Very long Text Message contains long text for testing " FontWeight="Bold"></TextBlock>
<Button Content="sample Text"></Button>
<TextBlock Text="sample Text textblock"></TextBlock>
</WrapPanel>
</Grid>
the cut-off happens for first text block. i want wrap to next line if the text contains more characters.
help me to solve the issue. thanks in advance.

You need the attribute TextWrapping="Wrap" in your textbox
<TextBlock
Text="Very long Text Message contains long text for testing "
FontWeight="Bold"
TextWrapping="Wrap">
</TextBlock>

Are you trying to make a single paragraph that wraps? If so, then WrapPanel isn't actually what you want.
WrapPanel takes UI elements (rectangular chunks of real estate) and lays them out left-to-right, top-to-bottom. You could enable wrapping in your first TextBlock, but then it'll take up a rectangle of screen space that's two lines high. Because the TextBlock fills that entire rectangle, the button will actually appear under it, rather than to the right of the bold words "for testing ".
If you want to make the whole thing flow like a paragraph, you don't want to use UI elements (which are always rectangular chunks); you want to use text elements (which flow in paragraphs).
The way to get text elements into your XAML is to wrap them in a TextBlock. Try this:
<Grid>
<TextBlock TextWrapping="Wrap">
<Bold>
<Run Text="Very long Text Message contains long text for testing " />
</Bold>
<Button Content="sample Text"></Button>
sample Text textblock
</TextBlock>
</Grid>
Note that I wrapped the first chunk of text in a <Run> element -- otherwise the trailing space would be ignored (assumed to be whitespace in your XAML document). The second chunk of text didn't have leading or trailing spaces, so I just put it directly inline.
This answer has a bit more about the difference between the "controls" and "text" sides of XAML.

AccessText TextWrapping not working with CheckBox

I am trying to implement a TextWrapping feature onto the text that is displayed in a CheckBox. I am using the second method in this walk through.
I have created a completely blank program to test this. I would like to make it so that, when text inside the checkBox is larger than the allowed width, it moves the excess text to the next line under checkBox.
This is my xaml:
<Grid Width="100">
<CheckBox>
<AccessText TextWrapping="Wrap"
Text="This is a really long sentence that needs to create a new line." ... />
</CheckBox>
</Grid>
The walk through uses this method to implement the result that I am looking for. Why isn't this working for me, and how do I implement it correctly?
This is what my output is:
Updates: TextWrapping changed to "Wrap"; Width removed; output updated

WPF C# WrapPanel's content to be placed nicely

From what i know about WrapPanel , once it reaches its limit , it will auto move to the next line but however is there anyway to make this nicer without adding extra panel ?
Now its something like this ( an example ) :
How you like to live on a houseboat with your family and pets [
textbox ] ( lots
/ all ) year round?
As you can see the brackets ( lots / all ) is being separated , is there any way to make them go to next line if they are together without adding extra panel ?
My xaml code :
<Grid Background="#FFF0FA08">
<WrapPanel x:Name="WrapPanelTest" HorizontalAlignment="Center" Height="658" VerticalAlignment="Center" Width="1366">
</WrapPanel> // this Panel i am talking about.
<StackPanel Height="110" Name="stackPanel1" Width="200" HorizontalAlignment="Left" VerticalAlignment="Bottom" >
<Button Content="Check!" Height="100" Name="button1" Width="125" FontSize="35" Click="button1_Click" />
</StackPanel>
</Grid>
How i add populate those content inside the wrap panel :
Basically i just retrieve it from database and create them dynamically and add to
wrappanel.children.add
, because the code is too long and i duno if it is related . I tried to add multiple panels inside to make it look nicer but i can only have one panel because thats the most easiest way i can find my controls. ( textboxes ) thats why i need to know if there is any way to do this without adding any panels

Forget the wrappanell and just use TextWrapping="Wrap" in a textblock you can use WrapWithOverflow to wrap on whole words
But (lots / all) will still be separated, so you will have to remove the spaces and make it (lots/all)