Wednesday, 30 April 2014

Srollable Tex box in windows phone 8

Design
----------
<phone:PhoneApplicationPage
    x:Class="RIMS_ParentPortal.test2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="300" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <TextBlock Text="Scrolling TextBox sample" FontSize="40" />
     
        <ScrollViewer Grid.Row="1"
                   
                      Name="scroller">

            <TextBox Name="txtMessage"
                        TextWrapping="Wrap"
                        AcceptsReturn="True"
                        TextChanged="txtMessage_TextChanged"
                        GotFocus="txtMessage_GotFocus"
                        LostFocus="txtMessage_LostFocus"
                        Tap="txtMessage_Tap" />
         
        </ScrollViewer>
     
        <StackPanel Grid.Row="2">
            <Button Content="Button"/>

        </StackPanel>

        <Grid Grid.Row="3"  Name="pnlKeyboardPlaceholder" Visibility="Collapsed" />


    </Grid>

</phone:PhoneApplicationPage>

Code
------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;






using System.Windows.Media;
using System.Windows.Data;

namespace RIMS_ParentPortal
{
    public partial class test2 : PhoneApplicationPage
    {
        public test2()
        {
            InitializeComponent();
            Loaded+=test2_Loaded;
        }

        void test2_Loaded(object sender, RoutedEventArgs e)
        {
             //determine if HD device
            var deviceWidth = this.ActualWidth;
            var isHdDevice = (deviceWidth > 500 ? true : false);

            //the keyboard height differs between HD devices and regular ones
            if (isHdDevice)
                keyboardHeight = 540;
            else
                keyboardHeight = 336;

            //make the keyboard placeholder's height as high as
            //the anticipted keyboard height
            //this will be used to offset other controls on the page into the viewable area
            pnlKeyboardPlaceholder.Height = keyboardHeight;
        }

        double InputHeight;
        int keyboardHeight;
        double tapOffset;

        private void txtMessage_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            //capture the y position of where the user tapped
            //relative to the textbox
            tapOffset = e.GetPosition(txtMessage).Y - 80;
        }

        private void txtMessage_GotFocus(object sender, RoutedEventArgs e)
        {
            //reset any page movement cause by keyboard opening
            App.RootFrame.RenderTransform = new CompositeTransform();

            //make the keyboard placeholder visible
            //squishing the scrollviewer into the now smaller available screen area
            pnlKeyboardPlaceholder.Visibility = Visibility.Visible;

            //re-measure content panel, scrollviewer and it's contents
            //this is so that the scrollviewers available scrollable area is updated
            LayoutRoot.UpdateLayout();

            //scroll to the position of the click
            //(tapOffset set in Tap event - Tap event fires before this and provides tap offset)
            scroller.ScrollToVerticalOffset(tapOffset);

        }

        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)
                {
                    scroller.ScrollToVerticalOffset(scroller.VerticalOffset + CurrentInputHeight - InputHeight);
                }

                InputHeight = CurrentInputHeight;
            });
        }

        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.pnlKeyboardPlaceholder.Visibility = Visibility.Collapsed;

        }
    }
}


http://klingdigital.net/2013/06/scrollviewer-and-multiline-textbox-windowsphone/

No comments:

Post a Comment