Best way to have dynamic width restored tiles with a MinimumWidth?

7 posts, 0 answers
  1. Louis
    Louis avatar
    83 posts
    Member since:
    Aug 2013

    Posted 01 Jul 2014 Link to this post

    I'm trying to find a way to get my tiles to dynamically size to the width of the panel (with ColumnsCount set by users) down to a minimum, then enable scrolling. 

    If ColumnWidth="*" it displays correctly with a small ColumnsCount:


    But with a large ColumnsCount it shrinks the tiles down below the minimum size of the contained control:



    If I set ColumnWidth="Auto" it displays correctly with a large ColumnsCount:


    But with a small ColumnsCount it displays them at their minimum size with a bunch of extra white space to the right:


    Is there a way to get it to resize down to a minimum then scroll?

    Thanks,
    Louis
  2. Louis
    Louis avatar
    83 posts
    Member since:
    Aug 2013

    Posted 01 Jul 2014 in reply to Louis Link to this post

    Apparently the forums just ignore screenshots pasted into the composition window even though they're displayed there while composing. So attached are the 4 screen shots matching to the 4 cases discussed above.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Milena
    Admin
    Milena avatar
    204 posts

    Posted 04 Jul 2014 Link to this post

    Hello Louis,

    As far as I understand you need to stop decreasing the column width (by bigger columns count) and  show the ScrollViewer. So, to achieve such behavior you can use: 
    - ScrollViewer.HorizontalScrollBarVisibilityProperty attached property of RadTileView to make the ScrollViewer visible;
    - and  ColumnWidth property of the RadTileView to fixed the size of the TileViewItems.

    For your convenience I implemented this approach in the attached project. As a condition I've used: ColumnsCount > 10, but of course you can implement a custom logic and calculate the actual width of the tileview and numbers of columns or something else. 

    I hope this example will give you an idea how to customize the RadTileView further. Don't hesitate to ask if you have any other questions.

    Regards,
    Milena
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Louis
    Louis avatar
    83 posts
    Member since:
    Aug 2013

    Posted 07 Jul 2014 in reply to Milena Link to this post

    Hi Milena,

    Thank you for the reply! Your solution gets part way to what I need, but instead of "columns > 10" I need it to scroll if the actual width of the tiles would be below minimumColWidth. This of course depends on the current width of the window. Is there any way to achieve this without using the ActualWidth along with the number of columns and doing the math in the code-behind to figure out if scrolling is needed? And if ActualWidth is the only way, is there an easy way to calculate what the width of a tile would be given the width and number of columns, taking into account the framing and spacing added by TileView? (can't just do ActualWidth/ColumnsCount)

    Thanks again,
    Louis
  6. Milena
    Admin
    Milena avatar
    204 posts

    Posted 08 Jul 2014 Link to this post

    Hi Louis,

    ActualWidth property gets the rendered width, including framing and spacing. So, your condition could be: if the ActualWidth / columnCount is smaller than the desired minimumColWidth than the Scrollbar will become visible.
    I edited the test project and attached it to the reply. On my side it works fine. Please take a look at it and let us know if it works for you. If I missed something, please give us more information about the size of TileView, the specific details about the custom controls in the TileViewItems, the control in which the TileView is hosted and eventually the problems which you have by implementing this approach.

    I'm looking forward to your reply.

    Regards,
    Milena
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  7. Louis
    Louis avatar
    83 posts
    Member since:
    Aug 2013

    Posted 08 Jul 2014 in reply to Milena Link to this post

    Hi Milena,

    Thanks again for the response. The issue I was trying to explain with ActualWidth is precisely that it does include framing and spacing, as you state. This means that AcutalWidth/columnCount isn't exactly comparable to minimumColWidth. You can see this using your example if you:
    • Change the Width of the 2nd ColumnDefinition to * from Auto
    • Remove the Width property from radTileView
    • Duplicate the columnsCount_TextChanged event handling for radTileView.SizeChanged

    This makes the tile area dynamically sizable by resizing the window. Now, if you resize the window smaller and smaller, you'll notice that each tile gets slightly smaller than the minimumColumnWidth before the HorizontalScrollBarVisibility is activated, at which time they snap back out to minimumColumnWidth.

    What is really needed is to check (AcutalWidth - margins_and_spacing)/columnCount, but of course margins_and_spacing also depends on columnCount. I've put in a fudge factor here that seems to make it look smooth, but was wondering if there's a better programmatic way to figure out how much margins_and_spacing will actually be.

    Thanks again for the help!
    Louis
  8. Milena
    Admin
    Milena avatar
    204 posts

    Posted 09 Jul 2014 Link to this post

    Hi Louis,

    Thank you for the additional information about the TileView properties you've set - this helps to understand better your scenario.

    I can suggest you then another approach. You can:
    - host the TileView in a ScrollViewer,
    - set the Width of the Grid's column to Star (<ColumnDefinition Width="*"/>)
    - hide the ScrollViewer of the TileView.

     The last one you can make by setting the ScrollViewer.HorizontalScrollBarVisibility /VerticalScrollBarVisibility to Hidden or by removing the ScrollViewer from the template of the TileView.
    So when the desired size of the TileView is bigger than the size of the ScrollViewer, the ScrollBar will become visible. 

    Also in style you can set the MinWidth of the TileViewItem - this will play the role of minimumColWidth.

    I edit the project with the new corrections. Please take a look at it and let me know if this is an appropriate solution for you.

    Regards,
    Milena
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready