i have a listbox with a datatemplate that looks like this:
spackpanel
textbox1
textbox2
/stackpanel
how i want to add a context menu, so i modified it like:
spackpanel
contextMenu
contextMenuItem
/contextMenu
textbox1
textbox2
/stackpanel
i gave no additional attributes like heigh etc. only the text/content and header attributes.
when i start it, i see the textboxe's but the contextMenu is not accessable when i hold it. does i make it right? where to find good examples with stackpanel and contextMenu?
Without seeing your code/xaml it's hard to say. But, the following works for me:
<StackPanel>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="option 1" />
<toolkit:MenuItem Header="option 2" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="first" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<TextBlock Text="second" Style="{StaticResource PhoneTextExtraLargeStyle}" />
</StackPanel>
Styles added to increase hit target size
Related
I have a problem with scrolling in windows phone. I have a lot of elements on page so to add ability to scroll I put this on ScrollViewer. Hovewer, when I foucesd on some text block and the keyborad shows up, the scroll in working but it cuts the top and bottom of the page so it's can't be reach by user. Have you had similar problem with your apps and know how to fix this ?
I wil be really grateful for any help
Link to image when I put screenshot with my problem
The picture contains four screenshots:
1) The top of the page
2) The bottom of the page
3) Focus on the first textbox
4) The area on the page which can be reached when focus is set to the first TextBox
The last one picture present the are which can be rached when focus is set to the first textbox. As you can see I can't get to the textboxes below Field 7 when keybord is shown.
What I need is the ability to scroll and to reach all elements when the keybord is shown.
Do you know how to resolve my poblem
It's my xaml code:
<phone:PhoneApplicationPage
x:Class="PhoneApp6.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="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="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<ScrollViewer Grid.Row="1" Height="600" Margin="12 0">
<StackPanel>
<StackPanel>
<TextBlock Text="Name 1" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 2" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 3" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 4" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 5" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 6" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 7" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 8" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 9" />
<TextBox />
</StackPanel>
<StackPanel>
<TextBlock Text="Name 10" />
<TextBox />
</StackPanel>
<Button>Submit</Button>
</StackPanel>
</ScrollViewer>
</Grid>
</phone:PhoneApplicationPage>
This is a known issue and is caused by the SIP changing the viewable area of the screen. The link David Gorden mentioned does help, but you actually need to change the height of the scrollviewer to achieve perfect results. To make things a little more complex WP does not trigger an event for when the SIP is visible! So you need to hook into the GotFocus/LostFocus events.
Edit your scrollviewer so it looks something like this:
<ScrollViewer x:Name="_scrollViewer"
VerticalAlignment="Top"
GotFocus="UIElement_OnGotFocus"
LostFocus="UIElement_OnLostFocus"
... bla bla
Now add the following in the codebehind:
private bool _isHdDevice;
private int _sipHeight;
private double _origHeight;
// Constructor
public MainPage()
{
InitializeComponent();
// todo - cater for landscape mode or sip scopenames that require extra space (predictive text and cut&paste icon)
var deviceWidth = this.ActualWidth;
_isHdDevice = (deviceWidth > 500);
_sipHeight = _isHdDevice ? 540 : 375;
_origHeight = _scrollViewer.Height;
}
private void UIElement_OnGotFocus(object sender, RoutedEventArgs e)
{
double height = this.ActualHeight - _sipHeight - TitlePanel.ActualHeight;
_scrollViewer.Height = height;
// the following lines are crucial otherwise a black band could appear above the SIP
App.Current.RootVisual.RenderTransform = new CompositeTransform();
this.UpdateLayout();
}
private void UIElement_OnLostFocus(object sender, RoutedEventArgs e)
{
_scrollViewer.Height = _origHeight;
}
This is basically resizing the scroll area when the sip (keyboard) is in view. You will need to add more code to cater for things like screen rotation, scopename associated to the textbox, and cut&paste icon if in view. But this will get you going and does the difficult bit.
Please mark as answered if it helped fix the issue.
If I understand this correctly, I was having a similar problem in my own app with an inability to scroll downward to the lowest texboxes while the keyboard is visible. Since I'm not all that clever, I solved it in the following way: a spacer that appears when the keyboard is up and disappears when it's not.
The textbox items for input in my scrollviewer are all in wrappanels, to keep things tidy. Below the last wrap panel, I added another, empty wrap panel, named "spacer" with a height of 120. It is set to visibility.collapsed by default.
As part of the gotfocus event handler for each of the textboxes in the wrap panel, I set spacer to visible. That allows for scrolling all the way to the last wrappanel/textboxes in my scroll viewer while the keyboard is up.
As a part of my lostfocus event handler for each of the textboxes, spacer's visibility is set back to "collapsed." That way, when there's no keyboard up, the scrollviewer doesn't have a big, funky, empty space at the bottom.
This may not be so elegant, but it's easy and works pretty well for me. I have not yet encountered any problems with it, though that doesn't mean there may not be something I've missed.
I have problems with the SIP (keyboard). It hides the currently focussed textbox.
I have a form with some numbers of TextBoxes and I change focus by tapping ↲ on the SIP.
But then the keyboard hides the textbox...
all my textboxes are in StackPanel and around by
Is this a known problem? Is there a solution?
<ScrollViewer x:Name="Scroller" Grid.Row="1">
<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>
keep your code inside the <ListBox>. It will not hide then.
I have a list box in which when i long-press the particular item of the listbox, a context menu opens. But in the listbox i have not used tap or hold event of listbox so how my context menu is visible.
Please tell which event is firing which opens my context menu; the xaml code is:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Tap="scheduleListbox_Tap">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu >
<toolkit:MenuItem Header="Add To Calendar" Click="AddToCalendar_Click" />
<toolkit:MenuItem Header="View Description" Click="ViewDescription_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock x:Name="textBlock1" Text="{Binding ScheduleName}" Foreground="WhiteSmoke" FontSize="32"/>
<TextBlock x:Name="textBlock2" Text="{Binding ScheduleDate}" Foreground="Red" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" Height="70" Width="460">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell how my context menu is open as i haven't used tap or hold event of listbox but when I long-press the listbox item, the context menu opens?
By default, the context menu opens on long hold, it is by design. If you wish to open it any other way, you must write your own logic. For examples on how to do that, see these threads:
Setting a ContextMenu to open on “Tap” causes ContextMenu to open up at the top of the screen
ContextMenu on tap instead of tap and hold
But be aware that some users might be confused by this since most users will expect that the context menu will be shown when you tap and hold the list box item.
I have a few contorls and I set the tabindex for the control that I want to stop. I use the emulator to test it. After typing the enter button on the key pad, the cursor stay on the textbox. Would someone show me the link or code to make it work? Thanks in advance.
The following is my code for the controls:
<TextBox x:Name="txtUser" Grid.Row="1" Grid.Column="2" IsTabStop="True" TabIndex="1" Style="{StaticResource txtStyle_24}" FontSize="32" />
<TextBlock x:Name="Password" Text="Password :" Grid.Row="2" Grid.Column="1" Style="{StaticResource LabelStyle_24}" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="32" Foreground="{StaticResource PhoneAccentBrush}" />
<PasswordBox x:Name="psd" PasswordChar="*" Grid.Row="2" Grid.Column="2" IsTabStop="True"
TabIndex="2" Style="{StaticResource PasswordBoxStyle_24}" FontSize="32"/>
TabIndex doesn't make sense in Windows Phone
If you want to move focus to next TextBox, subscribe to KeyUp event and check e.Key == Keys.Enter. Than move focus with textBox.Focus()
I saw behavior for this but can't find a link now
I have a listbox with context menu. How can I get value of SelectedIndex (SelectedItem) property in ContextMenuItem click event handler? Currently in events Edit_Click and Delete_CLick a value of CarsList.SelectedIndex always is -1.
Here my ListBox in XAML:
<ListBox Name="CarsList" Style="{StaticResource ListBoxStyle}" Margin="26,0,26,0" Height="380" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Name="ContextMenu" >
<toolkit:MenuItem Name="Edit" Header="Edit" Click="Edit_Click"/>
<toolkit:MenuItem Name="Delete" Header="Delete" Click="Delete_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding CarName}" TextTrimming="WordEllipsis" Foreground="Black" FontSize="24" Width="428"/>
<TextBlock Text="{Binding VIN}" TextWrapping="Wrap" Foreground="Gray" FontSize="20" Width="428"/>
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" Foreground="Gray" FontSize="20" Width="428"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks.
First of all you have assigned Context Menu to ListBox control, not an each item. So, move <toolkit:ContextMenuService.ContextMenu> block to StackPanel instead.
There are several ways to get element, on which context menu click was performed:
In Click handler you have sender object (it is MenuItem, I guess)
Cast it to MenuItem and look to DataContext of it. It will be item of collection you binded to a list. So, you can find index by:
int selectedIndex = YourListBoxItemCollection.IndexOf((sender as MenuItem).DataContext)
, where YourListBoxItemCollection is what you assign to CarsList.ItemsSource
Looks like you need to use ListPicker (http://silverlight.codeplex.com/releases/view/75888) with SelectedItems.
OR
Add some flag of element selection...