Poor performing context menu - windows-phone-7

I'm displaying a simple twitter feed in my app and I have implemented a refresh method in the context menu. Problem is that displaying the context menu performs poorly (it's not a matter of quantity of items, happens with just a few). It seems I need to tap/hold extra long and then the context menu appears - not with the smooth animation, but a bit with a jolt.
Ideally it would be nice to have it perform more like the people hub where there is instant feedback that you've tapped the item, and then the context menu appears in with the smooth animation.
Another part of this that baffles me is when the context menu does appear, the rest of the screen sort of "shrinks to the background" to draw attention to the selected item. It seems this would have something to do with the perf problem. Again, look to the people hub for ideal behavior on this matter.
Any tips on how to implement this better?
here's my xaml:
<!-- twitter feed-->
<controls:PivotItem Header="feed">
<ScrollViewer>
<StackPanel>
<ItemsControl ItemsSource="{Binding Tweets}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Padding="12">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu >
<toolkit:MenuItem Header="refresh" Command="{Binding Main.RefreshTweetsCommand, Source={StaticResource Locator}}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding user.profile_image_url}" Margin="0,12,0,0" Height="80" Width="80" Stretch="UniformToFill" VerticalAlignment="Top"/>
<Border Padding="12,0,0,0">
<StackPanel>
<TextBlock Text="{Binding user.name}" Foreground="Blue" FontSize="30" />
<TextBlock Text="{Binding date_created}" FontSize="16"/>
<TextBlock Text="{Binding text}" FontSize="20" TextWrapping="Wrap" Width="320" />
</StackPanel>
</Border>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="more . . ." FontSize="32" Padding="20">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<cmd:EventToCommand Command="{Binding MoreTweetsCommand, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</StackPanel>
</ScrollViewer>
</controls:PivotItem>

The "shrinks to the background" problem is done in the people hub too, it's just not as obvious. You can change this with the IsZoomEnabled property, see http://www.windowsphonegeek.com/articles/WP7-ContextMenu-in-depth--Part1-key-concepts-and-API.
I've noticed that the animation is quite jerky as well, in comparison to Microsoft's implementation.

Related

Silverlight ListBox does not scroll on mouse wheel movement on Mac

I have Silverlight based web app where. I found the ListBox doesn't scroll on mouse wheel scroll. I am able to scroll by clicking vertical scroll bar. When I use mouse wheel or 2 finger scroll it doesn't work.
Here in Mouse Wheel scroll in List box 2 is working fine but ListBox 1 it does not work.
ListBox 1
<Border CornerRadius="6,6,0,0" Grid.Row="1" Margin="2,5,2,0" BorderThickness="1,1,1,0" BorderBrush="#FFC4C4C4">
<Grid>
<ListBox x:Name="filterListBox" Grid.Row="0" Grid.Column="1" Background="Transparent" SelectedIndex="{Binding SelectedFilterIndex, Mode=TwoWay}" SelectedItem="{Binding SelectedFilterItem, Mode=TwoWay}" SelectionChanged="ListBox_SelectionChanged" BorderThickness="0" VerticalAlignment="Center" Margin="5,3" ItemContainerStyle="{StaticResource FilterListBoxItemStyle}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="FilterSelectionChanged"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem Padding="7,2" VerticalContentAlignment="Center" Tag="Popular" Visibility="{Binding Path=IsPopularChannelTab, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{Binding Path=PopularChannelsText, Source={StaticResource PageStrings}}" FontSize="13" FontWeight="SemiBold" FontFamily="Arial" VerticalAlignment="Center" />
</ListBoxItem>
<ListBoxItem IsEnabled="False" VerticalContentAlignment="Center" Visibility="{Binding Path=IsPopularChannelTab, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="#FFBDBDBD" BorderThickness="0,2,2,2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20"/>
<Border BorderBrush="#FFF8F8F8" BorderThickness="0,2,2,2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Padding="7,2" VerticalContentAlignment="Center" Tag="All">
<TextBlock Text="{Binding Path=AllChannelsText, Source={StaticResource PageStrings}}" FontSize="12" FontWeight="SemiBold" FontFamily="Arial" VerticalAlignment="Center"/>
</ListBoxItem>
<ListBoxItem IsEnabled="False" VerticalContentAlignment="Center">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="#FFBDBDBD" BorderThickness="0,2,2,2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20"/>
<Border BorderBrush="#FFF8F8F8" BorderThickness="0,2,2,2" HorizontalAlignment="Center" VerticalAlignment="Center" Height="20"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Padding="7,2" VerticalContentAlignment="Center" Tag="Favorites">
<TextBlock Text="{Binding Path=FavoritesText, Source={StaticResource PageStrings}}" FontSize="13" FontWeight="SemiBold" FontFamily="Arial" VerticalAlignment="Center"/>
</ListBoxItem>
</ListBox>
</Grid>
</Border>
ListBox 2
<Grid Visibility="{Binding Path=IsHavingProvider, Converter={StaticResource BoolToVisibilityConverter}}" Margin="0,20,0,0" Grid.Row="4">
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<core:MagicTextBlock Grid.Row="0" TextBlockStyle="{StaticResource TextBlock_Style}" Text="{Binding Path=Activity, Source={StaticResource PageStrings}}" />
<ListBox Margin="0,10,0,0" Grid.Row="1" x:Name="Provider" Width="480" Height="195" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding Providers,Mode=TwoWay}"
SelectedItem="{Binding SelectedProvider,Mode=TwoWay}"
ItemContainerStyle="{StaticResource Table_ListBoxItem_Style}"
DisplayMemberPath="name">
</ListBox>
</Grid>
Sorry to be the bearer of bad news:
Some current mouse devices for Macintosh have a physical or virtual
mouse wheel. However, the program access layer used by Silverlight on
Macintosh does not support forwarding the mousewheel event to
Silverlight in a browser-hosted situation. You can handle the
Silverlight MouseWheel event from a Macintosh platform client, if the
Silverlight application is running out-of-browser. Otherwise, consider
handling mousewheel events for Macintosh platform at the HTML DOM
level; for more information, see Platform Dependencies.
From the MSDN Silverlight Differences on Windows and Macintosh.
The good news is you can listen to the mousewheel events in the HTML page via JavaScript and pass those events into Silverlight via its JavaScript interop API. The additional bad news is I don't know of a way to have it automatically wire into the GUI elements in your application to have them automatically just work (like scrolling list boxes in your case). As far as I know, you'd have to manually listen to it, pick up on which object the user is hovering over with their mouse, and programmatically scroll the GUI component.

