Databases
StackOverflow2013
Postsdbo
POLayout to use for dynamic grid of images in a ScrollViewer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLayout to use for dynamic grid of images in a ScrollViewer
    text
    copied!<p>I have a <code>ScrollViewer</code> that contains a <code>Grid</code> of images. I am not sure if using a grid is the correct choice. Here is a mockup image of what I want it to look like:</p> <p><img src="https://i.stack.imgur.com/wO8Nf.png" alt="mockup"></p> <p>The red box represents the <code>ScrollViewer</code>. Inside it, is <em>some</em> type of layout container (<code>Grid</code> at the moment) that has two rows of images (green squares) but a dynamic amount of columns that can change at runtime, that can be scrolled to. Another condition is that I want to resize them so that 6 images (and only 6!) are always visible.</p> <p>So in XAML:</p> <pre><code> &lt;ScrollViewer Name="scrollViewer1"&gt; &lt;Grid Name="grid1"&gt;&lt;/Grid&gt; &lt;/ScrollViewer&gt; </code></pre> <p>Then using C# I think I need to dynamically add columns. Then listening to <code>scrollViewer1</code>'s <code>SizeChanged</code> event I need to dynamically calculate the size of the rows and columns so that 3 images are always in view. For example:</p> <pre><code>ColumnDefinition gridColN = new ColumnDefinition(); grid1.ColumnDefinitions.Add(gridColN); </code></pre> <p><strong>Problem #1:</strong> Dynamically adding more columns makes the grid cells keep getting smaller and smaller and never scroll within the <code>ScrollViewer</code> until there are 10+ columns.</p> <p><strong>Expected result:</strong> The end result should be a horizontal stream of images, 6 visible at a time, that will resize when the outter container or window is resized. I am trying to size their width dynamically, but setting them to 1/3 of the containers width does not work.</p> <p><strong>Questions:</strong> Is this the correct approach? Should I use <code>Grid</code> inside the <code>ScrollViewer</code>? Do I have to manually calculate the sizes or is there a way to let them fill the container?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload