I am trying to duplicate a popup menu shown from a Application bar button (like Reply in the standard Mail app) and I need to know the font size and font weight of the Application bar menu items.
I did som trial and error but I cannot match the size and weight exactly.
Font size: PhoneFontSizeLarge
Font family: PhoneFontFamilySemiLight
Have you tried using a ContextMenu?
Using the following XAML :-
<Grid x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="True"
x:Name="ContextMenu">
<toolkit:MenuItem x:Name="Item1"
Header="Item 1"/>
<toolkit:MenuItem x:Name="Item2"
Header="Item 2" />
<toolkit:MenuItem x:Name="Item3"
Header="Item 3" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</Grid>
And the following Application Bar XAML :-
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True"
IsMenuEnabled="True"
x:Name="MyAppBar">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png"
Text="Button 1"
Click="ApplicationBarIconButton_Click"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
And the following XMLNS (You need to add the Windows Phone Toolkit via Nuget):-
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
And then finally the following C# :-
private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
this.ApplicationBar.IsVisible = false;
ContextMenu.IsOpen = true;
}
The ContextMenu pops up in a similar way to the Email reply pop up menu.
Probably:
FontSize="33"
FontWeight="Light"
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.
In windows phone i could easily marquee a textblock. But is there any solution to marquee list of items for which i can define template and bind it to a list of items.
Thanks
Gokoulane Ravi
Although it's not a WP style...
Add storyboard to page resources:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever">
<DoubleAnimation From="480" To="-480" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Add ScrollViewer, add StackPanel inside and TextBlock inside:
<ScrollViewer x:Name="LongScrollViewer" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden" Margin="0,212,0,339" IsEnabled="False" >
<StackPanel Margin="0" Height="58">
<TextBlock x:Name="LongTextBlock" Text="Very long, real long, it's a long text." Margin="0" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Top"
HorizontalAlignment="Center" TextAlignment="Center" TextTrimming="None" TextWrapping="NoWrap">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="translate" />
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</ScrollViewer>
In page's Loaded method make sure TextBlock's text is long enough for scrolling:
Size size = new Size(double.PositiveInfinity, double.PositiveInfinity);
this.LongTextBlock.Measure(size);
size = this.LongTextBlock.DesiredSize;
if (size.Width > this.ActualWidth)
{
this.Scroll.Begin();
}
You can do that. However you'll need to write custom XAML to achieve this functionality. Blend can help you over here to create that custom animation and run as marquee.
I have listbox in my WP7 that uses the below DataTemplete to display the list items
<DataTemplate x:Key="MetaDataTemplate">
<Grid Width="440" Margin="4,12,0,12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="download" Visibility="{Binding DownloadVisible}" Command="{Binding Download}"/>
<toolkit:MenuItem Header="get link" Command="{Binding GetLink}"/>
<toolkit:MenuItem Header="delete" Command="{Binding Delete}"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<Image Height="64" Width="64" Source="{Binding Thumb}" Stretch="UniformToFill" />
<TextBlock Text="{Binding MetaData.Name, Mode=OneWay}" VerticalAlignment="Center" Margin="12,0,0,0"
Style="{StaticResource MetaDataHeaderStyle}" Grid.Column="1" />
</Grid>
</DataTemplate>
defining the context menu data template makes it quite impossible to close the menu on pressing the back button! Does anyone faced this problem? How did you solve it?
I searched for the solution on internet, but couldn't find one. Any help is appreciated.
A way to do it is to have a ContextMenu variable in the code behind, and have an event handler for the Opened event of the ContextMenu in the template.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu Opened="ContextMenu_Opened">
<toolkit:MenuItem Header="stuff">
</toolkit:MenuItem>
<toolkit:MenuItem Header="more stuff">
</toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
In the Opened event handler, set the ContextMenu variable to that instance (i.e. sender).
private void ContextMenu_Opened(object sender, RoutedEventArgs e)
{
menu = sender as ContextMenu;
}
Finally, override OnBackKeyPress, so that if the variable is not null, and the menu is open, then close the menu and cancel the back event.
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
if (menu != null && menu.IsOpen)
{
menu.IsOpen = false;
e.Cancel = true;
}
base.OnBackKeyPress(e);
}
That should do it! Let me know if you have any issues, or need me to paste the full code.
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
I am porting an iPhone app to WP7 which contains a map with several markers/pushpins that I get from a webservice (location, icon and title).
I have setup the XAML required to display the map as well as some code for the pushpin:
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="customPushpin" TargetType="my:Pushpin">
<Image Height="39" Source="Resources/Icons/Pushpins/pinGreen.png" Stretch="Fill" Width="32"/>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<my:Map Height="Auto" HorizontalAlignment="Stretch" Margin="0" x:Name="Map"
VerticalAlignment="Stretch" Width="Auto" CredentialsProvider="{Binding CredentialsProvider}"
CopyrightVisibility="Collapsed" LogoVisibility="Collapsed" Center="{Binding Mode=TwoWay, Path=Center}"
ZoomBarVisibility="Visible"
ZoomLevel="{Binding Zoom, Mode=TwoWay}">
<my:MapItemsControl ItemsSource="{Binding Pushpins}">
<my:MapItemsControl.ItemTemplate>
<DataTemplate>
<my:Pushpin MouseLeftButtonUp="Pushpin_MouseLeftButtonUp"
Location="{Binding Location}"
Template="{StaticResource customPushpin}">
</my:Pushpin>
</DataTemplate>
</my:MapItemsControl.ItemTemplate>
</my:MapItemsControl>
</my:Map>
</Grid>
I am looking for a way to add some sort of bubble when the user clicks on the pushpin. I have looked a bit into infoboxes/tooltips but since they work on hover, that's not something I can use for the phone (tap/click).
I am guessing there's no similar control in WP7 that creates a bubble - how could I go about creating something similar?
Thanks in advance,
Alex
You could simply put a square Border inside LayoutRoot with Visibility="Collapsed", then when you click your pushpin you update its content and make it visible.
Just make sure to put it after your map control (otherwise it will be rendered behind the map and will consequently be invisible).
The easiest way to achieve this is to Show/Hide the Content of the Pushpin on Tap instead of MouseLeftButtonUp because of some performance considerations.
void pushPin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
this.border.Visibility = System.Windows.Visibility.Visible;
//stop the event from going to the parent map control
e.Handled = true;
}
private void map_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
this.border.Visibility = System.Windows.Visibility.Collapsed;
}
You could create a custom popup.
A great video that exaplains how to do this is located here.
Other solution is using the ContextMenu from the Silverlight toolkit for Windows Phone!
Just go to the Coding4Fun page on CodePlex and download it ( it contains the toolkit ) and in your XAML inside the PushPin definition add following:
<map:Pushpin x:Name="currentLocation">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu IsZoomEnabled="False">
<toolkit:MenuItem Header="this is menu item 1" Click="MenuItem_Click" />
<toolkit:MenuItem Header="this is menu item 2" Click="MenuItem_Click" />
<toolkit:MenuItem Header="this is menu item 3" Click="MenuItem_Click" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu></map:Pushpin>
This way, when you tap and hold the pushpin, you'll get the contectmenu!
( good example also found here: example )