WindowsPhone KeyBoard: Prevent page screen scrolling up when soft keyboard is opened(C#-XAML)

Problem:
​Generally in windows phone when TextBox is focus soft-keyboard will be open ,but here problem is by default page screen to shift upwards when keyboard opened and again shift previous position when user closed the keyboard by tap on screen.Actually this question is raised at MSDN WindowsPhone Development Forums.Even  lot of times this question is raised by developers and however more resource's available for solving this issue. 
   Requirement :Page UI having header,body and footer. In page UI there is a TextBox  just above the footer. When user focus on this TextBox the page header is going to invisible.But user doesn't want to page header shift upwards when keyboard is opened

Note: This Sample is targeted on WindowsPhone 7.1

SourceFile at:WpKeyBoardIssueSample

Solution:

 Step1: Take Grid layout with 3 rows for Header,Body,Footer.
    

XAML

 <Grid x:Name="LayoutRoot" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Name="Header" Background="#FF1DA8D1">
            <TextBlock Text="Header" HorizontalAlignment="Center" FontSize="40" />
        </StackPanel>
        <ScrollViewer Grid.Row="1" Background="Orange" Name="Body">
           <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" Name="txtMessage"
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox VerticalAlignment="Bottom" Grid.Row="1" Name="txtMessage1"
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox Grid.Row="2" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox VerticalAlignment="Bottom" Grid.Row="3" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox Grid.Row="4" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox VerticalAlignment="Bottom" Grid.Row="5" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox Grid.Row="6" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                <TextBox VerticalAlignment="Bottom" Grid.Row="7" 
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
                  <StackPanel Visibility="Collapsed" Name="footerkeyboard"
 VerticalAlignment="Bottom"               Grid.Row="8" Background="#FF1DA8D1">
                    <TextBlock  Text="Footer" HorizontalAlignment="Center" FontSize="40" />
                </StackPanel>
            </Grid>
         </ScrollViewer>

        <!--mimic the keyboard taking up space-->

        <Grid Grid.Row="2" Name="FooterPlaceholder" Visibility="Collapsed"/>
        <StackPanel Name="withoutkeyboardfooter"  Grid.Row="2" Background="#FF1DA8D1">
            <TextBlock  Text="Footer" HorizontalAlignment="Center" FontSize="40" />
        </StackPanel>

<Grid>

Step2: In Above xaml code main part is Body(Grid.Row=1) content which is having scrollviewer with eight TextBox's for testing purpose.So that here every TextBox is having  following events to handle keyboard issue.

• TextChanged="txtMessage_TextChanged"
• GotFocus="txtMessage_GotFocus"
• LostFocus="txtMessage_LostFocus"
• Tap="txtMessage_Tap"

 Here we need to use these events for manually specifying the scroll positions.Generally on initially tapping a populated Textbox, scrolling to the point at which the user wants the cursor to be  specifically to an area that would be hidden after the keyboard is shown  requires some manual means to accomplish. This is handled on the Tap event.

C#

double tapOffset;

private void txtMessage_Tap(object sender, System.Windows.Input.
GestureEventArgs e)

  {
       tapOffset = e.GetPosition(txtMessage).Y - 80;
  }

When typing multiple line textbox by default  entered page will  be upwards,so fix this, keep resetting theApplicationRootFrame’s RenderTransformation property whenever the TextBox gets Focus.

C#

 private void txtMessage_GotFocus(object sender, RoutedEventArgs e)
   {
      ((App)Application.Current).RootFrame.RenderTransform =
 new CompositeTransform();

      FooterPlaceholder.Visibility = Visibility.Visible;

      withoutkeyboardfooter.Visibility = Visibility.Collapsed;

      footerkeyboard.Visibility = Visibility.Visible;
   }

Note: The keyboard height differs between different resolutions, so some checking is required to find the correct keyboard height, which can be done on the page’s Loaded event.

C#

void MainPage_Loaded(object sender, RoutedEventArgs e)
  {
    var deviceWidth = this.ActualWidth; 

    var isHdDevice = (deviceWidth > 500 ? true : false);

      if (isHdDevice)

                keyboardHeight = 540;
            else
                keyboardHeight = 336;

     //this will be used to offset other controls on the page into the viewable area
    FooterPlaceholder.Height = keyboardHeight;
  } 

In our UI,every textbox  is having properties like TextWrapping="Wrap" &  AcceptsReturn="True".This is required to so that as text wraps down to new lines the caret is kept in view. We do this by manually scrolling the ScrollViewer as the TextBox size increases. This is done in the TextChangedevent of the TextBox.

C#

private void txtMessage_TextChanged(object sender, TextChangedEventArgs e)
        {
            Dispatcher.BeginInvoke(() =>
            {
                double CurrentInputHeight = txtMessage.ActualHeight;
 
                //after the user starts typing text, text will eventually wrap to the next line
                //this ensures the textbox height doesnt sink below the bottom of the scrollviewer
                if (CurrentInputHeight > InputHeight)
                {
                    Body.ScrollToVerticalOffset(Body.VerticalOffset + CurrentInputHeight - InputHeight);
                }
 
                InputHeight = CurrentInputHeight;
            });
        }

And we need to do like this  at LostFocus  Event

C#

 private void txtMessage_LostFocus(object sender, RoutedEventArgs e)
        {
            //hide the keyboard placeholder from screen
            //allowing the scrollviewer to re-occupy the available area again
            this.FooterPlaceholder.Visibility = Visibility.Collapsed;
            withoutkeyboardfooter.Visibility = Visibility.Visible;
            footerkeyboard.Visibility = Visibility.Collapsed;

        }

Step3: In Above xaml code another main part is (Grid.Row=2) content which is having Grid(FooterPlaceholder) & StackPanel(withoutkeyboardfooter) .Actually this row content is only for (Footer) which is mimic the keyboard taking up space.

• Create a FooterPlaceholder UI element that simulates the space the keyboard takes up on the page, which effectively squishes the ScrollViewer into the available space.
• Only display when the TextBox gets focus (i.e. only the keyboard is visible) and hide it when it doesn’t, using the GotFocus and LostFocus events.
• Note the keyboard height differs between different resolutions, so some checking is required to find the correct keyboard height, which can be done on the page’s Loaded event.

 Output Screens: 
   

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

C#

void

C#

 private void txtMessage_TextChanged(object sender, TextChangedEventArgs e)
        {
            Dispatcher.BeginInvoke(() =>
            {
                

WindowsPhone 8.1 App Deployment :How to deploy .appx file with Application Development Tool

Introduction:

In prev post i was explained about creating new project on windows phone 8.1 sdk.During development you typically deploy and run your app from Visual Studio. Optionally, you can also use the stand-alone Application Deployment tool to deploy your app to the emulator or to a registered device.Often when you write a Windows Phone  application you do not want to give users the full source code. In such cases it is possible to share only the build file and deploy it to a device or emulator. You can accomplish this using the Windows Phone Application Deployment tool that comes with the RTM version of Windows Phone Developer Tools.

However like windows phone 8.0 apps for windows phone store 8.1 apps there is no .xap file is created  after running the app.Windows phone store 8.1 apps are deployed through windows store. So that in this post i am going to explain about steps to deploy windows phone 8.1 .appx file.

Note:This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

1)What is  "AppPackages" and how to generate it?

In order to deploy an app, you need an App Package. Visual Studio has functionality to create an App Package you can use to deploy your app to another device.The following step are how to create a local App Package.

Step1: Right click on your Project=>Store=>Create App Packages

Step2: In the Create App Packages wizard, you will want to create a local package. Therefore, answer “No” to the “Do you want to build a package to upload to the Windows Phone Store”. Notice the information text indicates this is the option for sideloading. 

Step3: The next dialog provides a choice of processor platforms to target. In most cases, you would want to choose “Any CPU”. This will allow you to target all of the processor platforms and architectures. However, if you are using platform specific binaries in your app, you’ll need to build separate packages for each platform. 

Step4:In my example, I’ll just leave the default “Any CPU” and click “Create” 

Note: the wizard gives us a link to where the package was created.

If we click the link, here is an example of what was created:

2)Deploying an app with the Application Deployment tool:

1. Build and package your app.
2. If you’re deploying your app to a device, make sure that the device is registered and connected.
3. On your computer’s Start screen, find the Application Deployment tool.
   You can also run the tool from the following location:
   C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.1\Tools\AppDeploy\AppDeploy.exe
4. Run the tool.
   The tool starts, as shown in the following screenshot.
   
5. In the Target drop-down list box, select either Device or one of the emulator options.
6. In the App field, click Browse and locate the package file that you want deploy.
7. 

  
 8.Click Deploy.

If the deployment is successful, the Status field displays App Deployment Complete.

Finally your app icon will be display in your device/emulator as

Please read more at MSDN

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

WindowsPhone 8.1 SDK: First Sample for Beginner's Tutorial(C#-XAML)

Introduction:

Windows Phone 8.1 introduces an important change in the Windows Phone developer ecosystem. In this release, Windows Phone converges with the Windows Store apps platform into a single developer platform that runs the same types of apps i.e Windows Runtime apps.So that please read this post before going to read about this article.

However in this post ,learn how to create a new project, and explore the windows phone 8.1  sdk development environment.

Platform convergence began in Windows Phone 8, which supports a small subset of Windows Runtime APIs, but which differs from Windows in many core areas. In Windows Phone 8.1, there’s so much more in common—a much larger API set, a similar app model and life cycle, a shared toolset, a common UI framework—Windows Phone and Windows Store app developer platforms truly have become one, single development platform.

SourceFile at :WP8.1FirstSample

Requirements:

• Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
• I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.

• This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

Description:

Lets start creating sample 

1)Create the project:

• Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, seeGet the SDK.

• Launch Visual Studio from the Windows Start screen. If the Registration window appears, you can register the product, or you can temporarily dismiss the prompt.

• Create a new project by selecting the FILE | New | Project menu command.

• In the New Project window, expand the installed Visual C# , and then expand Store Apps. Select the Windows Phone Apps templates.

• In the list of Windows Phone Apps templates, select the Blank App (Windows Phone)template.

At the bottom of the New Project window, type MiniBrowser as the Name of the project

             

• Click OK. The new project is created, and opens in Visual Studio. You see the following items:
  • The main window contains the code editor and displays App.xaml.cs . In this code file you can define global event handlers.
  • The right pane includes Solution Explorer, which lists the files in the project.

             

• In Solution Explorer, double-click MainPage.xaml to open it. This page contains the user interface for the first page of your app. The main window is divided into two parts:
  • The right pane contains the XAML markup that defines the user interface for the page.
  • The left pane contains a skin that shows the output of the XAML markup.

The associated code-behind page, MainPage.xaml.cs , which contains the code to handle user interaction with the page, is not opened or displayed by default.

             

Now you're done with the first step of building your first Windows Phone Store app!

2)User Interface:

In this step, lay out the controls for the simple user interface of your app.

To create the UI

1. Open the Toolbox in Visual Studio, if it’s not already open, by selecting the VIEW | Toolbox menu command.
2. Add a title for the app.From the Common XAML Controls group in the Toolbox, add a TextBlock control to the designer surface by dragging it from the Toolbox and dropping it onto the designer surface. Place the TextBlock at the top of the available space. Use the mouse to size the control to the width of the page.

  And set proprties of textblock like this

XAML

<TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/>

 However with same above procedure ,after adding 3 more controls i.e Textbox,Button,Webview  

In the XAML code in MainPage.xaml, look for the grid that contains your controls. It will look similar to the following. If you want the layout exactly as shown in the preceding illustration, copy the following XAML and paste it to replace the Grid in your MainPage.xaml file.

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
        <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/> 
        <TextBox x:Name="URL" Margin="10,95,124,0" Text="http://windows.microsoft.com/" VerticalAlignment="Top"/> 
        <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,85,10,0" VerticalAlignment="Top" Width="109"/> 
        <WebView x:Name="MiniBrowser" Margin="10,150,10,10"/> 
    </Grid>

With these settings, the control can size and position itself correctly in both portrait and landscape modes.

Now Your UI is completed

3)Add the C# code to action 'click':

