自適應XAML佈局經驗總結（四）區域佈局設計模式

時間 2019-12-08

原文原文鏈接

本系列對實際項目中的XAML佈局場景進行總結，給出了較優化的自適應佈局解決方案，但願對你們有所幫助。express

下面介紹區域佈局設計模式。設計模式

7. 頭尾模式

頁面有時分爲頂部欄，中間內容和底部欄三部分。這時能夠使用Grid佈局，分爲3行，設置爲Auto，*和Auto，分別放置頂部欄，中間內容和底部欄。頂部欄和底部欄由其中內容決定高度，中間內容充滿剩餘空間。app

<Window x:Class="BlendDemo.DP7"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="頭尾模式" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Border Background="#FFCEFFFF">
            <TextBlock Margin="30" Text="此處爲頭部" TextTrimming="WordEllipsis"/>
        </Border>
        <Grid Grid.Row="1" Background="#FFE0F0FF"/>
        <Border Grid.Row="2" Background="#FFF0E3F9">
            <TextBlock Margin="30" Text="此處爲尾部" TextTrimming="WordEllipsis"/>
        </Border>
    </Grid>
</Window>

8. 邊欄模式

頁面有時須要一個能調節大小的邊欄。這時能夠使用Grid佈局，分爲2列。邊欄列設置必定的寬度和最大寬度。另外一列爲*。邊欄列中還加入了GridSplitter，用來調整列的寬度。佈局

<Window x:Class="BlendDemo.DP8"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="邊欄模式" Height="600" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" MaxWidth="300"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Border Background="#FFCEFFFF" Margin="0,0,2,0">
            <TextBlock Margin="30" Text="此處爲邊欄" TextTrimming="WordEllipsis"/>
        </Border>
        <GridSplitter Grid.Column="0" Width="2"/>   
        <Grid Grid.Column="1" Background="#FFE0F0FF"/>
    </Grid>
</Window>

9. 可變等分模式

若是兩個或多個區域的大小都是可變的，即變的部分，能夠等分剩餘空間，這樣效果好一些。優化

如兩塊文字區域顯示的文字內容是不定的，能夠使用Grid，分爲兩行，都爲*。每塊文字區域使用放置在ScrollViewer中的TextBlock顯示，設置TextBlock爲折行並設置合適的Margin。spa

<Window x:Class="BlendDemo.DP9"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="可變等分模式" Height="400" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Background="#FFE0F0FF"/>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Border Background="#FFCEFFFF">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <TextBlock Margin="30" Text="一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字" TextWrapping="Wrap"/>
                </ScrollViewer>
            </Border>
            <Border Grid.Row="1" Background="#FFF6DFFB">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <TextBlock Margin="30" Text="一段文字一段文字一段文字一段文字一段文字" TextWrapping="Wrap"/>
                </ScrollViewer>
            </Border>
        </Grid>
    </Grid>
</Window>

10. 文檔模式

相似文檔排版的佈局，能夠使用ScrollViewer，設置垂直滾動條可見性爲Auto，其中放置一個StackPanel，裏面依次排列要顯示的內容。設計

<Window x:Class="BlendDemo.DP10"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="文檔模式" Height="400" Width="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid Background="#FFE0F0FF"/>
        <Border Grid.Column="1" Background="#FFCEFFFF">
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <StackPanel>
                    <Grid Background="#FFFFB6B6" Height="100"/>
                    <Grid Background="#FFF9D5AA" Height="200"/>
                    <Grid Background="#FFF1F7C7" Height="300"/>
                    <Grid Background="#FFD5FBCA" Height="400"/>
                    <Grid Background="#FFBFC9F9" Height="300"/>
                    <Grid Background="#FFFDCDFD" Height="500"/>
                </StackPanel>
            </ScrollViewer>
        </Border>
    </Grid>
</Window>

11. 圖片模式

若是須要像顯示圖片或視頻同樣顯示一塊界面區域，使其可以等比例縮放。這塊區域通常爲矢量圖畫，圖示或圖表等內容。能夠使用Viewbox，在其中放置一個Canvas佈局，其中放置繪圖內容。code

<Window x:Class="BlendDemo.DP11"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="圖片模式" Height="300" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Background="#FFE2F7F7">
            <Viewbox Margin="30">
                <Canvas Background="#FFFBFBEE" Width="610" Height="255">
                    <Rectangle x:Name="Rectangle" Width="118.667" Height="69.3636" Canvas.Left="0" Canvas.Top="76.0825" Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FFFFFFFF"/>
                    <Path x:Name="Path" Width="60" Height="60" Canvas.Left="211.795" Canvas.Top="50" Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 338.444,108.251L 293.582,105.018L 265.782,144.779L 254.651,95.7589L 212.461,78.2887L 250.444,51.2256L 252.169,0.666641L 286.775,32.9613L 330.031,19.1842L 313.436,66.2066L 338.444,108.251 Z "/>
                    <Ellipse x:Name="Ellipse" Width="186.222" Height="78.3675" Canvas.Left="420.444" Canvas.Top="0" Stretch="Fill" StrokeThickness="1.33333" StrokeMiterLimit="2.75" Stroke="#FF000000" Fill="#FFFFFFFF"/>
                    <TextBlock x:Name="TextBlock" TextAlignment="Left" Width="Auto" Height="Auto" Canvas.Left="0" Canvas.Top="0">
                        <TextBlock.RenderTransform>
                            <TransformGroup>
                                <MatrixTransform Matrix="1.33333,0,0,1.33333,-0.333618,191.094"/>
                            </TransformGroup>
                        </TextBlock.RenderTransform>
                        <Run FontFamily="微軟雅黑" FontSize="40.518" Text="這是一幅圖畫" Foreground="#FF000000"/>
                    </TextBlock>
                </Canvas>
            </Viewbox>
        </Border>
        <Grid Grid.Row="1" Background="AliceBlue"/>
    </Grid>
</Window>