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

来源：互联网发布：淘宝内部优惠券秒杀编辑：程序博客网时间：2024/05/17 15:59

<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>

【参考资料】：
1、StackPanel height percentage within a grid？
2、How to get StackPanel’s children to fill maximum space downward?
3、WPF: How to display an image at its original size?

0 0