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

Dear 丶 2022-08-08 17:58 7阅读 0赞

<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？][1_StackPanel height percentage within a grid]  
[2、How to get StackPanel’s children to fill maximum space downward?][2_How to get StackPanel_s children to fill maximum space downward]  
[3、WPF: How to display an image at its original size?][3_WPF_ How to display an image at its original size]

[1_StackPanel height percentage within a grid]: http://stackoverflow.com/questions/13652962/stackpanel-height-percentage-within-a-grid
[2_How to get StackPanel_s children to fill maximum space downward]: http://stackoverflow.com/questions/569095/how-to-get-stackpanels-children-to-fill-maximum-space-downward
[3_WPF_ How to display an image at its original size]: http://stackoverflow.com/questions/3055550/wpf-how-to-display-an-image-at-its-original-size