ScrollViewer does not scroll up while Keyboard is active - windows-phone-7

How I can get behavior of form in windows Phone like Settings >> Mobile Network >> EditAPN. In this page it have many textboxes in scrollviewer. When user taps on any textbox and its get focus then the page scrolls up and header remains constant and SIP keyboard shown. And when user lost the focus from this text box then page comes to its normal state and SIP keyboard hides and header remains unchanged. I want to achieve this behavior. I searched a lot but did not get any solution.
Strange to see scrollviewer behavior in WP7.
Any help will be great and appreciable.
Thanks in advance.
Note: If there is any tricky solution, please provide sample code.
Here is my sample code.
<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer x:Name="Scroller">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name"/>
<TextBox x:Name="txtName" />
<TextBlock Text="Email"/>
<TextBox x:Name="txtEmail"/>
<TextBlock Text="Phone"/>
<TextBox x:Name="txtPhone" />
<TextBlock Text="Adress"/>
<TextBox x:Name="txtAddress" />
</StackPanel>
</ScrollViewer>
</Grid>
When I try to scroll down, it does not move down fully and seems to be worked as elastic.
Edit:
This example, I have already seen and not useful in my case. I have 4 textboxes and my focus is on first textbox and keypad comes and hide last textbox. If user wants to go to last textbox and wants to enter input, it does not scroll fully and works as elastic. For this user has to press on some other part of screen, then he enter in last box. I saw in WP7 app in Settings -> Mobile Network -> EditAPN. There are 4-5 text boxes and these scroll perfectly. Don't know Which control or workaround MSFT used.

Maybe I am wrong, but why not using a simple grid and a listpicker control. You will need the Windows Phone Toolkit for this (Nuget Here).
The first Row of the grid contains the Header and will not change.
The second Row contains what you want (scrollview, listpicker, ...)
Here is a very basic example :
<phone:PhoneApplicationPage
x:Class="PhoneApp3.MainPage"
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"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="PageTitle" Text="MY HEADER" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<toolkit:ListPicker>
<toolkit:ListPickerItem Content="aaa" />
<toolkit:ListPickerItem Content="bbb" />
<toolkit:ListPickerItem Content="ccc" />
</toolkit:ListPicker>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Edit :
When SIP keyboard is rendered, PhoneApplicationFrame.TranslateTransform.Y is set to specific values (-259 in landscape orientation, -339 in portrait orientation). To update layout, we’ll just set top margin to the specified value(-s) and after that Silverlight layout system will fix the issue.
This example may help you.

Related

Why does the web browser size grow when i tilt it?

I am working with a windows phone app in visual studio that only have a web browser in it. I have problem with the layout. The app starts in portrait and it looks good. The web browser fills the whole screen. But when I tilt the phone to landscape-mode the web-browser get much bigger and you have to scroll a lot to get to the bottom of the page. I don't want it to be that big, i only want it to fill the screen.
Here is my code:
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- LOCALIZATION NOTE:
To localize the displayed strings copy their values to appropriately named
keys in the app's neutral language resource file (AppResources.resx) then
replace the hard-coded text value between the attributes' quotation marks
with the binding clause whose path points to that string name.
For example:
Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"
This binding points to the template's string resource named "ApplicationTitle".
Adding supported languages in the Project Properties tab will create a
new resx file per language that can carry the translated values of your
UI strings. The binding in these examples will cause the value of the
attributes to be drawn from the .resx file that matches the
CurrentUICulture of the app at run time.
-->
<!--TitlePanel contains the name of the application and page title-->
<StackPanel Grid.Row="0" Margin="12,17,0,28"/>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:WebBrowser HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" Height="Auto" Width="Auto" Source="http://www.google.se" IsScriptEnabled="True"/>
</Grid>
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>

Apply animation inside DataTemplate

I have a listbox with the following structure. Data displays well and no issues there. I want to get some animation affect for the StackPanel, but since it is inside the DataTemplate, I am not able to use Blend to get my desired animation affect.
I guess I can write an event handler and code for that, but is that the best approach of achieving animation for ListBox items?
<ListBox Height="600" ItemsSource="{StaticResource learn}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="100" Orientation="Horizontal">
<TextBlock Width="0" Text="{Binding ID}" />
<Image Height="100" Width="100"/>
<StackPanel Orientation="Vertical" Width="319" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="{Binding Text}" Margin="6,0,0,0" FontSize="29.333" />
<TextBlock TextWrapping="Wrap" Text="{Binding Description}" Margin="6,0,0,0" FontSize="16"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Okay, all you need to do is to create a new user control and add all your animations to that user control and start animation where you want. In the list box data template, create an instance of that data template.
Steps to reproduce:
Create a new User Control in the project.
Give in the animations to the animations to that user control in blend.
Add the user control in data template.
Start the animations where ever you want.
Alternative: Without creating a new user control you can specify animations by creating storyboard and applying required transformations. this gives a common animation to all the list box items.

Windows Phone: Slider movement locked by Textblock Binding