When you double-click the Go button, Visual Studio also updates the XAML in MainPage.xamlto connect the button’s Click event to the Go_Click event handler.

XAML

<Button x:Name="Go" Content="Go" ... Click="Go_Click"/>

 In MainPage.xaml.cs or MainPage.xaml.vb, add the two lines of code shown below inside the empty Go_Click event handler. This code takes the URL that the user enters in the text box and navigates to that URL in the WebView control named MiniBrowser.

C#

private void Go_Click(object sender, RoutedEventArgs e) 
        { 
            string site = URL.Text; 
            MiniBrowser.Navigate(new Uri(site, UriKind.Absolute)); 
        }

  

4)Run the sample:

       To run your app in the emulator

1. Build the solution by selecting the BUILD | Build Solution menu command.
   If any errors occur, they’re listed in the Error List window. You can open the Error List window, if it’s not already open, by selecting the VIEW | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.
2. On the Standard toolbar, make sure the deployment target for the app is set to one of the values for the Windows Phone Emulator, for example, Emulator 8.1 WVGA 4 inch 512MB.
   
3. Run the app by pressing F5 or by selecting the DEBUG | Start Debugging menu command.
   This opens the emulator window and launches the app. If this is the first time you’re starting the emulator, it takes several seconds for the emulator to start and launch your app.
4. To test your running app, click the Go button and verify that the WebView control loads the specified web site.
   
5. To test the app in landscape mode, press one of the rotation controls on the emulator toolbar.
   
   The emulator rotates to landscape mode. The controls resize themselves to fit the landscape screen format.
6. To stop debugging, you can select the DEBUG | Stop Debugging menu command in Visual Studio.
   It’s better to leave the emulator running when you end a debugging session. The next time you run your app, the app starts more quickly because the emulator is already running.

Application Deployment tool

During development you typically deploy and run your app from Visual Studio. Optionally, you can also use the stand-alone Application Deployment tool to deploy your app to the emulator or to a registered device. For more info, see Deploy Windows Phone apps with the Application Deployment tool.

Test:

Windows Phone Developer Power Tools

Catch subtle programming errors, capture real-time performance metrics, and collect log files to troubleshoot your app with the three tools in Windows Phone Developer Power Tools. For more info, seeTest and troubleshoot apps with the Windows Phone Developer Power Tools.

Congratulations! You’ve now successfully completed your first Windows Phone 8.1 app.

Note: By default windows phone 8.1 support the Fast App Resume

Please read next post is about "WindowsPhone 8.1 App Deployment" 

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)

Awesome Windows Phone 8.1 Jump Start is coming!

I’m pleased to announce that the registration page is now up for this year’s Windows Phone Jump Start!

Building Apps for Windows Phone 8.1 Jump Start will be held on 29th, 30th April and extend onto the morning of May 1st. As it says on the website: “If you’re an app developer who wants to design and build Windows Phone 8.1 apps using XAML and C#, don’t miss this exciting event. The two-and-a-half day, demo-rich course, taught by experts who have years of experience developing (and writing about the process), focuses on how to create apps for Windows Phone 8.1 in Visual Studio and how to create universal app projects that share a high percentage of code and that target both Windows and Windows Phone.”

This time around, the Jump Start is structured into 4 main parts:

Section 1: Introduction

· Session 1: Introduction to Windows Phone 8.1 (50 minutes)
Overview of the Windows Phone 8.1 developer platform, including guidance on the choices of app framework now available.

Section 2: Building Windows Runtime Apps using XAML and C#

Sessions that show how to build phone apps using WinRT XAML

· Session 2: Getting Started Building Windows Runtime Apps (50 minutes)
Fundamentals of building a WinRT XAML app for a Phone target, introducing the controls, layout, styles and theme resources, AppBar, StatusBar.

· Session 3: Page Navigation and Data Binding (25 minutes)
Navigating between pages in a Windows Runtime app, page caching and data binding

· Session 4: Lists and List Items (50 minutes)
Programming Lists, formatting list items and handling long or complex lists effectively

· Session 5: Windows Runtime App Page Layout Controls (25 minutes)
Pivot, Hub and Single Page layouts.

· Session 6: Adapting UI for Different Screens (25 minutes)
Explain the new layout system, and how to ensure your UI adapts to different phone screen sizes and orientations.

· Session 7: Windows Runtime App Lifecycle (25 minutes)
Explain the ways apps can be started, terminated and resumed.

· Session 8: Localization and Globalization in Windows Runtime Apps (25 minutes)
Making your app world-ready

Section 3: Programming Windows Runtime Platform Features (Windows Runtime XAML and Silverlight 8.1)

Programming platform features in Windows Phone 8.1 apps from either Windows Runtime Apps or Windows Phone Silverlight Apps 

· Session 9: Data Storage, Backup and Roaming (50 minutes)
All about storing data, backing app data up to the cloud and roaming data across devices

· Session 10: Contracts and Sharing Files and Data (50 minutes)
Share contract, FileOpenPicker/FileSavePicker, File & Uri associations

[Day 2]

· Session 11: Background Tasks (25 minutes)
How to run code in the background

· Session 12: Maps, Geolocation and Geofencing (25 minutes)
Maps, Location and GeoFencing

· Session 13: Networking, Mobile Services and Authentication (50 minutes)
Networking fundamentals. Includes Background Transfer Service and Web Authentication Broker 

· Session 14: Tiles, badges and toasts and Notification Center (50 minutes)
Tiles and toasts and Notification Center

· Session 15: Sensors and Proximity: NFC and Bluetooth (25 minutes)
Sensors, NFC and Bluetooth

· Session 16: Contacts and Calendar (25 minutes)
WinRT APIs for Contacts and Calendar, plus new capabilities (available on phone only) for Wallet-aware apps

· Session 17: Camera, Media, Audio and Speech (50 minutes)
Working with the camera, media and video editing

· Session 18: Enterprise LOB Apps (50 minutes)
All the new features aimed at Enterprise LOB and MDDM

· Session 19: SQLite Database (25 minutes)
How to program SQLite

· Session 20: VS Tooling and Memory Profiling (25 minutes)
Introduction to the many tools built into Visual Studio to help you develop Windows apps

[Day 3]

· Session 21: App Packaging and Publication (50 minutes)
How to package your app and get your app published in the Store

· Session 22: Best practices: Building Universal Apps for Windows Phone and Windows (50 minutes)
Guidance for building for both

Section 4: Upgrading Windows Phone Silverlight 8.0 apps to Silverlight 8.1

Programming new platform features from a Silverlight app

· Session 23: Upgrading Windows Phone Silverlight 8.0 Apps to Silverlight 8.1 (50 minutes)
Recap on why you would use Silverlight, and explanation of what issues must be considered when upgrading to Silverlight 8.1. Topics include behavioural changes introduced by the quirks API, Lifecycle changes as FAR is now the only mode of reactivation, implementing share contract and using the FileOpenPicker/FileSavePicker, Web Authentication Broker, moving from MPNS to WNS, background agents alongside background tasks.

Hope you can join us for the live event.  The event is happening in Redmond and will be from 9:00am – 5:00pm Pacific Daylight Time. We realize that doesn’t make it the most convenient timeslots for everyone, but if you can’t watch it all, we hope you will join us when you can, and then catch up with the full list of sessions when the videos are posted on Channel9 shortly after!

Registration page can be found here!

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)