This is a migrated thread and some comments may be shown as answers.

some questions and found glitches

5 Answers 120 Views
Panorama
This is a migrated thread and some comments may be shown as answers.
Froggie
Top achievements
Rank 1
Froggie asked on 14 Dec 2012, 09:29 AM
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();
        }
    }

5 Answers, 1 is accepted

Sort by
0
Ivan Todorov
Telerik team
answered on 18 Dec 2012, 02:32 PM
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
Q3’12 of RadControls for WinForms is available for download (see what's new). Get it today.
0
Mehdi
Top achievements
Rank 1
answered on 15 Jun 2015, 02:55 PM

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 ...

0
Hristo
Telerik team
answered on 16 Jun 2015, 09:40 AM
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
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
0
Mehdi
Top achievements
Rank 1
answered on 17 Jun 2015, 07:28 AM

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

0
Hristo
Telerik team
answered on 18 Jun 2015, 02:50 PM
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
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
Tags
Panorama
Asked by
Froggie
Top achievements
Rank 1
Answers by
Ivan Todorov
Telerik team
Mehdi
Top achievements
Rank 1
Hristo
Telerik team
Share this question
or