WP7 - Problem with DataTemplate on emulator but not On Blend - windows-phone-7

This is the code:
<ItemsControl x:Name="ContactsControl" ItemsSource="{Binding Contacts}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding ElementName=ContactsControl, Path=DataContext.PageName}" />
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
On the TextBlock I want to get date from the ItemsControl data context, so I use ElementName and in the 'Path' I use Path=DataContext.PageName.
So, On Blend I can see the data on the TextBlock as it should be, but when I run the emulator I cant see the data...
Why is it?
I'm working with VS2010 and Blend 4.
Thanks.

You are binding an items control to a list of Contacts. Traditionally you will then bind the textblock to a property of the class contained in the list. Why are you binding to another control and then bringing datacontext into the equation? Doesn't seem like something you normally do with a list.

Related

Make WP7 Panorama Item Title Smaller or Wrap?

My text is getting cutoff in my Panorama View, I am wondering is there away to wrap the text or make it smaller so it won't get cutoff?
Thanks
Have you tried changing the TitleTemplate?
<phone:Panorama Title="my application">
<phone:Panorama.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="50" Margin="0,50,0,0"/>
</DataTemplate>
</phone:Panorama.TitleTemplate>
</phone:Panorama>

How to Superscript some Text in a TextBox/TextBlock Control in windows phone 8?

I'm working on windows phone 8 app, and m stuck here, guys i want to show some text as a superscript either in TextBox or in TextBlock where-ever possible. suggest me how can i obtained it. Thanks
Why don't you use a stackpanel wrapping a couple of textblocks instead? Then adjust the margines on the stuff you want super and subscripted.
<StackPanel Orientation="Vertical">
<TextBlock Text="H2O3" FontSize="40" Margin="0,10"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="H" FontSize="40" />
<TextBlock Text="2" FontSize="40" Margin="0,-20,0,0"/>
<TextBlock Text="O" FontSize="40"/>
<TextBlock Text="3" FontSize="40" Margin="0,10,0,-10"/>
</StackPanel>
</StackPanel>
There's an alternative but it's only available in WP8: Typography.Variants.
I personally prefer this approach as it aligns more with WPF but there are cases where you have to do baseline manipulation or in this instance, margin wrangling. If WPF is any indication, it also requires a font that supports variants which are generally open type/true type only. See Superscript / subscript in hyperlink in WPF for a better explanation.

LongListSelector performance is very bad when enclosed in ScrollViewer

I have a UserControl that needs to contain a bunch of controls on top and a LongListSelector below them. Total height of the whole UserControl may (and almost always will) exceed the screen height and in that case a whole UserControl must be scrollable.
My current setup is as follows:
<staff:UserContentControl
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MyApp.Controls"
xmlns:staff="clr-namespace:MyApp.Helpers"
x:Class="MyApp.Controls.RemoteHomePage"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}">
<ScrollViewer>
<ScrollViewer.Content>
<StackPanel>
<TextBlock Txt="Text1" Sign="#" />
<TextBlock Txt="Text2" Sign="#" />
<controls:Divider />
<TextBlock Txt="Text3" Sign="~" />
<TextBlock Txt="Text4" Sign="~" />
<controls:TextDivider Text="Divider text" />
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</staff:UserContentControl>
This solution satisfies my needs but also there's a big problem: currently LongListSelector takes really a lot of time to load when amount of items it contains is reasonably large. It takes 8 seconds to process 300 items and during that time the whole UI is blocked. If I remove everything but LongListSelector, like so:
<staff:UserContentControl
...>
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</staff:UserContentControl>
then LongListSelector loads almost immediately even with significantly larger amount of items. But obviously I need those other controls above it so the question is what can I do solve this issue?
(Also related question: I was worried that LongListSelector inside ScrollViewer could cause double scrolling or something like that but eventually everything turned out just fine in this regard. I'm not sure if LongListSelector somehow knows that it is inside other scrollable control or if something else happens that I'm not aware of. Some explainantion why it works fine, although very slow, would be much appreciated.)
Don't use scroll viewer since it will make the longlistselector think it has an infinitely tall screen available and render all its items.
Instead to solve your usecase use the Header and Footer properties to add data above or below your list items.
You can't force ScrollViewer to virtualize LongListSelector items.
So you need to mimic it behaviour by LongListSelector only.
Make the first item contains all you required elements form StackPanel (1'st itemtemplate). And other elements will be basic LongListSelector elements (2'nd itemtemplate).
Here is explanation how to set different templates to the items: Styling a selected ListViewItem in Windows 8 CP

How to control the scroll-position of a scrollviewer in windows phone

I am using a scrollviewer to show contents, and added a "DoubleTap" event to the scrollviewer. In the doubleTap event I want to make the scrollviewer automatically scroll up to the top of the scrollviewer, but I can't find any property to control the scrollviewer. any thoughts?
Thanks in advance.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<ScrollViewer x:Name="scrollViewer2" Height="auto">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DoubleTap="GestureListener_DoubleTap"/>
</toolkit:GestureService.GestureListener>
<StackPanel x:Name="stackPanel2" Height="auto">
<!--contents-->
</StackPanel>
</ScrollViewer>
</Grid>
You don't have properties, but you have two methods for this: ScrollToVerticalOffset (to scroll vertically) and ScrollToHorizontalOffset (to scroll horizontally).
So in your case, this code should do the trick:
this.scrollViewer2.ScrollToVerticalOffset(0);
Also note that it is going to be obsolete or maybe unavailable after 8.1.
Use
this.scrollViewer2.ChangeView(0, 0, 1);
instead.
You can use this code:
this.scrollViewer2.ChangeView(null, 0, null);

WP7 - ListPicker in StackPanel in ScrollViewer

Just started with developing for WP7 and came across the following. I have a pivot application with a few pivotitems. On the first pivotitem (see code below) I want to be able to adjust a lot of settings. For this question all items to be set are called 'TextBox' and the choice in the ListPicker is either A,B or C.
Now if I do NOT use the ScrollViewer and I tap any of the listpickers I get to see all three options BUT I can not scroll through all listpickers.
If I DO use the ScrollViewer, I CAN see all listpickers but only the top one (that's visible) will expand and give me the options A,B and C, they others stay collapsed.
How can I get every listpicker to expand and show me the avaiable options AND be able to scroll to every listpicker on the page?
PS In code below copy the stackpanel between start and end about 15 times.
Thanks in advance for any help!
<controls:PivotItem Header="blabla">
<ScrollViewer>
<StackPanel Margin="0,0,36,0" VerticalAlignment="Top" d:LayoutOverrides="Width">
// start
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="TextBox" Width="80" TextAlignment="Right" Margin="10,22,20,0" HorizontalAlignment="Right" VerticalAlignment="Top" />
<toolkit:ListPicker Margin="0" Width="275">
<toolkit:ListPickerItem Content="A"/>
<toolkit:ListPickerItem Content="B"/>
<toolkit:ListPickerItem Content="C"/>
</toolkit:ListPicker>
</StackPanel>
// end - copy/paste code code between start and end about 15 times right here
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
This is, apparently, a common issue with Listpicker and ScrollViewer. You can find a workaround here
Should anybody stumble upon this, this has been fixed since the november 2011 release of the wP7 silverlight toolkit.

Resources