some questions and found glitches

[Froggie]

I've created a simple test application to test the RadPanorama.
My questions:

1. Is there a way to say "This is the selected tile and this is the visual feedback for it"?
2. How do I know which is the parent group of a tile?
3. When rearranging the tiles via Drag&Drop there are always "gaps" in the layout. Is there a way to automatically "close" those gaps?

My found glitsches (see image):

1. When using a RoundRectShape(12) and setting the Image of a tile, the image is drawn outside of the tile. I've also tested this with BackgroundImage instead of Image.
2. When resizing the control, the scrollbar is going behind the tiles and there is no way to click the scrollbar.

For the sake of completeness, my source code:

//rama is the RadPanoramaControl

 

public class CustomItem

    {

        public string Group { get; set; }

        public Color Back { get; set; }

        public string Name { get; set; }

        public int Index { get; set; }

 

        public Image Picture { get; set; }

    }

 

public partial class Form1 : Form

    {

        private const int COUNT = 30;

        private List<CustomItem> ItemList = new List<CustomItem>();

 

        public Form1()

        {

            InitializeComponent();

 

            fillList();

        }

 

        private void fillList()

        {

            for (int i = 0; i < COUNT; i++)

            {

                using (Image image = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\JellyFish.jpg"))

                {

                    Image thumb = image.GetThumbnailImage(120, 120, () => false, IntPtr.Zero);

                    ItemList.Add(new CustomItem

                    {

                        Group = "Group 1",

                        Back = Color.BlanchedAlmond,

                        Name = "1-Item " + i,

                        Index = i,

                        Picture = thumb

                    });

                }

            }

 

            for (int i = 0; i < COUNT * 2; i++)

            {

                using (Image image = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"))

                {

                    Image thumb = image.GetThumbnailImage(120, 120, () => false, IntPtr.Zero);

                    ItemList.Add(new CustomItem

                    {

                        Group = "Group 2",

                        Back = Color.LightSkyBlue,

                        Name = "2-Item " + i,

                        Index = i,

                        Picture = thumb

                    });

                }

            }

 

            for (int i = 0; i < COUNT; i++)

            {

                ItemList.Add(new CustomItem

                {

                    Group = "Group 3 has the looooooooooongest Name I've ever seen" + Environment.NewLine + " and even a second line",

                    Back = Color.LimeGreen,

                    Name = "3-Item " + i,

                    Index = i

                });

            }

 

            for (int i = 0; i < COUNT; i++)

            {

                using (Image image = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"))

                {

                    Image thumb = image.GetThumbnailImage(120, 120, () => false, IntPtr.Zero);

                    ItemList.Add(new CustomItem

                    {

                        Group = "Group 4",

                        Back = Color.LimeGreen,

                        Name = "4-Item " + i,

                        Index = i,

                        Picture = thumb

                    });

                }

            }

        }

 

        private void fillControl()

        {

            var groups = (from x in ItemList

                          select x.Group).Distinct();

 

            foreach (var groupKey in groups)

            {

                int rowcount = groupKey == "Group 4" ? 5 : 3;

 

                rama.Groups.Add(new TileGroupElement { Name = groupKey, Text = groupKey, RowsCount = rowcount });

            }

 

            foreach (var curViewItem in ItemList)

            {

                if (curViewItem.Index % 2 == 0)

                {

                    Image thumb1;

                    Image thumb2;

                    using (Image image = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"))

                    {

                        thumb1 = image.GetThumbnailImage(120, 120, () => false, IntPtr.Zero);

                    }

                    using (Image image = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"))

                    {

                        thumb2 = image.GetThumbnailImage(120, 120, () => false, IntPtr.Zero);

                    }

 

                    var liveTile = new RadLiveTileElement

                        {

                            //Text = curViewItem.Name,

                            BackColor = curViewItem.Back,

                            NumberOfColors = 1,

                            ColSpan = 1,

                            ForeColor = Color.CadetBlue,

                            Shape= new RoundRectShape(12)

                            //Image = curViewItem.Picture,

                            //ImageLayout = ImageLayout.Zoom,

                            //TextImageRelation = TextImageRelation.ImageAboveText

                        };

 

                    liveTile.Items.Add(new LightVisualElement

                                           {

                                               Text = "Movie Idea: Pirates of the Carribean",

                                               Image = thumb1,

                                               ImageLayout = ImageLayout.Zoom

                                           });

                    liveTile.Items.Add(new LightVisualElement

                                           {

                                               //Text = "Movie Idea: Inception",

                                               Image = thumb2,

                                               ImageLayout = ImageLayout.Zoom

                                           });

                    liveTile.Items.Add(new LightVisualElement

                                           {

                                               Text = "Movie Idea: The Expendables"

                                           });

                    liveTile.Items.Add(new LightVisualElement

                                           {

                                               Text = "Movie Idea: Harry Potter and the Deathly Hallows"

                                           });

 

                    liveTile.AnimationFrames = 60; //sets the number of frames in a transition

                    liveTile.AnimationInterval = 20; //sets the interval between each frame in the transition in miliseconds

                    liveTile.ContentChangeInterval = 6000; //sets the interval between each content change

                    liveTile.TransitionType = ContentTransitionType.SlideLeft; //sets the type of the transition animation

 

                    ((TileGroupElement)rama.Groups[curViewItem.Group]).Items.Add(liveTile);

                }

                else

                {

                    ((TileGroupElement)rama.Groups[curViewItem.Group]).Items.Add(new RadTileElement

                    {

                        Text = curViewItem.Name,

                        BackColor = curViewItem.Back,

                        NumberOfColors = 1,

                        ColSpan = curViewItem.Index % 3 == 0 ? 2 : 1,

                        //BackgroundImage = curViewItem.Picture,

                        //BackgroundImageLayout=ImageLayout.Zoom,

                        Image = curViewItem.Picture,

                        ImageLayout = ImageLayout.Zoom,

                        TextImageRelation = TextImageRelation.ImageAboveText,

                        Shape = new RoundRectShape(12)

                    });

                }

            }

        }

 

        private void Form1_Load(object sender, EventArgs e)

        {

            rama.ShowGroups = true;

            rama.AllowDragDrop = true;

            rama.ScrollBarAlignment = HorizontalScrollAlignment.Bottom;



            fillControl();

        }

    }

[Ivan Todorov]

Hi Froggie,

Thank you for writing.

In regards to your questions:

1) Currently, RadPanorama does not support selection. However, you can easily implement a simple selection behavior:

// call RegisterTile for each added tile
//...

void rama_MouseDown(object sender, MouseEventArgs e)
{
    RadTileElement tile = rama.ElementTree.GetElementAtPoint(e.Location) as RadTileElement;
    this.behavior.SelectedTile = tile;
}

public class TileSelectionBehavior
{
    List<RadTileElement> tiles = new List<RadTileElement>();
    RadTileElement selectedTile;

    public RadTileElement SelectedTile
    {
        get
        {
            return this.selectedTile;
        }
        set
        {
            if(this.selectedTile != value)
            {
                this.selectedTile = value;
                UpdateSelectedTile();
            }
        }
    }

    public void RegisterTile(RadTileElement tile)
    {
        tiles.Add(tile);
    }

    private void UpdateSelectedTile()
    {
        foreach (RadTileElement tile in this.tiles)
        {
            if (tile == selectedTile)
            {
                tile.BackColor = Color.Yellow;
            }
            else
            {
                tile.ResetValue(RadTileElement.BackColorProperty, ValueResetFlags.Local);
            }
        }
    }
}

2) To determine the parent group of a tile, you can use the following method:

tile.FindAncestor<TileGroupElement>();

3) There is no way to auto rearrange the tiles so that the gaps are closed. It is also not clear how would such functionality behave since the tiles can have various ColSpan and RowSpan settings.

As to the issues reported:

1) Clipping with custom shape is not supported by our framework. Therefore, I would suggest applying a Padding to the tiles so that the images does not appear outside of the tile:

var liveTile = new RadLiveTileElement
{
    BackColor = curViewItem.Back,
    NumberOfColors = 1,
    ColSpan = 1,
    ForeColor = Color.CadetBlue,
    Shape = new RoundRectShape(12),
    Padding = new Padding(6)
};

Alternatively, you can edit your images with some image editing tool and make their corners rounded. This way the images will fit the tiles' shape.

I have logged this in our Public Issue Tracking System and we will address it in a future release. Here you can find the PITS item.

2) I can confirm this is an issue in RadPanorama. We will address this in the next official release. To overcome it, simply set:

