Search
Recent Tweets
« Windows Phone 7 Error Handling, Reporting | Main | Basic Windows Phone 7 Diagnostics »
Saturday
Oct092010

WP7 Orientation Based Scrolling

The main home view for my WP7 app has 7 main menu items in a ListBox and scrolling is not needed when the phone is in Portrait orientation. However I noticed that although a scrollbar does not appear, the ListBox was still scrollable in Portrait mode anyway. At first I set the ListBox's VerticalScrollBarVisiblity to Disabled but then quickly realized that cutoff the menu items in landscape orientation.

I decided to address this via a quick custom converter for now:
using System;
using System.Globalization;
using System.Windows.Controls;
using System.Windows.Data;
using Microsoft.Phone.Controls;

namespace RiverBuddy.Converters
{
    // ScrollViewer.VerticalScrollBarVisibility="{Binding Orientation, ElementName=uxPage, Mode=OneWay, Converter={StaticResource ScrollConverter}}">
    public class NoScrollIfPortraitConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //Debug.WriteLine("convert");
            var orient = (PageOrientation)value;
            var vis = (orient == PageOrientation.Portrait || orient == PageOrientation.PortraitDown || orient == PageOrientation.PortraitUp)
                ? ScrollBarVisibility.Disabled : ScrollBarVisibility.Auto;
            return vis;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

There was no need for me to convert back the other direction. The View then consumes the converter as follows:
<Views:PhoneApplicationPageBase
    x:Class="RiverBuddy.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7" 
    xmlns:Views="clr-namespace:RiverBuddy.Views" 
	xmlns:Converters="clr-namespace:RiverBuddy.Converters" FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape"  Orientation="Portrait" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
    shell:SystemTray.IsVisible="True" x:Name="uxPage">
    
    <Views:PhoneApplicationPageBase.Resources>
        <Converters:NoScrollIfPortraitConverter x:Key="ScrollConverter"/>
    </Views:PhoneApplicationPageBase.Resources>

    <Grid x:Name="LayoutRoot">    
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Grid.Background>
            <ImageBrush ImageSource="/Images/HomeBackground.png"/>
        </Grid.Background>
        
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="River Buddy" Foreground="White" Margin="-10,0" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="ListTitle" Text="Home" Margin="-10,0" Foreground="White" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1">
            <ListBox x:Name="MainListBox" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged"
                     ScrollViewer.VerticalScrollBarVisibility="{Binding Orientation, ElementName=uxPage, Mode=OneWay, Converter={StaticResource ScrollConverter}}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged" >
                        <cmd:EventToCommand Command="{Binding MenuItemSelected}" PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                            <Image x:Name="ItemImage" Source="{Binding Image}" Height="43" Width="43" VerticalAlignment="Top" Margin="10,0,20,0"/>
                            <StackPanel>
                                <TextBlock x:Name="ItemText" Text="{Binding LineOne}" Margin="-2,-13,0,0" 
                                          Foreground="White" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <!-- removed PhoneTextAccent style now b/c of custom background-->
                                <TextBlock x:Name="DetailsText" Text="{Binding LineTwo}" Opacity="0.65" Margin="0,-6,0,13" 
                                           Style="{StaticResource PhoneTextAccentStyle}" Foreground="Yellow"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>
 
</Views:PhoneApplicationPageBase>



Subscribe to this feed at: http://feeds.feedburner.com/thnk2wn

PrintView Printer Friendly Version

References (1)

References allow you to track sources for this article, as well as articles that were written in response to this article.

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>