作者:李坤凤
本次任务完成时间:2019年5月15日
开发工具与关键技术:开发工具:VS 关键技术:页面布局
一、 视图效果
二、 代码
泊靠式布局特点:
1、 指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。
2、 填充整个剩余空间
3、 DockPanel停靠容器,专门负责适应窗口的布局
<DockPanel Margin="-2,0,-0.4,4.4">
<Button DockPanel.Dock="Top" Content="首页内容" Height="45" Margin="0,0,-0.4,0" FontSize="25">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF7F6F6" Offset="0"/>
<GradientStop Color="#FFF9C2C2" Offset="1"/>
<GradientStop Color="#FFF9E2E1" Offset="0.247"/>
<GradientStop Color="#FF48EBE8" Offset="0.59"/>
<GradientStop Color="#FFF6DCDC" Offset="0.859"/>
<GradientStop Color="#FF98DBFC" Offset="0.42"/>
<GradientStop Color="#FFFFE7DF" Offset="0.327"/>
<GradientStop Color="#FFBBF3F3" Offset="0.115"/>
</LinearGradientBrush>
</Button.Background>
</Button>
网格布局特点:
1、可以定义任意数量的行和列,非常灵活。
2、行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定,并可以设置最大和最小值。
3、内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行,横向跨几列。
4、可以设置Children元素的对齐方向。
<Grid Grid.Column="0" PreviewDragOver="Grid_PreviewDragOver" Grid.Row="1" Height="30" Margin="0,0.2,0,0" VerticalAlignment="Top" Width="120">
<Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" Margin="0,0,0,-10" RenderTransformOrigin="0.5,1.138"></Button>
<Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" RenderTransformOrigin="0.5,1.587" Margin="0,40,0,-50"></Button>
<Button DockPanel.Dock="Left" Content="按钮组" Background="AliceBlue" RenderTransformOrigin="0.5,1.587" Margin="0,80,0,-90"></Button>
</Grid>
<!--主内容-->
<Button Background="SkyBlue" Click="Button_Click" Margin="0,0.2,0,-9.4">
<Image Source="/imgea/mmexport1540988078318.jpg" Width="505" Height="615">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Button>
</DockPanel>