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.
Related
I'm working on windows phone 8 app, I had a page which inputs number for that I gave code like this,
<TextBox Name="txtNumber" Height="Auto" Margin="0,10,0,510" >
<TextBox.InputScope>
<InputScope>
<InputScopeName NameValue="Number" />
</InputScope>
</TextBox.InputScope>
</TextBox>
by the above code; It display the numeric keyboard when I place the cursor to type; But I need a fixed keyboard which is always visible and if we type it has to enter the value to the textbox.
Would somebody please tell me how to do that.
Try this on for size:
Xaml:
<Grid
x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0"
Loaded="ContentPanel_Loaded">
<TextBox
Name="TB1"
HorizontalAlignment="Left"
Height="72"
Margin="0,74,0,0"
VerticalAlignment="Top"
Width="456"
InputScope="Number"/>
</Grid>
Code:
private void ContentPanel_Loaded(object sender, RoutedEventArgs e)
{
// Turn on Tab Stops. You can set this in XAML as well.
this.IsTabStop = true;
// Set focus on the TextBox.
TB1.Focus();
}
It will spark up the SIP as it enters the <TextBox> ready for input. Hope it's what your looking for.
Got it from this MSDN blog.
The easiest way would probably be with creating your own user control. However it is most likely a lot of work to get it to work as a normal keyboard.
http://www.silverlightshow.net/items/Creating-a-Silverlight-Custom-Control-The-Basics.aspx
Or maybe perhaps this will help http://www.silverlightshow.net/items/Windows-Phone-7-Creating-Custom-Keyboard.aspx
I need to create a button with two lines of text:
The first one is Command Title like "Save"
The second one is a Description of the Command like "The application state will be saved"
So I have written the next xaml:
<Button Margin="0,128,0,0" Padding="10,5" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<StackPanel Margin="0" UseLayoutRounding="False">
<TextBlock FontSize="{StaticResource PhoneFontSizeMediumLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}">Save</TextBlock>
<TextBlock Style="{StaticResource PhoneTextSubtleStyle}" Margin="0">The application state will be saved</TextBlock>
</StackPanel>
</Button>
This code working well except a one issue. The Description line becomes invisible when the button is pushed.
I'm sure the root cause is the low contrast color of the description line. But I don't know how to fix it.
Update: I have tried to use the PhoneTextSubtleStyle style but still have the same issue.
You could retemplate the Button (using the Control.Template property) to look different so that when pushed it no longer interferes with the content.
Could you try something like this
System.Windows.Visibility.Visible;
System.Windows.Visibility.Hidden;
or
System.Windows.Visibility.Collapsed
here is a link that will show an example of how to use this inside of a StackPanel
How to: Change the Visibility Property
I'm learning WPF, so bear with me.
I would like to have my WPF application flash in the user's face if a certain event is fired.
What is the best way to "notify" the user? I really want the user to react!
Cheers, Patrick
Environment: Windows7/64bit/.Net4
If you want the user to react you can force them to by simply opening a modal dialogue. The most lightweight of which being the MessageBox. You can also create normal modal windows using their ShowDialog method, you can make those windows as "fancy" as you want by getting rid of their normal appearance. This is achieved by setting the WindowStyle to None and AllowsTransparency to true, this will remove all the frame elements, so the window is now pure content.
Popups are handy for non-modal notifications and they already are content-only, but setting their AllowsTransparency to true may also be desired if you want rounded corners for example.
Best is entirely subjective and depends on many context variables but here is how I do it MVVM style.
In your main view model, define a property
pubic ObservableCollection<AlertViewModel"> Alerts { get; private set; }
in my case the AlertViewModel has only a "Message" property and a "Dismiss" RelayCommand.
In the XAML of your main view add
<Grid>
<all of my other other view controls>
<ItemsControl x:Name="AlertsControl" Opacity="50" ItemsSource="{Binding Alerts}"/>
</Grid>
Make sure it is the last item in the main container of your main view. This ensures it has the highest z order and will appear on top of all other controls.
Here is the data template for this view model
<DataTemplate DataType="{x:Type vm:AlertViewModel}">
<Border CornerRadius="10" Margin="3" Background="Red">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Margin="10" Grid.Column="0"
Command="{Binding ElementName=theWindow, Path=DataContext.DismissAlarmCommand}"
CommandParameter="{Binding}">Dismiss</Button>
<TextBlock Foreground="White" FontWeight="ExtraBold" Grid.Column="1"
Text="{Binding Message}" FontSize="20"
VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock>
</Grid>
</Border>
</DataTemplate>
Now,
Alerts.Add( new AlertViewModel() { Message = "Danger Will Robinson! Danger!" } );
Will pop a Bright red alert box onto the top of your main form. It does not go away until the user presses "Dismiss"
If you want it to flash or fade in and out or bounce up and down you can add animation in the data template.
You can use a Converter or data to Enable/Disable the rest of the controls in the app byt binding to AlertsControl.HasItems
Good luck.
This is a really weird bug. I have no idea why it could be happening. I know that posting it here is a bit of a long-shot, but I'm out of other ideas.
I have two ListBoxs that act as menus.
<ListBox Margin="56,8,15,0" FontSize="64"
ItemsSource="{Binding FavoriteSections}"
SelectionChanged="MenuList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove" Click="FavoritesContextMenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding DisplayName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ListBox x:Name="sectionList" Margin="56,8,15,0" FontSize="64"
SelectionChanged="MenuList_SelectionChanged"
ItemsSource="{Binding SectionViewModels}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Add to favorites" Click="SectionContextMenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding DisplayName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The bug exists across both of them.
When the selection changes on either menu, this method is called:
void MenuList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count == 0)
{
return;
}
Uri page = null;
object selected = e.AddedItems[0];
if (selected is NavigableItem)
{
NavigableItem selectedItem = (NavigableItem)selected;
page = selectedItem.Page;
}
else if (selected is SectionViewModel)
{
SectionViewModel selectedVM = (SectionViewModel)selected;
page = selectedVM.Section.Page;
}
Debug.Assert(page != null, "What is the type of `selected`?");
// if I comment out this line, the problem goes away:
NavigationService.Navigate(page);
ListBox selectedBox = (ListBox)sender;
selectedBox.SelectedIndex = -1;
}
If I comment out the NavigationService.Navigate() line, the problem goes away. If I replace the line with a different URI, the problem remains.
About 70% of the time, when I click on a menu item, the content jumps all over the page. (The remaining 30%, no bug occurs.) It happens too quickly to see what's really going on, but different UI elements overlap each other.
This only occurs the first time I click on something in those menus during the app's lifetime. If I hit "back" then select a menu item again, the problem will not occur.
What could be happening here? I really have no idea. The code-behind doesn't have a OnNavigatedFrom method, so I don't think it's a problem there.
I'm using Silverlight for Windows Phone 7
Update: Mysteriously, I can't seem to reproduce this in the debugger - only after deploying the app and running it in the emulator unattached. ???
Update 2: The bug appears when NavigationService.Navigate() is called from the Click event handler of a button, as well:
<Button Content="Foo" Click="Button_Click" Grid.Row="0"/>
private void Button_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(new Uri("/Views/sections.xaml?section=43", UriKind.Relative));
}
Looks like the bug has to do with the navigation, not the UI element used to trigger the call.
Update 3: More weirdness. Still not able to reproduce the app while the debugger is attached. If I make the loading progress bar always collapsed, the bug disappears:
<ProgressBar x:Name="LoadingProgressBar"
IsIndeterminate="True"
Visibility="Collapsed"
Style="{StaticResource PerformanceProgressBar}"
VerticalAlignment="Top"/>
Alternatively, commenting out this line in code-behind makes the bug disappear:
LoadingProgressBar.Visibility = Visibility.Collapsed;
I really don't understand what's going on here. That line of code is not executed when the page is navigated from.
Here is the full XAML of the control that's getting messed up:
<ProgressBar x:Name="LoadingProgressBar"
IsIndeterminate="True"
Visibility="Collapsed"
Style="{StaticResource PerformanceProgressBar}"
VerticalAlignment="Top"/>
<TextBlock x:Name="DownloadFailed"
Visibility="Collapsed"
Style="{StaticResource disabledText}"
Margin="56,8,8,-8" >
FooBar.com could not be reached. Do you have a network connection?
</TextBlock>
<ListBox x:Name="sectionList" Margin="56,8,15,0" FontSize="64"
SelectionChanged="MenuList_SelectionChanged"
ItemsSource="{Binding SectionViewModels}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Add to favorites" Click="SectionContextMenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding DisplayName}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PivotItem>
The problem lies in your usage of the Indeterminate ProgressBar. All its animations are done on the UI thread, and not the Compositor thread, as is the usual practise. Since you are already using the Windows Phone Toolkit, you can easily replace your ProgressBar with the PerformanceProgressBar offered by the toolkit. This should solve your problems.
Before I begin, let me say that I don't have a lot of experience with Windows Phone, so my answers are based on more generic WPF knowledge, so forgive me if I'm overlooking specifics of the platform, or am referencing features not available.
Some diagnostic questions (sorry this isn't a direct answer):
Firstly, it does seem like Navigate is calling a lot of layoutUpdates. I haven't yet seen what type of container is containing the pages you're updating, but it is worth asking, is that also being disrupted or only the menus?
Secondly, could you try specifying your itemPanel explicitly? You're expecting them to be virtualizingStackPanels, but you may find that some parent object in your visual hierarchy is creating a different inheritance scenario.
You have these in a grid, which is meant to size to its content, or take the default size (100x100 in normal WPF) or take sizing from its parent, which without knowing how you've specified the grid, or the grid's parent, it's difficult to know its behaviour. Furthermore, Grids automatically z-order their children according to the order in which they were added. Can you determine whether it is just the layout of the lisboxes that is being disturbed, or whether it is the entire grid? Or, is it larger than that?
If you attach to the layoutUpdated() event of the listboxes, grid, or grid's parent, you should be able to look at the stacktraces that lead you there - it sounds to me that you'll find that layoutUpdated() is firing more than you'd like it to. Further, you'll be able to output the heights and widths (ActualHeight etcetera of course) during those steps so that you can see when exactly those changes happen.
I hope that some of these diagnostic steps might help you reach an answer.
I have a WPF textBox that is declared as ReadOnly
<TextBox IsReadOnly="True" IsTabStop="False" Width="200" />
So, User can not write anything into the TextBox or delete the content but it still allows user to drag the text from this textbox and drop it in any other textbox that caused the text removed from the first textbox(the read-only one) and thats unexpected. Is it a bug?
how can I get rid of this?
I tried the following code :
<StackPanel>
<TextBox IsReadOnly="True">Hello</TextBox>
<TextBox></TextBox>
</StackPanel>
When I drag-and-drop the text (after selection) from the first TexbtBox to the second one, the text is copied, but not removed from the first TextBox. I tried it under .NET 3.5 and .NET 4.0 targets.
If you want to get rid of your bug without trying to understand it (since it shouldn't happen), you can just put an empty control (Canvas will be ok) on top of your TextBox, with its Background property set to transparent.
<Grid>
<TextBox IsReadOnly="True" IsTabStop="False" Width="200" />
<Canvas Background="Transparent"/>
</Grid>
But the text won't be selectable anymore...