some questions and found glitches

6 posts, 0 answers
  1. Froggie
    Froggie avatar
    29 posts
    Member since:
    Jan 2012

    Posted 14 Dec 2012 Link to this post

    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();
            }
        }

  2. Ivan Todorov
    Admin
    Ivan Todorov avatar
    688 posts

    Posted 18 Dec 2012 Link to this post

    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.
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Mehdi
    Mehdi avatar
    2 posts
    Member since:
    Jan 2015

    Posted 15 Jun 2015 in reply to Ivan Todorov Link to this post

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

  5. Hristo
    Admin
    Hristo avatar
    714 posts

    Posted 16 Jun 2015 Link to this post

    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
  6. Mehdi
    Mehdi avatar
    2 posts
    Member since:
    Jan 2015

    Posted 17 Jun 2015 in reply to Hristo Link to this post

    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

  7. Hristo
    Admin
    Hristo avatar
    714 posts

    Posted 18 Jun 2015 Link to this post

    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
Back to Top
UI for WinForms is Visual Studio 2017 Ready