title: Wpf grid inside viewbox not working properly
body: <p>I'm trying to use a viewbox in order to resize the grid within it. The problem is the after I add grid inside the viewbox it distorts all the grid and its childs.
  The grid contains a Listview which items have a custom template and style as in the code below:</p>
  
  <pre><code>&lt;Window x:Class="WpfApp3.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:WpfApp3"
      mc:Ignorable="d"
      SizeChanged="Window_SizeChanged"
      Title="MainWindow" Height="350" Width="525"&gt;
  
  &lt;Window.Resources&gt;
      &lt;Style TargetType="{x:Type ListViewItem}"&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                      &lt;ContentPresenter/&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
          &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt;
          &lt;Setter Property="Focusable" Value="False"/&gt;
      &lt;/Style&gt;
      &lt;DataTemplate x:Key="sectors"&gt;
          &lt;Grid Background="White"&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="169*"/&gt;
                  &lt;ColumnDefinition Width="287*"/&gt;
                  &lt;ColumnDefinition Width="30"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="{Binding Height}" /&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Image Grid.Row="0" Source="Images/drag.png" Width="20" Grid.Column="2" VerticalAlignment="Center" Cursor="SizeAll" ToolTip="Rivendos" Height="20" Margin="5,40"/&gt;
              &lt;Grid Grid.Row="0" Background="{Binding colorO}"  Grid.Column="0" Grid.ColumnSpan="2"&gt;
                  &lt;TextBlock Text="{Binding Name}" /&gt;
              &lt;/Grid&gt;
              &lt;Border Grid.Row="0" Grid.Column="2" BorderBrush="Gray" BorderThickness="0 0 0 8" Cursor="SizeNS"/&gt;
          &lt;/Grid&gt;
      &lt;/DataTemplate&gt;
  &lt;/Window.Resources&gt;
  &lt;Grid Name="mainG"&gt;
  
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>MainWindow class:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Collections.ObjectModel;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows;
  using System.Windows.Controls;
  using System.Windows.Data;
  using System.Windows.Documents;
  using System.Windows.Input;
  using System.Windows.Media;
  using System.Windows.Media.Imaging;
  using System.Windows.Navigation;
  using System.Windows.Shapes;
  
  namespace WpfApp3
  {
      /// &lt;summary&gt;
      /// Interaction logic for MainWindow.xaml
      /// &lt;/summary&gt;
      public partial class MainWindow : Window
      {
          public MainWindow()
          {
              InitializeComponent();
              Viewbox vb = new Viewbox();
              vb.Stretch = Stretch.Fill;
              Grid shelfGrid = new Grid();
              ListView shelf = new ListView();
              shelf.Background = new SolidColorBrush(Colors.Red);
              shelf.ItemTemplate = (DataTemplate)Resources["sectors"];
              ObservableCollection&lt;Sector&gt; sectors = new ObservableCollection&lt;Sector&gt;();
              sectors.Add(new Sector() { Id = 1, Width = 100, Height = 100, colorO = new SolidColorBrush(Colors.Red), Name = "Sector 1" });
              sectors.Add(new Sector() { Id = 2, Width = 100, Height = 200, colorO = new SolidColorBrush(Colors.Black), Name = "Sector 2" });
              shelf.ItemsSource = sectors;
              shelfGrid.Children.Add(shelf);
              shelfGrid.VerticalAlignment = VerticalAlignment.Stretch;
              mainG.Children.Add(shelfGrid);
          }
  
          private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
          {
              double[] units = calculateUnits(350, 300);
              mainG.Width = units[0];
              mainG.Height = units[1];
          }
  
          public double[] calculateUnits(double widthR, double heightR)
          {
              double[] units = new double[3];
              double ratio = 0;
              double width = this.ActualWidth;
              double height = this.ActualHeight - 35;
              double maxShelf = Math.Max(widthR, heightR);
              double minPanel = Math.Min(width, height);
              ratio = widthR / heightR;
              if (widthR &gt; heightR)
              {
                  units[1] = (width / ratio) - Math.Max(0, (width / ratio) - height);
                  units[0] = units[1] * ratio;
              }
              else
              {
                  units[0] = (height * ratio) - Math.Max(0, (height * ratio) - width);
                  units[1] = units[0] / ratio;
              }
              return units;
          }
      }
  }
  </code></pre>
  
  <p>Sector class:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows.Media;
  
  namespace WpfApp3
  {
      class Sector
      {
          public long Id { get; set; }
          public string Name { get; set; }
          public double Width { get; set; }
          public double Height { get; set; }
          public double Depth { get; set; }
          public int Color { get; set; }
          public long ShelfId { get; set; }
  
          public SolidColorBrush colorO { get; set; }
      }
  }
  </code></pre>
  
  <p>Without viewbox everything seems fine but ListItems doesn't resize
  <a href="https://i.stack.imgur.com/dpjS1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpjS1.png" alt="ds"></a></p>
  
  <p>For example if I resize window as it can be seen below the ListView items height stays the same, instead their height should change and mantain the ratio with its parent:
  <a href="https://i.stack.imgur.com/3Kqwf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3Kqwf.png" alt="enter image description here"></a></p>
  
  <p>With viewbox everything is distorted!!</p>
  
  <pre><code>vb.Child = shelfGrid;
  mainG.Children.Add(vb);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/bQZnl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQZnl.png" alt="enter image description here"></a></p>
  
  <p>If I use Stretch.Uniform instead of Stretch.Fill I get this:</p>
  
  <p><a href="https://i.stack.imgur.com/WQxjx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WQxjx.png" alt="enter image description here"></a>    </p>
  
  <p>What I'm missing, or I should take another way of achieving that?</p>