wp7 popup blocking textbox in popup - silverlight

I have a popup that opens on the MainPage with a couple of textboxes. When ever you focus on the lower textbox the keyboard obscures it from view. Usually the textboxes slide into view. i don't know why that is not happening here.
please help!
<UserControl x:Class="Controls.EditControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:SampleData="clr-namespace:SampleData"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Height="800" Width="480"
d:DataContext="{d:DesignData ../SampleData/sampleEditPopup.xaml}">
<Grid x:Name="LayoutRoot" Background="#FF000000" Opacity="0.995">
<StackPanel Margin="0,20,0,0" Orientation="Horizontal" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="Name" HorizontalAlignment="Left" Height="26" Margin="15,10,0,10" Width="110" TextAlignment="Right"/>
<TextBox x:Name="tb_name"
TextWrapping="Wrap"
Width="340" Height="75"
Margin="10,13,15,12"
InputScope="Text" MaxLength="1000"
Text="{Binding Title, Mode=TwoWay}"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,150,0,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="Description" HorizontalAlignment="Left" Height="26" Margin="15,40,0,10" Width="110" VerticalAlignment="Top" TextAlignment="Right"/>
<TextBox x:Name="tb_description"
TextWrapping="Wrap"
Width="340" Height="254"
Margin="10,13,15,12"
InputScope="Text" MaxLength="1000"
Text="{Binding Description, Mode=TwoWay}"/>
</StackPanel>
</Grid>
and here is the code to open it:
EditControl ec = new EditControl();
ec.Title = cm.Title;
ec.Description = cm.Description;
//sets appbar icons for accepting values
setEditIcons();
Popup edit = new Popup() { Child = ec, Tag = this };
edit.Closed += new EventHandler(edit_Closed);
edit.IsOpen = true;

from a UX perspective I'd heavily recommend against having any partial popup/overlay that has more than 1 or 2 buttons. It's just not done in WP7. If you have a form you'd like folks to fill out move it to its own page. Either by letting the user navigate to that page, or by introducing a new transient page (that cannot be navigated back into) prior to the current page.
You'll have more problems than just the on-screen keyboard in with form overlays. You'll need to change the AppBar to have "V" and "X" buttons for any data entry, you'll need to manage focus not slipping back into under the overlay/popup, you'll need to make sure the "back" button closes the popup, etc.
IMO The best approach is a simple and consistent UX.

Related

Capturing name of StackPanel from Drop event

Within WPF I have the following XAML code:
<Page x:Class="com.MyCo.MyProj.Pages.Configuration.ManageLinkage.MasterLinkage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:com.MyCo.MyProj.Pages.Configuration.ManageLinkage"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="MasterLinkage">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TabControl TabStripPlacement="Top" Background="Transparent">
<TabItem Header="Import">
<ListBox Margin="0,5,0,0" Name="lbxImportItems" HorizontalAlignment="Left" VerticalAlignment="Top" Width="110" Background="Transparent"
PreviewMouseLeftButtonDown="lbxImportItems_PreviewMouseLeftButtonDown" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" Name="DBImport">
<Image Source="/Images/DBImport25px.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<TextBlock Text="Database" Foreground="AntiqueWhite"/>
</StackPanel>
<StackPanel Orientation="Vertical" Name="CSVImport">
<Image Source="/Images/CSVImport25px.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<TextBlock Text="CSV Import" Foreground="AntiqueWhite"/>
</StackPanel>
</ListBox>
</TabItem>
</TabControl>
<Canvas x:Name="cnvsLinkScreen" AllowDrop="True" Grid.Column="1" Background="Transparent" Drop="cnvsLinkScreen_Drop" DragOver="cnvsLinkScreen_DragOver" ></Canvas>
</Grid>
The code for capturing the event is here:
private void cnvsLinkScreen_Drop(object sender, DragEventArgs e)
{
Canvas parent = (Canvas)sender;
object data = e.Data.GetData(typeof(string));
StackPanel objIn = (StackPanel)e.Data;
...
}
The drag and drop work great, the event method created the image in the canvas. However, I want to capture the Name="" from the StackPanels which are dropped.
I found the Name buried super deep in the "DragEventArgs e" object. I was think that there should be a way to cast the object (or the object within that object) as a StackPanel to easily work with it. The above code does not convert the StackPanel object( it's not at the root or the child object; I tried both) so it exceptions on "StackPanel objIn = (StackPanel)e.data;"
How do I either translate the incoming object to a StackPanel or how do I access the Name attribute from the Stackpanel?
I got it. I was close with the translation. To translate / typecast the object to what you are working with I needed to use the following line:
StackPanel objIn = (StackPanel)(e.Data.GetData(typeof(StackPanel)));
Which is slightly different than above.

WPF Compobox - how to display entire content of the two items without scrolling?

The following Combobox in WPF project needs to always have exactly two Rectangles of heights 256 and 36 in each item respectively. And when user clicks on the dropdown button of the Combobox I would like to have it display both ComboboxItems without user having to scroll.
Question: How can we achieve it? Currently it displays only first ComboboxItem (Aqua color rectangle inside), and you have to scroll to get to see the second ComboboxItem (YellowGreen color rectangle inside). I have tried setting ScrollViewer.VerticalScrollBarVisibility="Hidden" on combo box but that makes it even worst since it does not even allow to show the second item.
XANL:
<Window x:Class="Wpf_TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Wpf_TestApp"
mc:Ignorable="d"
Title="MainWindow" Height="569.455" Width="800">
<Grid>
<StackPanel Margin="5" Width="15">
<ComboBox DockPanel.Dock="Top" Width="25">
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="260">
<Rectangle x:Name="MyRectangle" Fill="Aqua" Width="176" Height="256"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="38">
<TextBlock Text="Second Item:" />
<Rectangle x:Name="MyOtherRectangle" Fill="YellowGreen" Width="176" Height="36"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
</ComboBox>
</StackPanel>
</Grid>
</Window>
Screenshot of the above combobox:
Display when user first clicks on dropdown of the combobox:
User has to scroll to get to the second item of the combobox:
You can use dependency property MaxDropDownHeight of ComboBox as shown below to display both combo box items in the drop down without having to scroll,
<ComboBox DockPanel.Dock="Top" Width="25" MaxDropDownHeight="Auto">
I have tested your code with 320 Height and it works perfectly fine. If you need to add more items, you can increase the MaxDropDownHeight value accordingly.

ScrollViewer is not working for TextBlock in WPF

Friends, below is my code. I don't know why my scroll bar is not working.
<Window x:Class="Seris.Views.Help"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Help" Height="400" Width="400">
<DockPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="350" Width="372"><InlineUIContainer>
<Image Height="100" Width="100" RenderTransformOrigin="1.37,0.46" Source="../Images/help.jpg"/>
</InlineUIContainer><Run/><LineBreak/><Run Text="There are some validations on the Vehicle Form as below."/><LineBreak/><Run Text="P"/><Run Text="lease note that all the fields are mandatory."/><LineBreak/><Run/><LineBreak/><Run FontWeight="Bold" Text="Vehicle No"/><LineBreak/><Run Text="It should be always 7 character long con"/><Run Text="taining "/><Run Text="first 3 digits as alphabet in capital form and remaining 4 numerical. "/><LineBreak/><Run Text="i.e. GHI1234"/><LineBreak/><Run FontWeight="Bold" Text="Model"/><LineBreak/><Run Text="It can be anything except null."/><LineBreak/><Run Text="i.e. Fluid"/><LineBreak/><Run FontWeight="Bold" Text="Manufacturing Date"/><LineBreak/><Run Text="It should not be a future date."/><LineBreak/><Run FontWeight="Bold" Text="IU No"/><LineBreak/><Run Text="It must be 10 digit numerical number."/><LineBreak/><Run FontWeight="Bold" Text="Personnel Name"/><LineBreak/><Run Text="You must select Personnel Name from combo box."/><LineBreak/>
</TextBlock>
</ScrollViewer>
</DockPanel>
</Window>
Remove Height="350" & Width="372" from the TextBlock, these are preventing ScrollViewer to work properly
if you want to restrict the size you may apply the same to DockPanel or ScrollViewer as needed.
so in short if you apply width or height to TextBlock that will restrict the size of the element and ScrollViewer may not work as expected.
additionally you may also remove HorizontalAlignment="Left" & VerticalAlignment="Top" from the TextBlock as they might not be required as well

ListBox with "load more" option

I would like to know how to construct the ListBox in WP7 that only load 20 items at a single time, and have a footer that show "load more" if there is any.
When user press the "load more", it will load another 20 in the list without loading the previous loaded data?
I am using LINQ at the behind source.
my code for XMAL as follow:
<Grid>
<ListBox name="newsIndexListBoxEN">
<ListBoxItem>
<DataTemplate>
<StackPanel Width="410" Orientation="Horizontal" VerticalAlignment="Top" Margin="0,5,0,5">
<StackPanel Background="DarkBlue" Margin="10,0,0,0" Height="100" Width="100" VerticalAlignment="Top">
<TextBlock Name="columnsTypeTB" Text="{Binding pType}" Margin="0,0,0,0" Foreground="White" FontSize="23" HorizontalAlignment="Center" />
<Image Width="100" Height="100" VerticalAlignment="Top" HorizontalAlignment="Center" Source="Background.png" />
</StackPanel>
<StackPanel Width="300" Height="100" Margin="0,0,0,0">
<Path Margin="0,0,0,0" Data="M39,8 L389,8" Fill="DarkBlue" Height="1" Stretch="Fill" Stroke="DarkBlue" UseLayoutRounding="False" Width="400"/>
<TextBlock Margin="8,0,0,0" Text="{Binding pTitle}" Tag="{Binding pID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Width="292" Height="66" />
<TextBlock Margin="8,5,0,0" Text="{Binding pDate}" Tag="{Binding pID}" MouseEnter="NewsViewContent_mouseEnter" Style="{StaticResource PhoneTextSmallStyle}" VerticalAlignment="Bottom" TextWrapping="Wrap" Width="292" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBoxItem>
</ListBox>
</Grid>
C# Code as follow:
using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream fs = storage.OpenFile(fileName, FileMode.Open))
{
XDocument menuIndex = XDocument.Load(fs);
var menuIndexList = from query in menuIndex.Descendants("news")
orderby (int)query.Element("newsID") descending
select new mkmenu
{
pID = query.Element("newsID").Value,
pTitle = query.Element("newsTitle").Value,
pDate = query.Element("newspDate").Value,
pType = newsType
};
newsIndexListBoxEN = menuIndexList.Count();
}
}
any ideas? sample code?
You can edit your listbox template to show a "Load more" button at the end of the list. In Blend, right click on your listbox, choose Edit Template, Edit a copy. By default, your listbox has a template like this:
ScrollViewer
ItemPresenter
Wrap your ItemPresenter into a StackPanel, then add a button at the end:
ScrollViewer
StackPanel
ItemPresenter
Button
That button will always be displayed at the end of the listbox. Handle the Clicked event of that button to add items to your ObservableCollection.
You can bind your listbox to ObservableCollection and add first 20 items on your page(app) load. Than after pressing "load more" get next 20 items and add to collection. Items will automatically be added to listbox.

WPF TabIndex in a composite control

I have a simple window with a simple composite control embedded within it.
(Main Window)
<Window x:Class="TabOrder.Window1"
xmlns:local="clr-namespace:TabOrder"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Label HorizontalAlignment="Left" VerticalAlignment="Top">First</Label>
<TextBox TabIndex="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,0,0,0"/>
<Label HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0">Second</Label>
<TextBox TabIndex="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,30,0,0"/>
<local:MyControl Margin="0,60,0,0" VerticalAlignment="Top" HorizontalAlignment="Stretch" TabIndex="2"/>
</Grid>
(Composite control)
<UserControl x:Class="TabOrder.MyControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Label HorizontalAlignment="Left" VerticalAlignment="Top">Third</Label>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,0,0,0"/>
<Label HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,30,0,0">Fourth</Label>
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="80,30,0,0"/>
</Grid>
As expected on my form I get 4 text boxes...
First
Second
Third
Fourth
But when "First" has focus and I hit tab the focus is switched to "Third". WPF seems to be seeing the tab list as a single flat list rather than as a tree where MyControl is TabIndex 3 and the text box "Third" the first tabbed control within it.
Is this a bug in WPF or is there another way of doing this? The composite control is used in many windows, it could even be used more than once on a single window.
I know this response is quite late... but have you tried:
<UserControl ... KeyboardNavigation.TabNavigation="Local">
Doing so will ensure once your UserControl has recieved focus, you will navigate only through TabStop within your UserControl (instead of worring about conflicting TabIndex values throughout your app). After looping through the TabStops of your UserControl, TabNavigation will resume to the TabStop outside of it.
http://msdn.microsoft.com/en-us/library/system.windows.input.keyboardnavigationmode.aspx

Resources