title: Scrollable WPF window with dynamically created elements?
body: <p>I'm creating a simple App, in which I instantiate elements of a custom class in runtime (the class consists of some Control elements: Textblocks, Grids). Since my working area could easily be overpopulated, I want the main Grid of my App scrollable. </p>
  
  <p>I encapsulated my Grid in a Scroll Viewer, and I intend to increase the Width and the Height of the Grid this way making the Horizontal and Vertical Scrollbars appear. My problem is, however, that I don't know how to check if the instance of my custom class is <em>entirely</em> within the working area, or parts of it stretch out of it. I found a method in SO that could solve my problem <a href="https://stackoverflow.com/questions/1517743/in-wpf-how-can-i-determine-whether-a-control-is-visible-to-the-user">HERE</a>, but because I have many elements, I would have to check every single one of them. Is there another method that would go easy on performance? </p>
  
  <p>Also, I have to know to what extent my element goes beyond the area, so that I only increase the size of the grid accordingly. I'm new to WPF, so any suggestions are much appreciated!</p>
  
  <p>Here is my idea schematically:
  <a href="https://i.stack.imgur.com/wkVKS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wkVKS.png" alt="enter image description here"></a>
  Here is the relevant part of my XAML:</p>
  
  <pre><code>&lt;ScrollViewer VerticalScrollBarVisibility="Visible" 
                HorizontalScrollBarVisibility="Auto"
                CanContentScroll="True"&gt;
      &lt;Grid
      x:Name="MainGrid"
      Background="Transparent"
      MouseLeftButtonUp="grid_MouseLeftButtonUp"&gt;
          &lt;ItemsControl&gt;
              &lt;!--HERE I HAVE A NUMBER OF OTHER ELEMENTS PREDEFINED--&gt;
          &lt;/ItemsControl&gt;
          &lt;Grid.ContextMenu&gt;
              &lt;!--HERE I HAVE CONTEXTMENU ELEMENTS--&gt;
          &lt;/Grid.ContextMenu&gt;
  
      &lt;/Grid&gt;
  &lt;/ScrollViewer&gt;
  </code></pre>