Giant Context menu in portrait page

[Jonathan]

Hi,

I have a page that supports PortraitOrLandscape.  I've been using the RadContextMenu for context menus in a ListBox (with a RadWrapGridPanel).  Since upgrading to 2012.2.607.2040, my context menus come up super-sized in Portrait mode.  It appears to be the one that's supposed to be used for Landscape based on its size and the fact that it doesn't "gray" out the whole screen.  This prompted me to try it in Landscape in which case it's big but seems appropriate.  When I rotate back to Portrait, the menu now works as expected--it comes up with the thin strip based on the number of items and grays out the entire screen (except for the contextual item of course).

Attached please find three images:  

1. RadGiantContextMenu1.png shows how it comes up in Portrait mode initially.  
2. RadGiantContextMenu2.png shows how it comes up after rotating to Landscape. 
3. RadGiantContextMenu3.png shows how it comes up when back in Portrait mode after having brought it up in Landscape mode first.

The images were captured on the emulator but the functionality was originally discovered on the phone and, so, seems to be consistent.

Thanks
-Jonathan

[Victor]

Hello Jonathan,

 Thank your for reporting this.
I am afraid that I could not reproduce this behavior however. Is it possible for you to send a minimalistic app that demonstrates this behavior?

I tested with the following application and could not reproduce the issue (the version with which I tested was Q2 2012).
XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <ListBox x:Name="lb">
        <telerikPrimitives:RadContextMenu.ContextMenu>
            <telerikPrimitives:RadContextMenu>
                <telerikPrimitives:RadContextMenuItem Content="Item 1"/>
                <telerikPrimitives:RadContextMenuItem Content="Item 2"/>
                <telerikPrimitives:RadContextMenuItem Content="Item 3"/>
            </telerikPrimitives:RadContextMenu>
        </telerikPrimitives:RadContextMenu.ContextMenu>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"
                           Foreground="Black"
                           Margin="12"/>
            </DataTemplate>
        </ListBox.ItemTemplate>

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <telerikPrimitives:RadWrapPanel/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

C#:

public MainPage()
{
    InitializeComponent();

    RadContextMenu.SetFocusedElementType(this.lb, typeof(ListBoxItem));
    int[] data = new int[] { 1,2,3,4,5,6,7,8,9,10 };
    this.lb.ItemsSource = data;
}

I am looking forward to your reply.

All the best,
Victor
the Telerik team

[Jonathan]

Hi, Victor.

Sorry about that.  At the very least, I probably should've mentioned I'm using RadCustomHubTiles and RadWrapPanel but here's my content from the only control on that page (besides an ad control).

<Grid x:Name="LayoutRoot">
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <ListBox ItemsSource="{Binding Items}"
            VerticalAlignment="Center">
      <ListBox.ItemsPanel>
         <ItemsPanelTemplate>
            <Controls1:RadWrapPanel IsAnimated="True"
                                      HorizontalAlignment="Center"/>
         </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
      <ListBox.ItemTemplate>
         <DataTemplate>
            <Controls1:RadCustomHubTile BackContent="{Binding BackContent}"
                                        UpdateInterval="{Binding TileFlipInterval}"
                                        IsFrozen="{Binding IsFrozen}"
                                        Command="{Binding OpenToolCommand}">
               <Controls1:RadCustomHubTile.FrontContent>
                  <Grid Background="{StaticResource PhoneAccentBrush}">
                     <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
                     <Image Grid.RowSpan="2"
                            Source="{Binding Icon}" />
                     <TextBlock Grid.Row="1"
                                Text="{Binding Label}"
                                TextWrapping="Wrap"
                                HorizontalAlignment="Center"
                                FontSize="24"
                                Foreground="White"
                                Style="{StaticResource PhoneTextTitle2Style}"
                                Margin="0" />
                  </Grid>
               </Controls1:RadCustomHubTile.FrontContent>
               <Controls1:RadContextMenu.ContextMenu>
                  <Controls1:RadContextMenu>
                     <Controls1:RadContextMenuItem Content="{Binding Path=LocalizedResources.Start_PinMenuItem_Content, Source={StaticResource LocalizedStrings}}"
                                                   Command="{Binding PinCommand}" />
                     <Controls1:RadContextMenuItem Content="{Binding LockCommandDescription}"
                                                   Command="{Binding LockCommand}" />
                  </Controls1:RadContextMenu>
               </Controls1:RadContextMenu.ContextMenu>
               <Controls:GestureService.GestureListener>
                  <Controls:GestureListener Flick="OnFlick" PinchStarted="OnPinch" />
               </Controls:GestureService.GestureListener>
            </Controls1:RadCustomHubTile>
         </DataTemplate>
      </ListBox.ItemTemplate>
   </ListBox>
   <TextBlock Grid.Row="1"
              Text="{Binding Path=LocalizedResources.Start_MenuInstructions_Content, Source={StaticResource LocalizedStrings}}"
              Style="{StaticResource PhoneTextSubtleStyle}"
              TextWrapping="Wrap"
              HorizontalAlignment="Center" />
