WPF自适应、 简单适应性布局

适应性布局"/>

WPF自适应、 简单适应性布局

了解bootstrap的人知道，它的栅格系统或者说网格系统。将屏幕宽度均为12部分。

模拟这种网格，可以快速实现WPF的布局自适应。

定义全局Grid。在按自己的排版布置，设置行，设置列。分别设置各自的比例。比如：我设置行1:2:3:4。设置列1:2:2:3:1。

然后布局中的每个控件设置对应的Grid行，Grid列，以及占的行数或者列数。

代码如下：

    <Grid><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="3*"></RowDefinition><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="3*"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Content="按钮1"></Button><Button Grid.Row="0" Grid.Column="3"  Content="按钮2"></Button><Button Grid.Row="1" Grid.Column="0" Content="按钮3"></Button><Button Grid.Row="2" Grid.Column="2" Content="按钮4"></Button><Button Grid.Row="2" Grid.Column="1" Content="按钮5"></Button><Button Grid.Row="3" Grid.Column="4" Content="按钮6"></Button><Button Grid.Row="3" Grid.Column="2" Content="按钮7"></Button></Grid>

不需要设置任何高宽。界面显示如下：

加上DevExpress，再稍微布置一下，所有控件没有设置任何高度和宽度：

<dx:DXWindowxmlns=""xmlns:x=""xmlns:dx=""xmlns:dxb=""xmlns:dxnav=""xmlns:dxn=""xmlns:dxg=""xmlns:dxc=""xmlns:dxe="" x:Class="TestDev003.MainWindow"Title="MainWindow" MinHeight="800" MinWidth="1000"><Grid><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="8*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="7*" /></Grid.ColumnDefinitions><dxnav:OfficeNavigationBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"><dxnav:NavigationBarItem Content="开始" /><dxnav:NavigationBarItem Content="编辑" /><dxnav:NavigationBarItem Content="设置" /><dxnav:NavigationBarItem Content="帮助" /></dxnav:OfficeNavigationBar><dxn:NavBarControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top"><dxn:NavBarGroup Header="navBarGroup1"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup><dxn:NavBarGroup Header="navBarGroup2"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup><dxn:NavBarGroup Header="navBarGroup3"><dxn:NavBarItem Content="navBarItem1" /><dxn:NavBarItem Content="navBarItem2" /><dxn:NavBarItem Content="navBarItem3" /><dxn:NavBarItem Content="navBarItem4" /><dxn:NavBarItem Content="navBarItem5" /></dxn:NavBarGroup></dxn:NavBarControl><dx:DXTabControl Grid.Row="1" Grid.Column="1"><dx:DXTabItem Header="Tab1"><Grid Background="Transparent"><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><dxg:GridControl Grid.Row="0" Grid.Column="0" Margin="0" AutoGenerateColumns="AddNew"EnableSmartColumnsGeneration="True" SelectionMode="MultipleRow"><dxg:GridControl.Columns><dxg:GridColumn FieldName="Column1" /><dxg:GridColumn FieldName="Column2" /><dxg:GridColumn FieldName="Column3" /></dxg:GridControl.Columns><dxg:GridControl.View><dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True" AutoWidth="True" /></dxg:GridControl.View></dxg:GridControl><dxe:SparklineEdit Grid.Row="0" Grid.Column="1" Margin="0" /><dxc:ChartControl Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Margin="0"VerticalAlignment="Top"><dxc:ChartControl.Legend><dxc:Legend /></dxc:ChartControl.Legend><dxc:XYDiagram2D><dxc:BarSideBySideSeries2D DisplayName="Series 1" /><dxc:BarSideBySideSeries2D DisplayName="Series 2" /></dxc:XYDiagram2D></dxc:ChartControl></Grid></dx:DXTabItem><dx:DXTabItem Header="Tab2"><Grid Background="Transparent" /></dx:DXTabItem><dx:DXTabItem Header="Tab3"><Grid Background="Transparent" /></dx:DXTabItem></dx:DXTabControl></Grid>
</dx:DXWindow>