WPF控件自適應屏幕

概述 

若是說界面設計，那麼自適應問題必定沒法避免，今天就來分享一下，wpf如何實現自適應，先看一下效果：（文末添加源代碼下載）

       

 

思路

基本思路就是用 Grid 的網格，進行寬度的自動填充適應，  不過對於複雜的頁面，佈局起來可能比較麻煩， 這裏推薦結合 DockPanel 和 Grid 一塊兒使用，對於頁面一些不須要自適應的模塊，能夠採用 DockPanel.Dock="Top/Left/Right/Bottom"，   對於須要自適應的部分(通常都是界面中間的主體部分)， 採用DockPanel自動填充，  而後再內部應用grid 網格佈局。   這樣能夠把大面積的界面拆分開來，   下降複雜度。

 

 

實現

關於文章開頭圖中的樣式    先用DockPanel 將內容拆分爲上下兩部分，上部對於TextBox， Button應用Grid，定義行列賦值爲*，  便可實現寬度自動平均分配， 若是想實現1：1：2的效果，能夠設置爲*，*，2*，具體應用可參考下面代碼。    

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0">
                    <Border BorderBrush="CadetBlue" BorderThickness="2">
                        <TextBlock TextAlignment="Center" FontSize="20" Text="王者農藥"/>
                    </Border>
                </Grid>
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Border BorderBrush="Red" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="推塔"/>
                        </Border>
                    </Grid>
                    <Grid Grid.Column="1">
                        <Border BorderBrush="Yellow" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="競技"/>
                        </Border>
                    </Grid>
                    <Grid Grid.Column="2">
                        <Border BorderBrush="Blue" BorderThickness="1">
                            <TextBlock TextAlignment="Center" FontSize="20" Text="王者不可阻擋"/>
                        </Border>
                    </Grid>
                </Grid>
                <Grid Grid.Row="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Button Background="MediumSpringGreen" FontSize="20" Content="匹配"/>
                    </Grid>
                    <Grid Grid.Column="1">
                        <Button Background="Coral" FontSize="20" Content="排位"/>
                    </Grid>
                </Grid>
            </Grid>

 

DataGrid的特殊處理

對於下半部分的DataGrid可能相對複雜，不但要設置  ColumnWidth="Auto"，  還要在後端添加以下代碼來從新計算並更新列寬度：

            DataGridHeroList.Loaded += (s, e) => { DataGridHeroList.Columns.AsParallel().ForEach(column => { column.MinWidth = column.ActualWidth; column.Width = new DataGridLength(1, DataGridLengthUnitType.Star); }); };

   

下載

若有任何疑問，歡迎留言，一塊兒討論~~

示例代碼下載     連接: https://pan.baidu.com/s/1boZCKLx

                                 密碼: fsq5