How can I show RadialMenu over TileViewItem

6 posts, 0 answers
  1. MinSu
    MinSu avatar
    4 posts
    Member since:
    Feb 2016

    Posted 17 Feb 2016 Link to this post

    Hi~

    I want to show RadialMenu over TileViewItem.

    TileViewItem hide RadialMenu.

    Here is example code.

    <Window x:Class="TileView.MainWindow"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                    xmlns:tileView="clr-namespace:Telerik.Windows.Controls.TileView;assembly=Telerik.Windows.Controls.Navigation"
                    Title="MainWindow" Height="350" Width="525">

        <Window.Resources>
            <Style TargetType="telerik:RadTileView">
                <Setter Property="PreservePositionWhenMaximized" Value="True" />
                <Setter Property="telerik:TileViewPanel.IsVirtualized" Value="True" />
                <Setter Property="IsAutoScrollingEnabled" Value="True" />
                <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
                <Setter Property="MinimizedColumnWidth" Value="180" />
                <Setter Property="MinimizedRowHeight" Value="155" />
                <Setter Property="RowHeight" Value="250" />
                <Setter Property="ColumnWidth" Value="250" />
                <Setter Property="ColumnsCount" Value="3" />
            </Style>
            <Style TargetType="telerik:RadTileViewItem">
                <Setter Property="Background" Value="#eaeaea" />
            </Style>
            <DataTemplate x:Key="sizeTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Item" />
                    <TextBlock Text="{Binding}" />
                </StackPanel>
            </DataTemplate>
            <DataTemplate x:Key="contentTemplate">
                <StackPanel>
                    <telerik:RadRadialMenu Panel.ZIndex="99999">
                        <telerik:RadRadialMenuItem Header="Item 1" />
                        <telerik:RadRadialMenuItem Header="Item 2" />
                        <telerik:RadRadialMenuItem Header="Item 3" />
                    </telerik:RadRadialMenu>
                </StackPanel>
            </DataTemplate>
        </Window.Resources>
        
        <Grid>
           
            <telerik:RadTileView  ItemsSource="{Binding}" ItemTemplate="{StaticResource sizeTemplate}"
                                  ContentTemplate="{StaticResource contentTemplate}"  />
        </Grid>
    </Window>

    You can see capture file "Actual.png"

    I want to "Expect.png" screen.

    How?

  2. Yana
    Admin
    Yana avatar
    4604 posts

    Posted 18 Feb 2016 Link to this post

    Hello Minsu,

    It is not possible for RadialMenu to go over the TileViewItem as it's placed inside its Template.

    You could either set smaller size to RadialMenu in order to fit inside the TileView item when expanded as shown in the following snippet:

    <telerik:RadRadialMenu>
        <telerik:RadRadialMenu.Style>
            <Style TargetType="telerik:RadRadialMenu">
                <Setter Property="MinWidth" Value="190"/>
                <Setter Property="MinHeight" Value="190"/>
            </Style>
        </telerik:RadRadialMenu.Style>
        <telerik:RadRadialMenuItem Header="Item 1" />
        <telerik:RadRadialMenuItem Header="Item 2" />
        <telerik:RadRadialMenuItem Header="Item 3" />
    </telerik:RadRadialMenu>

    or recreate the layout, so that the whole RadialMenu is placed inside a popup, for example. The popup could be open from a button placed inside the TileViewItem.

    Hope this will be helpful.

    Regards,
    Yana
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. MinSu
    MinSu avatar
    4 posts
    Member since:
    Feb 2016

    Posted 18 Feb 2016 in reply to Yana Link to this post

    Thanks your help!

    I should use popup.

  4. Russell
    Russell avatar
    8 posts
    Member since:
    Sep 2016

    Posted 16 Oct in reply to Yana Link to this post

    So you are saying have a button which will open the menu in a popup? Is that not the point of this menu? To have a small button that appears over content?

     

    What can be done to get the z-index corrected with this control? It seems like such an amazing control but I cannot get it to appear above elements.

  5. Yana
    Admin
    Yana avatar
    4604 posts

    Posted 19 Oct Link to this post

    Hi Russell,

    RadRadialMenu control represents a circular menu which allows you to drill-down into different levels of items. However, its purpose is not to be specifically positioned over the content except in cases when it is used as ContextMenu.

    Could you give us more details on the exact requirement you have, so I could research what could be the possible ways to achieve it?

    Regards,
    Yana
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  6. Russell
    Russell avatar
    8 posts
    Member since:
    Sep 2016

    Posted 19 Oct in reply to Yana Link to this post

    Yana,

     

    Thank you for the link. After reading it I think I understand the purpose behind needing to do it this way.

     

    My requriement is really to have a context menu off of ListView items so the user can take action on an item with a cool looking menu as opposed to a simple right click boring context menu. I will give this tutorial a shot and if I have more questions I will holler. 

     

    Thanks again.

Back to Top