Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I think the XAML-only approach is somewhat circuitous, but here is a way to do it.</p> <pre><code>&lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" &gt; &lt;!-- This contains our real grid, and a reference grid for binding the layout--&gt; &lt;Grid x:Name="Container"&gt; &lt;!-- hidden because it's behind the grid below --&gt; &lt;Grid x:Name="LayoutReference"&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;ColumnDefinition Width="*"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;!-- We need the border, because the column doesn't have an ActualWidth --&gt; &lt;Border x:Name="ReferenceBorder" Background="Black" /&gt; &lt;Border Background="White" Grid.Column="1" /&gt; &lt;Border Background="Black" Grid.Column="2" /&gt; &lt;/Grid&gt; &lt;!-- I made this transparent, so we can see the reference --&gt; &lt;Grid Opacity="0.9"&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition x:Name="Column1" MaxWidth="{Binding ElementName=ReferenceBorder,Path=ActualWidth}"/&gt; &lt;ColumnDefinition x:Name="Column2" MinWidth="50" /&gt; &lt;ColumnDefinition x:Name="Column3" Width="{ Binding ElementName=Column1, Path=Width }"/&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Label Grid.Column="0" Background="Green"/&gt; &lt;GridSplitter Grid.Column="0" Width="5" /&gt; &lt;Label Grid.Column="1" Background="Yellow" /&gt; &lt;Label Grid.Column="2" Background="Red" /&gt; &lt;/Grid&gt; &lt;/Grid&gt; &lt;/Page&gt; </code></pre>
 

Querying!

 
Guidance

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