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:DXWindow
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxnav="http://schemas.devexpress.com/winfx/2008/xaml/navigation"
    xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 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>