this.rama.PanoramaElement.ScrollBar.ZIndex = 5;

Thank you for pointing out these issues. Your Telerik points have been updated. Should you have any other questions, do not hesitate to ask.

All the best,
Ivan Todorov
the Telerik team

[Mehdi]

Hi. 

i faild to line

this.behavior.SelectedTile = tile;

 

and Error :

Error 1 'TelerikWinFormsApp1.RadForm1' does not contain a definition for 'behavior' and no extension method 'behavior' accepting a first argument of type 'TelerikWinFormsApp1.RadForm1' could be found (are you missing a using directive or an assembly reference?)

 

thx ...

[Hristo]

Hello Mehdi,

Thank you for writing.

In order to use the selection behavior you are going to need a field for it and an instance to which you should refer in the handler of the MouseDown event. Please see my code snippet below: 

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    private TileSelectionBehavior behavior;

    public RadForm1()
    {
        InitializeComponent();

        this.radPanorama1.MouseDown += radPanorama1_MouseDown;
        this.behavior = new TileSelectionBehavior();
    }

    private void radPanorama1_MouseDown(object sender, MouseEventArgs e)
    {
        RadTileElement tile = this.radPanorama1.ElementTree.GetElementAtPoint(e.Location) as RadTileElement;
        this.behavior.SelectedTile = tile;
    }
}

public class TileSelectionBehavior
{
    List<RadTileElement> tiles = new List<RadTileElement>();
    RadTileElement selectedTile;

    public RadTileElement SelectedTile
    {
        get
        {
            return this.selectedTile;
        }
        set
        {
            if (value != null && this.selectedTile != value)
            {
                this.selectedTile = value;
                RegisterTile(value);
                UpdateSelectedTile();
            }
        }
    }

    public void RegisterTile(RadTileElement tile)
    {
        tiles.Add(tile);
    }

    private void UpdateSelectedTile()
    {
        foreach (RadTileElement tile in this.tiles)
        {
            if (tile == selectedTile)
            {
                tile.BackColor = Color.Yellow;
            }
            else
            {
                tile.ResetValue(RadTileElement.BackColorProperty, ValueResetFlags.Local);
            }
        }
    }
}

I hop this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

[Mehdi]

Hello Hristo Merdjanov

My problem was resolved
But another problem is
mouse down with a mouseclick problem and must be solved with a double click?

mouse click is the mouse down.
Excuse my English is not good
Thanks for your help

[Hristo]

Hi Mehdi,

Thank you for writing back.

If I understand correctly, you would like to perform the selection operation with a double instead of a single click. If that is the case you can subscribe you RadPanorama control to the MouseDoubleClick event and in the handler perform the same selection logic I sent you the previous time. Please check my modified example: 

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    private TileSelectionBehavior behavior;

    public RadForm1()
    {
        InitializeComponent();

        this.behavior = new TileSelectionBehavior();
        this.radPanorama1.MouseDoubleClick += radPanorama1_MouseDoubleClick;
    }

    private void radPanorama1_MouseDoubleClick(object sender, MouseEventArgs e)
    {
        RadTileElement tile = this.radPanorama1.ElementTree.GetElementAtPoint(e.Location) as RadTileElement;
        this.behavior.SelectedTile = tile;
    }
}

public class TileSelectionBehavior
{
    List<RadTileElement> tiles = new List<RadTileElement>();
    RadTileElement selectedTile;

    public RadTileElement SelectedTile
    {
        get
        {
            return this.selectedTile;
        }
        set
        {
            if (value != null && this.selectedTile != value)
            {
                this.selectedTile = value;
                RegisterTile(value);
                UpdateSelectedTile();
            }
        }
    }

    public void RegisterTile(RadTileElement tile)
    {
        tiles.Add(tile);
    }

    private void UpdateSelectedTile()
    {
        foreach (RadTileElement tile in this.tiles)
        {
            if (tile == selectedTile)
            {
                tile.BackColor = Color.Yellow;
            }
            else
            {
                tile.ResetValue(RadTileElement.BackColorProperty, ValueResetFlags.Local);
            }
        }
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik