Disabling keyboard of windows phone having focus on Textbox - windows-phone-8

I am new in Windows Phone.
In my app I have a textbox where cursor will continuously blink for input at first. I have a custom dialpad to take input from users. So I have to disable the Windows Phone Keyboard.
After searching online, most of the solution is based on removing the focus from textbox to hide the keyboard.
In my case, its not happening since keyboard pops up and hide instantly.
Any help would be highly appreciated.
Another thing: I also need the cursor to be blinking in textbox.

May this will help you, create GotFocus event of your textbox.
GotFocus="input_GotFocus"
private void input_GotFocus(object sender, RoutedEventArgs e)
{
this.Focus();
}

One workaround could be to not use TextBox at all. Instead, you can use a simple TextBlock and on tap on the TextBlock, open your custom keypad. You can probably toggle visibility of the keypad to hide/unhide it. on key press of the keypad, update the text of the TextBlock.
EDIT : Adding a sample code for this (with cursor implementation as well)
Xaml for my custom TextBox implementation :
<Border x:Name="brdTextBox" Background="White" BorderBrush="Blue" HorizontalAlignment="Stretch" Height="100"
Margin="10">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="txtEnterText" FontSize="28" Foreground="Black" Margin="0"></TextBlock>
<TextBlock x:Name="txtCursor" FontSize="28" Foreground="Black" Text="|" Margin="0"></TextBlock>
</StackPanel>
</Border>
A sample code behind, that uses timer to control the tick of the cursor :
Timer timer = new Timer((obj) =>
{
Dispatcher pageDispatcher = obj as Dispatcher;
pageDispatcher.BeginInvoke(() =>
{
if (txtCursor.Text == "|")
{
txtCursor.Text = "";
}
else
{
txtCursor.Text = "|";
}
});
}, this.Dispatcher, 1000, 1000);
After this, you can probably bring up your keypad on border tap, and on key event of the keypad, fill up the textblock. You can tweak the timer duration and intervals to achieve a close resemblance to the actual cursor.
Hope it helps.

Related

AS3 TextArea click handling

I am having trouble with handling a click event on a TextArea. I'm developing a mobile app using Flash Mobile. I would like to display a default text in the area and make it disappear when the user selects the field.
The issue is, that the event is thrown only when I click on the border of the TextArea. It never happens when a selection cursor is active. I also tried to add a false editable property to notesInput and set it to true in the handler and it didn't help.
private function notesClickHandler(event:Event):void{
notesInput.text = "";
notesInput.removeEventListener(MouseEvent.CLICK, notesClickHandler);
form.invalidElements;
}
<TextArea id="notesInput" text="Poznámky.."
height="150" width="100%"
verticalScrollPolicy="auto"/>
Thank you guys for your time and your help.
You can use prompt text which will fulfill your requirement:
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"/>
It will not clear the default text when you focus in. But you can make that happen by clearing prompt text when you focus in the TextArea.
<fx:Script><![CDATA[
private function onFocusIn():void
{
notesInput.prompt = "";
}
private function onFocusOut():void
{
notesInput.prompt = "Default Text";
}
]]></fx:Script>
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"
focusIn="onFocusIn()"
focusOut="onFocusOut()"/>
For that you can use an focusIn event like this :
private function text_area_focusInHandler(event:FocusEvent):void
{
text_area.text = ''
}
<s:TextArea id="text_area" x="10" y="10" focusIn="text_area_focusInHandler(event)" text="default text"/>

Animate AppBarButtons like the E-mail application in Windows 8.1

The E-mail application in Windows 8.1 has a nice animation in the AppBar. When a button is not enabled the button disappears and the buttons that are left moves to fill empty space. This happens if several E-mails are selected in the application.
What should I do to add this in my application?
Edit: Below is the animation I’m talking about. The second button from the right is no longer available so it shrinks and then the other buttons is moved to the empty space.
The AppBar control uses StackPanel control for the grid in it. So when a button added, it automatically repositions all the other buttons. Well, even though I don't know how the E-Mail app does the animation you posted, I definitely can show you the way for it. Hope it does give an idea.
Here is the XAML of the AppBar:
<Page.BottomAppBar >
<AppBar IsSticky="True" Name="AppBar" IsOpen="True" FlowDirection="RightToLeft">
<StackPanel Name="bottomAppBar" Orientation="Horizontal" >
<AppBarButton Name="btnOptions" Icon="Setting" Width="100" Label="Options" />
<AppBarButton Name="btnHelp" Icon="Help" Width="100" Label="Help" />
<AppBarButton Name="btnExit" Icon="Import" Width="100" Label="Exit" />
</StackPanel>
</AppBar>
</Page.BottomAppBar>
Assuming you have a button that hides the button you don't want. Let's say btnHelp in this case.
The button should be like this:
<Button Content="Button" HorizontalAlignment="Left" Margin="170,79,0,0"
VerticalAlignment="Top" Height="66" Width="131" Click="Hide_Help_Click"/>
So the click event should be like this
private async void Hide_Help_Click(object sender, RoutedEventArgs e)
{
while (true)
{
await Task.Delay(1);
if( btn.Width > 0 )
{
btnHelp.Width = btnHelp.Width - 2;
}
else
{
break;
}
}
btnHelp.Visibility = Visibility.Collapsed;
}
This way, it's like the exit button goes out on top of the Help button, so maybe it's a little ugly, but this works like what you need. So a little change and maybe some animation you add, it should exactly do the same what you have posted.

Pivot Item Header Coulor Change opacity of all Headers Remains Same in windows Phone 8.1 Pivot Control

I am working on Pivot Control in Windows Phone 8.1 I Set foreground Property of pivotitem Header to Red Color it is working Fine but,I set all items header to Red Color and the Opacity of the Item Header Never Changes of UnFocused PivotItem cloud Please Help me how to solve this
Problem.
Here is the code
<Pivot Title="Pivot Title" >
<PivotItem >
<PivotItem.Header >
<TextBlock Text="One" Foreground="Red" FontSize="48"/>
</PivotItem.Header>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<TextBlock Text="two" Foreground="Red" FontSize="48"/>
</PivotItem.Header>
</PivotItem>
<PivotItem>
<PivotItem.Header>
<TextBlock Text="three" Foreground="Red" FontSize="48"/>
</PivotItem.Header>
</PivotItem>
</Pivot>
The Default Styles Should be over ridden in Resource Dictionary <ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="#AFAFAF" />
<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="#56C5FF" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
I guess you'll need to set a different VisualState for either the Selected or Unselected state.
Have a look over here How to Change Pivot Header Template in Windows Phone 8
Or you could use the SelectionChanged event handler for your pivot:
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
PivotItem currentItem = e.AddedItems[0] as PivotItem;
if (currentItem != null)
{
(currentItem.Header as TextBlock).Foreground = new SolidColorBrush(Colors.White);
}
}
if (e.RemovedItems.Count > 0)
{
PivotItem currentItem = e.RemovedItems[0] as PivotItem;
if (currentItem != null)
{
(currentItem.Header as TextBlock).Foreground = new SolidColorBrush(Colors.Red);
}
}
}
Hope it helps!

How can I allow a frame to be moved up and down in WinRT?

I'm struggling with touch support in WinRT.
I have a Canvas with a Frame that contains a TextBlock. The TextBlock can have varying amounts of text which could make the Frame extend below the bottom of the Canvas. If that happens, I want the user to be able to touch the Frame and move it up so they can finish reading the text. If they move the Frame all the way up, it should stop when the bottom of the Frame is a set margin from the bottom of the Canvas. Same for moving it back down. Using the Inertia capabilities would be preferred as well.
If anyone can offer some direction, I'd appreciate it.
I would recommend wrapping a ScrollViewer around your textblock enabling the user to scroll on the screen to see all the text.
<ScrollViewer>
<TextBlock Content="Very long content goes here" />
</ScrollViewer>
For additional information check these sites out:
Link to the scrollviewer in the control list
Link to the scrollviewer documentation
I figured it out...
<Canvas x:Name="MainCanvas" ManipulationMode="TranslateRailsX" IsRightTapEnabled="False" IsDoubleTapEnabled="False" Margin="50,50,716,0" Width="600" ManipulationDelta="MainFrame_ManipulationDelta_1">
<Canvas.RenderTransform>
<CompositeTransform x:Name="ScrollMain"></CompositeTransform>
</Canvas.RenderTransform>
<Frame x:Name="MainFrame" Background="Beige" Height="auto" Width="600">
<RichTextBlock x:Name="MainContent" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18" FontFamily="Segoe Script" Width="540" HorizontalAlignment="Left" Margin="30,10,0,10" Foreground="Black" Height="auto" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ManipulationMode="None" IsTextSelectionEnabled="False"/>
</Frame>
</Canvas>
MainCanvas.ManipulationMode = ManipulationModes.TranslateY | ManipulationModes.TranslateRailsY | ManipulationModes.TranslateInertia;
private void MainFrame_ManipulationDelta_1(object sender, ManipulationDeltaRoutedEventArgs e)
{
CompositeTransform transform = ScrollMain as CompositeTransform;
double yDelta = e.Delta.Translation.Y;
double bDelta = (MainFrame.ActualHeight - pageRoot.ActualHeight + MainCanvas.Margin.Top + MainCanvas.Margin.Top) * -1;
if (transform.TranslateY + yDelta > 0)
{
yDelta = transform.TranslateY * -1;
}
if (transform.TranslateY + yDelta < bDelta)
{
transform.TranslateY = bDelta;
}
else
{
transform.TranslateY += yDelta;
}
base.OnManipulationDelta(e);
}

Flex ItemRenderer: rendering the source item of a drag

When an item is being dragged from/within a list in the default implementation, it is shown as selected during the drag (and a separate item renderer, in dragging state, is shown as the drag image), so:
<s:ItemRenderer>
<s:Label text="{data}" color.selected="0xFF0000" color.dragging="0x00FF00" />
</s:ItemRenderer>
renders as:
Is there a straightforward way to change the state of the source of the drag (the red, selected, "Bar") to something other than "selected" for the duration of the drag?
In the ideal, I would add color.dragSource="0x0000FF" to the item renderer code above, and "Bar" would be red while selected, but blue once the dragging had begun. When the drag was complete, it would revert to red (or, if no longer selected, black).
What if you did an eventListener on drag start that set the selected item in the list to -1? -1 says that nothing should be selected.
Edit: added below code to support:
<s:List id="myList" dragStart="startDrag(event)"/>
private var dragIndex:int;
private function startDrag(e:Event):void
{
dragIndex = myList.selectedIndex;
myList.selectedIndex = -1;
}
private function stopDrag(e:Event):void
{
myList.selectedIndex = dragIndex;
}