Changing the DataTemplate Based on Page Orientation

0
votes

I have two listBox ItemTemplate in the XAML.But i can't change it with the Page's orientationChanged event to change the DataTemplate. here is the code:

protected override void OnOrientationChanged(OrientationChangedEventArgs e)
    {
        if (e.Orientation == PageOrientation.Landscape ||
            e.Orientation == PageOrientation.LandscapeLeft ||
            e.Orientation == PageOrientation.LandscapeRight)
        {
            this.HeadLineListBox.ItemTemplate = (DataTemplate)this.Resources["L_headerTemplate"];
        }

        else if (e.Orientation == PageOrientation.Portrait ||
                 e.Orientation == PageOrientation.PortraitDown ||
                 e.Orientation == PageOrientation.PortraitUp)
        {
            this.HeadLineListBox.ItemTemplate = (DataTemplate)this.Resources["P_headerTemplate"];
        }

        base.OnOrientationChanged(e);
    }

When i first into the page if the Orientation is Portrait, it will show the Portrait DataTemplate all the time even i changed the Orientation. So do when i first into the page it is Landscape.Someone can help me?

PS：I used the way post here:http://wp7-developer.com/code-snippet/changing-the-datatemplate-based-on-page-orientation/But it still don't work.

2
windows-phone-7orientationdatatemplate
I have try the method mentioned here follow, i didn't work too. wp7-developer.com/code-snippet/… – Joel
I've used the above technique to change the layout based on the orientation of the page. Is the OrientationChanged event not firing or is the datatemplate not being updated? – Matt Lacey
I make a breakpoint in the OrientationChanged event.It really fired when the orientation changed.But the page didn't work like the expected. – Joel
Is this event firing when the page is loaded? Are you coming to this from another page or is it the first to load? If not the first to load what orientations are supported by the preceeding page? which version of the tools are you using? – Matt Lacey
It didn't fired when the page is loaded.It is first load not coming from other page.I am using the 7.1 beta2 tools – Joel

2 Answers

1
votes

You need to bind the itemsource again after assigning new itemtemplate to apply the updated itemtemplate as -

 if (e.Orientation.ToString().Contains("Portrait"))

   lstData.ItemTemplate =

     (DataTemplate)this.Resources["listPortrait"];

 else

   lstData.ItemTemplate =

     (DataTemplate)this.Resources["listLandscape"];

 lstData.ItemsSource = null;

 lstData.ItemsSource = ((Products)this.Resources["productCollection"]).DataCollection;
0
votes

Unfortunately, I don't think this is going to work. The ItemTemplate is applied when an item is added to the ListBox. You can test this out with the following snippet and your own separate templates:

// Constructor
public MainPage()
{
    InitializeComponent();
    Loaded += (sender, e) =>
    {
        DispatcherTimer t = new DispatcherTimer();
        t.Interval = TimeSpan.FromSeconds(5);
        t.Tick += (sender2, e2) =>
        {
            MyListBox.Items.Add(this.Orientation.ToString());
        };
        t.Start();
    };
}

The effect is interesting. In my sample, the following output was written to the list box as I rotated the emulator:

THIS IS THE PORTRAIT TEMPLATE: PortraitUp
THIS IS THE LANDSCAPE TEMPLATE: LandscapeLeft 
THIS IS THE LANDSCAPE TEMPLATE: LandscapeRight 
THIS IS THE LANDSCAPE TEMPLATE: LandscapeLeft 
THIS IS THE PORTRAIT TEMPLATE: PortraitUp

An alternative approach that has worked for me in the past is to use two completely different layout managers - one optimized for portrait layout, the other optimized for landscape - and toggle the visibility/opacity of each based on the changes to orientation. I've used this technique in the past and it provides nice Blendability and decent performance (if your page isn't too overly complex). I'm still struggling for a "best" approach, but at least I know this one works.

/chris