How to Bind data in context menu WP7

I have a list in which there are schedule name, date and time that are visible, but i want that on the long press of a particular item in a listbox there opens a context menu in which only description and schedule name of particular item is visible.
So my code in xaml is: first in the grid there is a listbox in which i have bound the whole list that is scheduleList ansd in the listbox.itemtemplate and inside the data templatei have binded the particular item to the textblock
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Hold="scheduleListbox_Hold" Tap="scheduleListbox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<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" Hold="StackPanel_Hold">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="menuItem" VerticalOffset="100.0" IsZoomEnabled="True" >
<toolkit:MenuItem Header="Add to calender" ItemsSource="{Binding ScheduleName }"/>
<!--<toolkit:MenuItem Header="Description" ItemsSource="{Binding Description}"/>-->
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell me that how to bind description and schedule name in context menu, either by code or by xaml.
How to bind data in context menu either through code or through xaml?
I create a breadcrumb context menu with binding using the code below. The code you should be interested in is the toolkit:ContextMenu.ItemTemplate section where you specify the bindings. Notice that you can also bind to a command parameter like I do with the index value.
The toolkit:ContextMenu.Template section is not needed. I added this to allow scrolling the items if there are more than will fit on the screen and also to move the menu to the bottom of the screen.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="breadCrumbContextMenu" ItemsSource="{Binding CloudViewModel.BreadCrumbMenuItems}" Opened="ContextMenu_Opened" Closed="Breadcrumb_ContextMenu_Closed">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border Margin="0,700,0,0" BorderThickness="1" >
<ScrollViewer MaxHeight="700">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Click="breadcrumbMenuItem_Click" CommandParameter="{Binding Index}" Padding="0">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal" Height="40">
<Image Source="{Binding Image}" Width="40" Height="40" />
<TextBlock Text="{Binding Text}" Margin="24,0,0,0" />
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Windows Phone 7 - ListBox and Stackpanel sizes

I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.
<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
<Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
<StackPanel Width="250">
<TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
</StackPanel>
<Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
<Button.Background>
<ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).
Thank you very much.
A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.
http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.
Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.

Scroll PanoramaItem Header in 'wide' PanoramaItem

I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.

ListBox OnSelectionChanged event stops working with "many" items

I noticed a very strange behavior:
in my windows phone 7 I have a ListBox that can contain anything from 1-2 to 2-300 items.
I noticed that when the number of items is big (not sure about the number but for sure >150 items) the OnSelectionChanged event is not raised.
This is the XAML of my listbox
<ListBox ItemsSource="{Binding Path=Posts}" ItemTemplate="{StaticResource IconsWithText}"
ScrollViewer.VerticalScrollBarVisibility ="Disabled"
SelectionChanged="ListBox_SelectionChanged" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
And the template for the ItemTemplate is:
<DataTemplate x:Name="IconsWithText">
<Grid x:Name="ThumLink" Width="160" Height="140" Margin="10" Background="#FF666666">
<Image Source="Resources/Images/All.png" Visibility="{Binding Path=VisibilityAll}" />
<Image delay:LowProfileImageLoader.UriSource="{Binding Picture}"
Visibility="{Binding Path=VisibilityPic}"
Stretch="UniformToFill" VerticalAlignment="Top" HorizontalAlignment="Left" />
<Border x:Name="border" VerticalAlignment="Bottom" Background="#d9ffffff" Height="62" BorderBrush="Black" Visibility="{Binding Path=VisibilityPic}" >
<TextBlock x:Name="textBlock" Text="{Binding Title}" VerticalAlignment="Top" TextWrapping="Wrap" MaxHeight="60" Style="{StaticResource PhoneTextSmallStyle}"
Foreground="Black" FontSize="20" Margin="4,1,4,0" Height="62"/>
</Border>
</Grid>
</DataTemplate>
Is this a bug or did I do something wrong? I was in debug and the event handler never gets called, but it works when the items are not many.
Simone
The problem with using the plain StackPanel is that all visual object will be created and added to the StackPanel which will be very expensive in terms of memory and may trip over other limits in the rendering system.
Try changing to:-
<VirtualisingStackPanel Orientation="Horizontal" />
So far though I've not been able to reproduce your problem with 300 items even using a plain StackPanel.

Resources