【WPF】Windows App 比例布局的实现

<Grid Padding="0,20,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" MaxWidth="200"/>    //此处的"1*"即是所占比例
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<view:Canvas x:Name="Canvas" Grid.Column="1"/>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" MaxHeight="160"/>
<RowDefinition Height="3*" />
<RowDefinition Height="1*" MaxHeight="160"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderThickness="1" BorderBrush="LightGray" MinWidth="20" >
<Button x:Name="Back" Click="Back_Click" Grid.Row="0" Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel>
<Image Source="/Assets/back_normal.png" MaxWidth="100"/>
</StackPanel>
</Button>
</Border>
<Border Grid.Row="1" BorderThickness="1,0,1,0" BorderBrush="LightGray" MinWidth="20">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button x:Name="Pen" Background="Transparent" Click="Pen_Click">
<StackPanel>
<Image x:Name="PenImage" Source="/Assets/pen_selected.png" MaxWidth="100" SizeChanged="PenImage_SizeChanged"/>
</StackPanel>
</Button>
<Button x:Name="Eraser" Background="Transparent" Click="Eraser_Click">
<StackPanel>
<Image x:Name="EraserImage" Source="/Assets/eraser_normal.png" MaxWidth="100"/>
</StackPanel>
</Button>
<Button x:Name="Clear" Click="Clear_Click" Background="Transparent">
<StackPanel>
<Image Source="/Assets/clear_normal.png" MaxWidth="100"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<Border Grid.Row="2" BorderThickness="1" BorderBrush="LightGray" MinWidth="20">
<Button x:Name="Purchase" Click="Purchase_Click" Background="Transparent" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel>
<Image Source="/Assets/print_normal.png" MaxWidth="100"/>
</StackPanel>
</Button>
</Border>
</Grid>

</Grid>