Minimized panel orientation / TileViewPanel template

9 posts, 1 answers
  1. Victor
    Victor avatar
    3 posts
    Member since:
    Jul 2017

    Posted 17 Jul Link to this post

    Hi,

    I am trying to set the orientation of the minimized items in the bottom panel, so instead of being horizontally oriented I want them to be vertically oriented.

    (see attached PNG file)

     

    I though that the best approach would be to edit a copy of the TileViewPanel template/style and change it but I am unable to create a copy of it neither using Blend nor Visual Studio. 

     

    So, is there any easy way to set the orientation of the minimized panel? If not, could you please provide me with a copy of the TileViewPanel template?

     

    Thanks in advance.

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1402 posts

    Posted 19 Jul Link to this post

    Hello Victor,

    The panel that holds the minimized items behaves a bit as a wrap panel. It arranges its children from left to right, breaking the content to the next when reaching its right edge. The panel allows you to define number of rows or columns which should be satisfied when arranging the minimized items.

    In your case you can use the MinimizedRowsCount property. You can set it to the number of minimized items. For example:
    this.tileView.MinimizedRowsCount = this.tileView.Items.Count - 1;   ((INotifyCollectionChanged)this.tileView.Items).CollectionChanged += MainWindow_CollectionChanged;

    private void MainWindow_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {           
        var collection = (ICollection)sender;
        this.tileView.MinimizedRowsCount = collection.Count - 1;
    }

    Regards,
    Martin Ivanov
    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.
  3. Victor
    Victor avatar
    3 posts
    Member since:
    Jul 2017

    Posted 19 Jul in reply to Martin Ivanov Link to this post

    Hi Martin, 

    First of all, thanks for your response.

    When was this property added to the RadTileView control? It doesn't seems to exist in the version  of the dll's we are using.

    Is there any other way of doing this? 

    I am able to access a property called MinimizedColumnWidthProperty and I can set it to the width of the TileView, but the panel doesn't wrap the content. Is there any way I can access the "minimized wrap panel" and set its properties/behaviour?

    Thanks once again.

  4. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    1402 posts

    Posted 24 Jul Link to this post

    Hello Victor,

    The minimized row/column count properties are available since R1 2017

    To achieve the desired behavior in a previous version you will need to create a custom panel that derives from TileViewPanel and set it to the ItemsPanel panel property of the control. However, using this approach you should write the panel's logic almost from scratch. This is why I would recommend you to update to the latest version of UI for WPF and try the built-in feature.

    Regards,
    Martin Ivanov
    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.
  5. Victor
    Victor avatar
    3 posts
    Member since:
    Jul 2017

    Posted 24 Jul in reply to Martin Ivanov Link to this post

    OK,

    Thanks a lot for your help, Martin.

    Regards

  6. Koushik
    Koushik avatar
    2 posts
    Member since:
    Aug 2017

    Posted 22 Aug in reply to Martin Ivanov Link to this post

    Thanks Martin for the help. I have a related question for the controls that Victor has developed. We are facing difficulties in automating the controls derived from RadTileView & RadTileViewItem using CUIT (Code UI). The solution that I thought of is coming up with AutomationPeers inheriting from RadTileViewAutomationPeer & RadTileViewItemAutomationPeer. I am only overriding GetChildrenCore method. For RadTileViewItem, I am seeing the constructor has a signature: public RadTileViewItemAutomationPeer(object owner, ItemsControlAutomationPeer peer). I am not sure what needs to be passed as ItemsControlAutomationPeer when newing up the custom automation peer inheriting from RadTileViewItemAutomationPeer. Could you please help? An example would be great.
  7. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1402 posts

    Posted 25 Aug Link to this post

    Hello Koushik,

    The constructor expects an Item of type ItemsControlAutomationPeer. This is the automation peer of the parent items control. For example, when you call the RadTileViewItemAutomationPeer constructor, the second argument should be an instance of type RadTileViewAutomationPeer. For example:
    var itemPeer = new RadTileViewItemAutomationPeer(tileViewItem, tileViewAutomationPeerInstace);

    Regards,
    Martin Ivanov
    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.
  8. Koushik
    Koushik avatar
    2 posts
    Member since:
    Aug 2017

    Posted 29 Aug in reply to Martin Ivanov Link to this post

    Thanks again Martin for getting back. I am doing the same already – however I don’t know how to pass the instance of the parent items control automation peer correctly. Our control hierarchy is like this –
    MyTileView: RadTileView
    MyTileViewItem: RadTileViewItem
    MyTileView’s ItemSource is an observable collection (Windows property) of MyTileViewItem. I am getting “Recursive call to Automation Peer API is not valid” – which is logical since from MyTileViewAutomationPeer’s GetChildrenCore we are trying to create peers for each of the MyTileViewItem and subsequently from OnCreateAutomationPeer of MyTileViewItem I am passing a new Instance of parent’s MyTileViewAutomationPeer. Please refer to the attached files to see how I am passing the ItemsControlAutomationPeer.
    I am doing something incorrect. Please let me know where I am doing the mistake.

    Attached are the snapshots of peer implementation.

  9. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1402 posts

    Posted 01 Sep Link to this post

    Hello Victor,

    Thank you for the provided information.

    It seems that the error appears because the tileview item peer is created two times - in the GetChildrenCore of the tileview peer and in the OnCreateAutomationPeer() of the tileview item. Instead I could suggest you remove both overrides and create the peer in the CreateItemAutomationPeer() override of RadTileViewAutomationPeer. Here is an example in code:
    public class MyTileViewAutomationPeer : RadTileViewAutomationPeer
    {
        public MyTileViewAutomationPeer(RadTileView owner) : base(owner)
        {
        }
     
        protected override ItemAutomationPeer CreateItemAutomationPeer(object item)
        {
            return new MyTileViewItemAutomationPeer(item, this);
        }
    }

    public class MyTileViewItemAutomationPeer : RadTileViewItemAutomationPeer
    {
        public MyTileViewItemAutomationPeer(object owner, ItemsControlAutomationPeer peer) : base(owner, peer)
        {           
        }
     
        protected override List<AutomationPeer> GetChildrenCore()
        {
            var childrenAutomationPeer = new List<AutomationPeer>();
            var owner = Item as MyTileViewItem;
            if (owner != null)
            {
                foreach (Button button in owner.Toolbar)
                {
                    var peer = UIElementAutomationPeer.CreatePeerForElement(button);                   
                    if (peer != null)
                    {
                        childrenAutomationPeer.Add(peer);
                    }
                }
            }
            return childrenAutomationPeer;
        }
    }

    Regards,
    Martin Ivanov
    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.
Back to Top