</Grid>

[Victor]

Hello Jonathan,

Thanks very much for the sample XAML. The menu still looks sane though. I have attached a sample app that uses your XAML albeit slightly modified. Can you please tweak it so that it breaks the menu and send it back so that I may debug it?
I am looking forward to your reply.

All the best,
Victor
the Telerik team

[Jonathan]

Thanks, Victor.

It took a bit of guess work but the culprit seems to be the addition of this line in the page which was not in my original sample:

                            Orientation="{Binding CurrentOrientation, Mode=TwoWay}"

I'm attaching a new sample.  I also added a more formal model so I could add such a property so there wouldn't be a binding error for this property so it would behave more like my app and we could eliminate it as being new behavior due to the binding error.  Before you ask, it appears that my CurrentOrientation property goes unintialized by default and so is probably initially PageOrientation.None which might explain why rotating to landscape and back fixes it.  I believe I did this deliberately so that the app would not come up one way and then rotate when it is launched in Landscape mode.

Thanks
-Jonathan

New MainPage.xaml 

<phone:PhoneApplicationPage

    x:Class="PhoneApp5.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    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"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    xmlns:Controls1="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="PortraitOrLandscape"

Orientation="{Binding CurrentOrientation, Mode=TwoWay}" <=========
      shell:SystemTray.IsVisible="True">


 

    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="*" />

            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>

        <ListBox ItemsSource="{Binding Items}"

            VerticalAlignment="Center">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <Controls1:RadWrapPanel IsAnimated="True"

                                      HorizontalAlignment="Center"/>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <Controls1:RadCustomHubTile BackContent="ASDF"

                                        UpdateInterval="{Binding TileFlipInterval}"

                                        IsFrozen="True"

                                        Command="{Binding OpenToolCommand}">

                        <Controls1:RadCustomHubTile.FrontContent>

                            <Grid Background="{StaticResource PhoneAccentBrush}">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="*" />

                                    <RowDefinition Height="Auto" />

                                </Grid.RowDefinitions>

                                <Image Grid.RowSpan="2"

                            Source="{Binding Icon}" />

                                <TextBlock Grid.Row="1"

                                Text="ASDF"

                                TextWrapping="Wrap"

                                HorizontalAlignment="Center"

                                FontSize="24"

                                Foreground="White"

                                Margin="0" />

                            </Grid>

                        </Controls1:RadCustomHubTile.FrontContent>

                        <Controls1:RadContextMenu.ContextMenu>

                            <Controls1:RadContextMenu>

                                <Controls1:RadContextMenuItem Content="asdf"

                                                   Command="{Binding PinCommand}" />

                                <Controls1:RadContextMenuItem Content="{Binding LockCommandDescription}"

                                                   Command="{Binding LockCommand}" />

                            </Controls1:RadContextMenu>

                        </Controls1:RadContextMenu.ContextMenu>

                        <!--<Controls:GestureService.GestureListener>

                            <Controls:GestureListener Flick="OnFlick" PinchStarted="OnPinch" />

                        </Controls:GestureService.GestureListener>-->

                    </Controls1:RadCustomHubTile>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

        <TextBlock Grid.Row="1"

              Text="asdf"

              Style="{StaticResource PhoneTextSubtleStyle}"

              TextWrapping="Wrap"

              HorizontalAlignment="Center" />

    </Grid>

</phone:PhoneApplicationPage>

New MainPage.xaml.cs:

namespace PhoneApp5
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

           this.DataContext = new Model();
        }
    }

   public class Model
   {
      public PageOrientation CurrentOrientation { get; set; }
      public int[] Items { get; set; }

      public Model()
      {
         Items = new[] {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
      }
   }

[Jonathan]

Victor,

I changed from using binding for determining the current orientation to using OnOrientationChanged. Now the menu comes up correctly initially.

Thank you
-Jonathan

[Victor]

Hello Jonathan,

Thank you very much for the information.
It appears the initial issue is caused by the fact that RadContextMenu does not handle the None (as you mentioned) value of PageOrientation. But on the other hand, when the page orientation is None what should the menu do? Maybe it should just arrange itself as though it is in portrait mode? In my opinion a value of None for PageOrientation makes no sense, it is never none since the phone is always in one of the landscape or portrait modes. If we handle the None value like Portrait the menu will display incorrectly if your app is started while the phone is in Landscape mode. The opposite case has the same problem. What do you think?

Regards,
Victor
the Telerik team