42506

Pinch to Zoom on ListBox on windows phone 7

Question:

I am trying to add pinch to zoom feature to a data bound ListBox. What is the most efficient way to do this? I have placed the ListBox inside a Grid control and made it scrollable.

This is my current code.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="10,0,10,10" Background="Black" > <ListBox Name="lstText" FontSize="24" Foreground="White" SelectionMode="Single" Margin="10,0,10,10" ScrollViewer.VerticalScrollBarVisibility="Visible" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel > <TextBlock Text="{Binding Text}" TextWrapping="Wrap"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> <toolkit:GestureService.GestureListener> <toolkit:GestureListener Tap="GestureListener_Tap" PinchCompleted="GestureListener_PinchCompleted" Flick="GestureListener_Flick"> </toolkit:GestureListener> </toolkit:GestureService.GestureListener>

Answer1:

The Listbox isn't designed to be zoomed (via pinching or any other method).

If you want to implement this you must redraw the content at the different zoom levels.<br /> You'd have a number of issues to overcome though:

<ul><li>How do you inform the user that they can alter the text size this way? </li> <li>How do you avoid affecting the standard behaviour for scrolling and selecting items in the listbox.</li> <li>How should scrolling behave with regard to wrapping and the currently shown text?</li> <li>A list shouldn't be used to show large amounts of text on a phone. If you need to show a large amount of text, have a short "title" in the list and then show the detail in another page. This way the text in the list can always be displayed in a way that is large enough that it never need changing and should always be readable.</li> <li>Is this a genuine problem you are trying to overcome or just something you think would be nice to have? The phone won't be used for just your app so why do you need this if the user will still have to use lists with a fixed text size in the OS and other apps.</li> <li>You'd have potential performance issues with performance as the framework redraws everything in the list when you change the size of the text. You could look at use deferred loading to only have to redraw what is shown on the screen while zooming but this will impact how you determine the top (and bottom) of what is shown as the sizes change.</li> </ul>

Summary: This is almost certainly unnecessary and will be very complicated and difficult to do well. If you really want to try this have a go and then post code with any problems.

Answer2:

Alex Yakhnin offers a solution for scrolling long text.

<a href="http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx" rel="nofollow">Creating Scrollable TextBlock for WP7. - Alex Yakhnin's Blog</a>

You can wrap a TextBlock in a ScrollViewer which may be sufficient for your needs. If your text is long enough you will hit a variety of walls as the text gets larger in size. Alex's solution is a control which wraps a StackPanel in a ScrollViewer and adds TextBlocks to the StackPanel in manageable sections.

Answer3:

I've done this myself with manipulationDelta but it's not smooth at all

In the class attributes

x:local="clr-namespace:YourApplicationNamespace"

In the XAML:

<Grid x:Name="LayoutRoot" ManipulationDelta="LayoutRoot_ManipulationDelta"> <Grid.Resources> <local:CustomSettings x:Key="Settings"/> <DataTemplate x:Key="verseDataTemplate"> <TextBlock FontSize="{Binding Path=Font35, Source={StaticResource Settings}}" Text="{Binding}"/> </DataTemplate> </Grid.Resources> <ListBox ItemTemplate="{StaticResource verseDataTemplate}"/>

in the code behind:

private void LayoutRoot_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { try { var fnt = lboVerses.FontSize; if (e.DeltaManipulation.Scale.X == 0 || e.DeltaManipulation.Scale.Y == 0) return; if (e.DeltaManipulation.Scale.X > 1 || e.DeltaManipulation.Scale.Y > 1) { if (fnt < 72) BibliaSettings.font35++; } else if (e.DeltaManipulation.Scale.X < 1 || e.DeltaManipulation.Scale.Y < 1) { if (fnt > 5) BibliaSettings.font35--; } } catch (Exception x) { Debugger.Log(0, "Errors", x.Message + "\n" + x.StackTrace); } }

Your CustomSettings class

public class CustomSettings : INotifyPropertyChanged { public static List<CustomSettings> Instances; public CustomSettings() { if (Instances == null) Instances = new List<CustomSettings>(); Instances.Add(this); } public static int font35 { get { return Get("Font35", 35); //Provide mechanism to get settings } set { Save(value, "Font35");//Provide mechanism to store settings Instances.ForEach(inst => inst.OnPropertyChanged("Font35")); } } public int Font35 { get { return font35; } set { font35=value; } } public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator] protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); } }

Recommend

  • Presenting NSOpenPanel as sheet synchronously
  • Why are pure reducers so important in redux?
  • Button inside Update Panel is not triggered, in asp.net
  • Windows 8 Metro style ListView auto scroll
  • Is there a way to act before the scroll event?
  • Operation not supported on read-only collection
  • Listen to the 'change' even of an element in the shadow DOM
  • Notepad++ - delete all lines with certain text
  • How to create a data template dependent on an XML Attribute?
  • Bind collection of objects to ListBox
  • Jackson mapper write id instead of entire object
  • Scrolling News Ticker Jquery - Issues
  • How to remove the dot in to_char if the number is an integer
  • Hibernate in Glassfish - Ejb3Configuration NoClassDefFoundError
  • Cursor in wrong place in contenteditable
  • change color of jstree node
  • How to create two column output from a single column
  • Spring integration inbound-gateway Fire an event when queue is empty
  • How can I get the choice “H2” back in the H2 consol?
  • Cloud Code function running twice
  • Approximate Order-Preserving Huffman Code
  • ListItem.Attributes.Add not working
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • How to use carriage return with multiple line?
  • Control modification in presentation layer
  • Adding a button at the bottom of a table view
  • Sending data from AppleScript to FileMaker records
  • Adding custom controls to a full screen movie
  • Confusion with PayPal's monthly billing cycle
  • php design question - will a Helper help here?
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How do I configure my settings file to work with unit tests?
  • Turn off referential integrity in Derby? is it possible?
  • Add sale price programmatically to product variations
  • Unable to use reactive element in my shiny app
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How do I use LINQ to get all the Items that have a particular SubItem?