Radial Menu Overflow in Grid Height

[Daiki]

Hi All,  

Issue 1:
           I have used Rad Menu inside grid with scroll enabled , upon binding the datasource to grid the radial menu display all rows (not fit scroller) Please find the attached image (Menu1.png).

Issue 2:
           If we open the radial menu in grid ,the next row Radial Menu also getting displayed . Please find the attached image (menu2.png)

[Vladislav]

Hi Thierry,

Thank you for contacting us.
We are not aware of such issue and we were not able to reproduce the described issue.
Can you please check the attached project, which represents my attempt to reproduce it?
Feel free to modify it as needed in order to reveal the problems.
Or you can send us your project in order to investigate it locally.

Thank you in advance.

Regards,
Vladislav
Telerik

 

 

[Daiki]

Thanks Vladislav, 
                             Please find the sample app xaml page, this page has been reproduce what i have facing with radial menu. 

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="App1.BasicPage1"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:common="using:App1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
     xmlns:Input="using:Telerik.UI.Xaml.Controls.Input"
    xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:telerikRadialMenu ="using:Telerik.UI.Xaml.Controls.Primitives.Menu"    >

    <Grid Background="Gray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="400" />
        </Grid.RowDefinitions>

        <ListView Name="lv1" Grid.Row="0" Grid.Column="0" Margin="100,100,0,0">
            
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="Width" Value="150" />
                                <Setter Property="TextAlignment" Value="Left" />
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock Width="50" Text="{Binding ID_P}" />
                        <TextBlock Text="{Binding FirstName}" />
                        <TextBlock Text="{Binding LastName}" />
                        <TextBlock Text="{Binding Address}" />
                        <TextBlock Text="{Binding City}" />
                        <Popup IsOpen="True" >
                            <telerikPrimitives:RadRadialMenu  
                                Loaded="RadRadialMenu_Loaded"
                                LostFocus="RadRadialMenu_LostFocus"
                                                            Margin="-120,-120,0,0"
                                                            FontSize="18" 
                                                            IsEnabled="True" 
                                                            IsOpen="False" RequestedTheme="Default"  StartAngle="{Binding MenuStartAngle}"
                                                            VerticalAlignment="Center" HorizontalAlignment="Center" InnerNavigationRadiusFactor="0.9" InnerRadiusFactor="0.35" >
                            </telerikPrimitives:RadRadialMenu>
                        </Popup>
                    </StackPanel>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</common:LayoutAwarePage>





private async void InitData()
        {
            var result = await conn.CreateTablesAsync<Persons, Orders>();

            List<Persons> persons = new List<Persons>()
            {
                new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},
                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},
                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"}
            };

         
            await conn.InsertAllAsync(persons);
            
            var qu1 = conn.Table<Persons>();
            re1 = await qu1.ToListAsync();
            this.lv1.ItemsSource = re1;
           
        }
   public class Persons
    {
        [SQLite.AutoIncrement, SQLite.PrimaryKey]
        public int ID_P { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
       // public string Country { get; set; }
    }

[Vladislav]

Hello Thierry,

Thank you for the sample code snippet provided. It clearly helped us to observe the described issue.

Based on it and on the original issues reported, we created a new sample solution, which should be closer to your requirements. Can you please check it and let us know if this is indeed true?
There we are using quite a different approach - we are creating the RadRadialMenu as a context menu on a button located in the ItemTemplate of the ListView.

If this behavior is not the desired/expected one, can you please describe in more details what you want to achieve? I.e. what is the desired behavior/layout of your project?

Thank you in advance.

Regards,
Vladislav
Telerik

 

 

[Daiki]

Thanks for reply, 
                          Please find the code snippet for both xaml and class file.

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="App1.BasicPage1"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:common="using:App1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
     xmlns:Input="using:Telerik.UI.Xaml.Controls.Input"
    xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:telerikRadialMenu ="using:Telerik.UI.Xaml.Controls.Primitives.Menu"    >

    <Grid Background="Gray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="400" />
        </Grid.RowDefinitions>

        <ListView Name="lv1" Grid.Row="0" Grid.Column="0" Margin="100,100,0,0">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <StackPanel.Resources>
                            <Style TargetType="TextBlock">
                                <Setter Property="Width" Value="150" />
                                <Setter Property="TextAlignment" Value="Left" />
                            </Style>
                        </StackPanel.Resources>
                        <TextBlock Width="50" Text="{Binding ID_P}" />
                        <TextBlock Text="{Binding FirstName}" />
                        <TextBlock Text="{Binding LastName}" />
                        <StackPanel  Orientation="Horizontal">
                            <Popup IsOpen="True" >
                                <telerikPrimitives:RadRadialMenu Name="RadRadialMenu" 
                                Loaded="RadRadialMenu_Loaded"
                                LostFocus="RadRadialMenu_LostFocus"
                                                            Margin="-120,-120,0,0"
                                                            FontSize="18" 
                                                            IsOpen="False" RequestedTheme="Default"  StartAngle="{Binding MenuStartAngle}"
                                                            VerticalAlignment="Center" HorizontalAlignment="Center" InnerNavigationRadiusFactor="0.9" InnerRadiusFactor="0.35" >
                                </telerikPrimitives:RadRadialMenu>
                            </Popup>

                            <TextBlock    Text="{Binding RadialMenuText, Mode=TwoWay}"
                                                                    VerticalAlignment="Stretch" TextAlignment="Center" Margin="50,0,0,0"
                                                            Visibility="{Binding IsNeedToUpdate}"/>
                            <TextBlock  Text="{Binding TrackedTireStatusId, Mode=TwoWay}" FontSize="1" Visibility="Collapsed" 
                                                                    VerticalAlignment="Stretch" TextAlignment="Center"/>
                            <ComboBox HorizontalAlignment="Left"  Visibility="Collapsed"
                                                      VerticalAlignment="Top"
                                                      Width="60" 
                                                      Margin="10,0,0,0" >
                                <ComboBoxItem  Name="cbi1">Item1</ComboBoxItem>
                                <ComboBoxItem  Name="cbi2">Item2</ComboBoxItem>
                                <ComboBoxItem  Name="cbi3">Item3</ComboBoxItem>
                                <ComboBoxItem  Name="cbi4">Item4</ComboBoxItem>
                                <ComboBoxItem  Name="cbi5">Item5</ComboBoxItem>
                                <ComboBoxItem  Name="cbi6">Item6</ComboBoxItem>
                            </ComboBox>
                        </StackPanel>
                        <CheckBox HorizontalAlignment="Left" VerticalAlignment="Top"   Margin="100,0,0,0"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</common:LayoutAwarePage>   
----
.CS FILE

namespace App1
{

    public sealed partial class BasicPage1 : App1.Common.LayoutAwarePage
    {
        public BasicPage1()
        {
            this.InitializeComponent();
            InitData();
        }

        private async void InitData()
        {
           List<Persons> persons = new List<Persons>()
            {
                new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},
                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},
                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"},
                  new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},
                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},
                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"},
                  new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},
                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},
                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"},
                  new Persons(){FirstName="Adams",LastName="John",Address="Oxford Street",City="London"},
                new Persons(){FirstName="Bush",LastName="George",Address="Fifth Avenue",City="New York"},
                new Persons(){FirstName="Carter",LastName="Thomas",Address="Changan Street",City="Beijing"}
            };

            this.lv1.ItemsSource = persons;
        }

        private void RadRadialMenu_Loaded(object sender, RoutedEventArgs e)
        {
            var menu = sender as RadRadialMenu;
            var command = new CustomItemTireInspectionCommand(menu);


            var rotateMenuItem = new RadialMenuItem() { Header = "Rotate", Command = command, CommandParameter = "ROTATE", Selectable = false };
            var demountMenuItem = new RadialMenuItem() { Header = "Demount", Command = command, CommandParameter = "DEMOUNT", Selectable = false };
            var inStockMenuItem = new RadialMenuItem() { Header = "InStock", Command = command, CommandParameter = "InStock", Selectable = false };
            var waitingRepairMenuItem = new RadialMenuItem() { Header = "Repair", Command = command, CommandParameter = "WaitingRepair", Selectable = false };
            var waitingRegroovingMenuItem = new RadialMenuItem() { Header = "Regroove", Command = command, CommandParameter = "WaitingRegrooving", Selectable = false };
            var atRetreadShopMenuItem = new RadialMenuItem() { Header = "Retread", Command = command, CommandParameter = "AtRetreadShop", Selectable = false };
            var pendingDecisionMenuItem = new RadialMenuItem() { Header = "Pending", Command = command, CommandParameter = "PendingDecision", Selectable = false };
            var scrappedMenuItem = new RadialMenuItem() { Header = "Scrapped", Command = command, CommandParameter = "Scrapped", Selectable = false };

            demountMenuItem.ChildItems.Add(inStockMenuItem);
            demountMenuItem.ChildItems.Add(waitingRepairMenuItem);
            demountMenuItem.ChildItems.Add(waitingRegroovingMenuItem);
            demountMenuItem.ChildItems.Add(atRetreadShopMenuItem);
            demountMenuItem.ChildItems.Add(pendingDecisionMenuItem);
            demountMenuItem.ChildItems.Add(scrappedMenuItem);

            menu.Items.Add(rotateMenuItem);
            menu.Items.Add(demountMenuItem);
        }

        private void RadRadialMenu_LostFocus(object sender, RoutedEventArgs e)
        {
            var menu = sender as RadRadialMenu;
            menu.IsOpen = false;
        }


        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
        }

        protected override void SaveState(Dictionary<String, Object> pageState)
        {
        }
    }

    public class CustomItemTireInspectionCommand : ICommand
    {
        public RadRadialMenu owner;
        public CustomItemTireInspectionCommand(RadRadialMenu owner)
        {
            this.owner = owner;
        }
        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {
            var context = parameter as RadialMenuItemContext;
            var commandParameter = context.CommandParameter;
            StackPanel container = ((Popup)owner.Parent).Parent as StackPanel;

            if (commandParameter.ToString().ToUpper() == "DEMOUNT")
            {
                this.owner.CommandService.ExecuteDefaultCommand(CommandId.NavigateToView, new NavigateContext(context.MenuItem));
                return;
            }
            else
            {
                if (commandParameter.ToString().ToUpper() != "ROTATE")
                {
                    TrackedTireStatus status = (TrackedTireStatus)Enum.Parse(typeof(TrackedTireStatus), commandParameter.ToString());
                    var textBlockString = container.Children[1] as TextBlock;
                    var textBlockId = container.Children[2] as TextBlock;
                    var combobox = container.Children[3] as ComboBox;

                    textBlockString.Text = status.ToString();
                    textBlockId.Text = ((int)status).ToString();
                    combobox.Visibility = Visibility.Collapsed;
                }
                else
                {
                    var textBlockString = container.Children[1] as TextBlock;
                    var combobox = container.Children[3] as ComboBox;
                    textBlockString.Text = "ROTATETO";
                    combobox.Visibility = Visibility.Visible;

                }
            }

            this.owner.IsOpen = false;
        }

        void target_LostFocus(object sender, RoutedEventArgs e)
        {
            throw new NotImplementedException();
        }

        public event EventHandler CanExecuteChanged;
    }

    public class CustomTriggerBehavior : RadialMenuTriggerBehavior
    {
        public CustomTriggerBehavior()
        {
            this.AttachTriggers = RadialMenuAttachTriggers.None;
        }

        protected override void SubscribeToTargetEvents(FrameworkElement element)
        {
            base.SubscribeToTargetEvents(element);

            var image = element as Image;
            image.PointerPressed += image_PointerPressed;
            image.LostFocus += image_LostFocus;
            image.PointerExited += image_PointerExited;
        }

        void image_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            this.DetachFromTargetElement();
        }

        void image_LostFocus(object sender, RoutedEventArgs e)
        {
            this.DetachFromTargetElement();
        }

        void image_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            this.AttachToTargetElement();
        }

        protected override void UnsubscribeFromTargetEvents(FrameworkElement element)
        {
            var image = element as Image;
            image.PointerPressed -= image_PointerPressed;
            image.LostFocus -= image_LostFocus;

            base.UnsubscribeFromTargetEvents(element);
        }
    }

    public enum TrackedTireStatus
    {
        InStock = 0,
        AtRetreadShop = 1,
        OnVehicle = 2,
        Scrapped = 3,
        WaitingRepair = 4,
        WaitingRegrooving = 5,
        PendingDecision = 6
    }
}  


Note : By default RadRadialMenu IsEnabled=false. In listviewcheckbox is checked then only RadRadialMenu enabled. The above code snippet is exactly what i have facing issue. 

[Vladislav]

Hi Thierry,

Your original issues are caused of the way that you use the RadRadialMenu control (within Popup).

Can you please check the attached project demonstrating an alternative approach to achieving the desired layout, where the Popup is replaced with a simple button (that can be styled additionally).In addition I have added the logic for the IsEnabled property bound to the checkbox inside the listview.

Please have a look at the updated sample and let us know if this works for you.

Regards,
Vladislav
Telerik