I am trying to do a simple example of the typical slider.value binded to a textblock. I have tried to maintain it so simple that I cannot find what would be the problem here.
I have this simple XAML code and NO code behind:
<phone:PhoneApplicationPage
.......
.......
.......
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" />
</Grid>
</phone:PhoneApplicationPage>
With this code, the slider movement is locked. If I remove the TextBlock binding then all works fine (but no value on TextBlock, of course) :-)
It seems so simple that I know something very, very stupid is locking my brain.
I have tried the 'Binding' in anyway you can imagine, but no luck at the moment.
Any help and any explanation, please ?
Try setting maximum and minimum properties on your slider.
OK, try a stackpanel for your layout:
<StackPanel x:Name="LayoutRoot" Background="White">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" Height="30" />
</StackPanel>
I think the issue is that your controls are sitting on top of each other.

memory cleanup issue inside listbox / detaching the trigger issue

<listbox>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Width="480" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border
Height="105"
Width="110"
BorderBrush="White"
Grid.Column="0"
BorderThickness="2">
<Image
delay:LowProfileImageLoader.UriSource="{Binding Path=Avatar}"
Source="/Image/default-thumb-groups.png">
</Image>
</Border>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="4"/>
<RowDefinition Height="35"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Path=Name,Mode=TwoWay}"
Grid.Column="1"
Grid.Row="1"
FontFamily="Segoe WP Light"
FontSize="26"
Foreground="{StaticResource PhoneForegroundBrush}"
TextWrapping="Wrap">
</TextBlock>
<TextBlock
Text="{Binding Path=Members,Mode=TwoWay}"
Grid.Column="2"
Grid.Row="2"
FontFamily="Segoe WP Light"
HorizontalAlignment="Left"
FontSize="20" Opacity="0.91"
Foreground="{StaticResource PhoneForegroundBrush}"
TextWrapping="Wrap">
</TextBlock>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu
Name="DeleteGroup"
IsZoomEnabled="False"
Tag="{Binding Nid,Mode=TwoWay}"
Visibility="{Binding ElementName=GroupList, Path=DataContext.DeleteStatus,Mode=TwoWay, Converter=
{StaticResource booleanToVisibility}}" Opened="DeleteGroup_Opened" Closed="DeleteGroup_Opened">
<toolkit:MenuItem Header="delete group">
<Interactivity:Interaction.Triggers>
<Interactivity:EventTrigger EventName="Click">
<Command:EventToCommand Command="{Binding ElementName=GroupList,
Path=DataContext.DeleteCommand,Mode=TwoWay}" CommandParameter="{Binding
ElementName=DeleteGroup}" PassEventArgsToCommand="True"/>
</Interactivity:EventTrigger>
</Interactivity:Interaction.Triggers>
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
While trying for cleanup ; The Trigger of Context menu is not Detaching ; Because of this that page is not Dying even after navigating back from the page. This causing Saviour memory issue in our page. Please help me to resolve this Issue
Never worked with the Toolkit ContextMenu, but noticed that you are not the only one having similar problem. For example this article proves that "the ContextMenu control attaches itself to the RootVisual via mouse event handlers and therefore never gets GC'ed; even worse, the visual tree it is placed in is kept alive as well". Even if that article talks about the desktop, the symptoms are probably the same on WP7.
I would try to create/destroy menu programatically. This article demonstrates the techniques that can be used.
Another possibility would be to customize the listbox:
Override PrepareContainerForItemOverride: Call base.PrepareContainerForItemOverride() to get the standard ListBoxItem and add ContextMenu to it manually.
Override ClearContainerForItemOverride to clear the menu reference.
(Never tried that, but it should work.)
A side remark
Your Xaml seems to be overcomplicated to me. If nothing else, then using nested grids within ListBoxItem (which in turn is embedded into ListBox panel (VirtualizingStackPanel), which is in at least one more panel on the page level) must have terrible perf impact.
Even if I forget that the internal 4x2 grid uses 2 cells only (perhaps you simplified presented Xaml), what's the purpose of the outer grid? The same effect can be achieved by using a single grid and column span over the first column.

Looking for a DataGrid Control

I have been trying to find both built-in datagrid control and third party datagrid control for windows phone 7 but with no luck. Can anyone please guide me?
You know you can do this with a simple listbox or (if you want images in your grid) the deferred load Listbox. Here's some simple XAML to show you how:
<ListBox x:Name="myListBox">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<HyperLinkButton Content="{Binding Path=Description}" NavigateUri="{Binding Path=UriForEditingResource}"
<TextBlock Text="{Binding Path=LongDescription}" Grid.Column="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the above example I assume that you setting the myListBox control's ItemSource to a collection of objects whose class contains 3 properties (Description, LongDescription, and UriForEditingResource). There are 2 columns in my example and these columns will be of equal size and they should take over all the available space.
Use Blend to edit these (it will be much easier for you). BTW, I inlined my datatemplate. Blend will typically create a resource for the data template (which means you can re-use datatemplates.
I hope that helps you out some (BTW, the ListBox is not the only control you can do this type of thing with, so study the available controls).
Jay

Resources