日本好好热aⅴ|国产99视频精品免费观看|日本成人aV在线|久热香蕉国产在线

• 電腦軟件
• 單機游戲
• 安卓應(yīng)用
• 安卓游戲
• 蘋果電腦
• 蘋果手機

首頁 → 編程開發(fā) → 其它知識 → Windows 8應(yīng)用布局控制實例分享

Windows 8應(yīng)用布局控制實例分享

相關(guān)軟件相關(guān)文章發(fā)表評論 來源：西西整理時間：2013/3/4 8:32:39字體大�。�A-A+

作者：jv9點擊：0次評論：0次標簽： 布局

CSS布局生成插件(PVII CSS Page Builder Magic 2)v2.04 特別版

• 類型：網(wǎng)頁設(shè)計大小：1.1M語言：英文 評分：6.6
• 標簽：

立即下載

Windows 8布局控件

在Windows Store應(yīng)用設(shè)計中，布局控件是控制對象位置和尺寸的，由于Windows Store應(yīng)用不僅僅面向桌面操作系統(tǒng)，而且還需要適應(yīng)移動設(shè)備的部署，所以在設(shè)計時，往往需要考慮到不同的分辨率或者硬件屏幕尺寸標準下應(yīng)用布局的適配性，最大程度的保持設(shè)計靈活性是應(yīng)用設(shè)計原則重要環(huán)節(jié)之一。根據(jù)功能性不同，Windows 8為開發(fā)人員提供豐富的布局控件，以達到應(yīng)用布局設(shè)計需求。其中包括：

Grid 

Canvas

StackPanel

WrapGrid

VariableSized WrapGrid

Virtualizing StackPanel

從MSDN開發(fā)文檔中可以看出，以上布局控件皆派生自Panel類，而Panel類可以裝載不同類型的控件作為子控件。

而熟悉Silverlight，WPF和Windows Phone的開發(fā)人員會發(fā)現(xiàn)一些布局控件是相同的。下面我們快速瀏覽這些布局控件的效果以及使用方法，

Grid

Grid是類似于HTML表格的一種布局控件，由于其靈活性高，所以在應(yīng)用設(shè)計中經(jīng)常被使用到。一個Grid控件包含一個Row（行）和Column（列）的集合。開發(fā)人員可以將不同的對象控件布置在不同的行列中，達到位置控制的效果。

基本代碼：

<Grid x:Name="myGrid"></Grid>

表格定義代碼：

<Grid x:Name="myGrid">

<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>

在以上代碼中，Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定義兩行兩列的Grid，這里使用附加屬性RowDefinitions描述行列集合。(附加屬性（Attached Property）XAML重要概念,詳細請參考 XAML實例教程系列) 

后臺代碼聲明行和列集合 ：

Grid.RowDefinitions = new List<RowDefinitions>();

Grid.ColumnDefinitions = new List<ColumnDefinitions>();

完成表格的定義，將控件對象放在指定的表格位置，例如在第一行第一列添加一個TextBlock文本框，代碼如下：

<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbName" Grid.Row="1" Grid.Column="1" />
</Grid>

從代碼中可以看出，因為在TextBlock中，沒有實現(xiàn)Row和Column的屬性，所以放置控件對象到表格是通過附加屬性Grid.Row和Grid.Column實現(xiàn)的。通過附加屬性和依賴屬性的概念，可以理解通過Grid可以存取其所有的子控件。

在完成控件的位置控制后，下面來看看尺寸控制，Grid有三種常見尺寸控制方法：

1. 絕對尺寸控制, 該方法是直接設(shè)置固定的寬度和高度值，其局限性比較大，例如，定義行高50像素，列寬150像素的表格，代碼如下：

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
</Grid>

2. 相對尺寸控制，該方法使用"*"符號作為寬或高的值，其含義是控件對象將占據(jù)布局控件中剩余所有有效空間。由于是由星型標志組成，所以也可以稱為星型尺寸控制。該方法可以靈活控制表格的寬度和高度，所以在布局設(shè)計中非常實用。

例如：定義一個第一行是第二行高度兩倍的表格，其代碼如下:

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

以上代碼無論第一行控件占據(jù)空間多少，都永遠是第二行的兩倍高度。例如，如果Grid高度為600像素，那么第一行則被分配400px，第二行則是200px。

如果在以上表格中添加一個3*，其表格比率則為3:2:1， 則行高度將被分配為300px, 200px, 100px.

3. 自動尺寸控制, 設(shè)置寬度和高度為“Auto”,該方法將根據(jù)控件對象的高度和寬度自動調(diào)節(jié)分配表格高度和寬度，該控制方式經(jīng)常與相對尺寸控制配合使用。例如下面的代碼，第一行高度將根據(jù)控件的高度自動分配，而第二行高度則取剩余布局控件高度值。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

實例代碼:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="普通按鈕" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按鈕" Grid.Column="1" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按鈕" Grid.Column="2" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <Button Content="普通按鈕" Grid.Column="3" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" d:IsHidden="True"/>
        <HyperlinkButton Content="鏈接按鈕" HorizontalAlignment="Left" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" d:IsHidden="True"/>
        <HyperlinkButton Content="鏈接按鈕" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1" d:IsHidden="True"/>
        <HyperlinkButton Content="鏈接按鈕" HorizontalAlignment="Center" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="2" d:IsHidden="True"/>
        <HyperlinkButton Content="鏈接按鈕" HorizontalAlignment="Right" Margin="0" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="3" d:IsHidden="True"/>
    </Grid>

Canvas

Canvas被稱為最簡單的布局控件，其使用絕對位置控制對象的位置。聲明定義Canvas后，對象使用附加屬性Canvas.Left 和 Canvas.Top設(shè)置相對左距離和上距離，以達到控制對象顯示位置的目的。另外Canvas還提供了ZIndex屬性定義控件Z坐標，如果有兩個控件重疊覆蓋，則ZIndex值越大的控件顯示在上方。

實例代碼:

<Canvas Margin="0" Grid.Row="1">
            <Button Content="布局按鈕" Canvas.Left="785" Canvas.Top="427"/>
            <TextBlock Canvas.Left="814" TextWrapping="Wrap" Text="布局文本" Canvas.Top="248" FontSize="24"/>
            <TextBlock Canvas.Left="355" TextWrapping="Wrap" Text="布局文本" Canvas.Top="203" FontSize="24" />
            <TextBlock Canvas.Left="420" TextWrapping="Wrap" Text="布局文本" Canvas.Top="450" FontSize="24"/>
            <Rectangle Fill="Red" Height="50" Width="70" Canvas.Top="319" Canvas.Left="241" />
            <ElliPSe Fill="Yellow" Height="75" Width="75" Canvas.Top="202" Canvas.Left="611" />
        </Canvas>

StackPanel

StackPanel控件被稱為堆棧面板，也被稱為列表控件，該控件沒有行或者列的概念，只有水平對齊和垂直對齊的概念。在StackPanel中使用Orientation屬性設(shè)置內(nèi)部對象的對齊方式。

但是由于StackPanel對于內(nèi)部對象位置控制較為直接和簡單，通常來說，需要使用Margin屬性調(diào)節(jié)對象的間距。

實例代碼:

<StackPanel Margin="0" Grid.Row="1">
            <Button Content="頭部" HorizontalAlignment="Stretch"/>
            <Button Content="垂直對齊按鈕" HorizontalAlignment="Center"/>
            <Button Content="垂直對齊按鈕" HorizontalAlignment="Center"/>
            <Button Content="垂直對齊按鈕" HorizontalAlignment="Center"/>
            <Button Content="垂直對齊按鈕" HorizontalAlignment="Center"/>
            <Button Content="垂直對齊按鈕" HorizontalAlignment="Center"/>
            <Button Content="底部" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="平行對齊" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行對齊" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行對齊" Margin="20,50,0,50" FontSize="20"/>
                <TextBlock Text="平行對齊" Margin="20,50,0,50" FontSize="20"/>
            </StackPanel>
        </StackPanel>

WrapGrid

WrapGrid可以理解為特殊的Grid，普通的Grid是通過行和列制定對象的位置，而WrapGrid是根據(jù)對象集合的尺寸的不同顯示不同的效果。WrapGrid的子控件集合類型是ItemsControl，按照從左到右，從上到下的順序展示集合中的子元素到用戶界面，當元素到達WrapGrid最右邊或者最下邊，將自動開始新的行或者列繼續(xù)展示剩余的子元素，直到列舉所有元素完成。

在WrapGrid中，使用Orientation控制子元素顯示方向，默認情況下，將以垂直的方式展示。

<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation = "Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

實例代碼：

<ItemsControl x:Name="xItems">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

VariableSizedWrapGrid

VariableSizedWrapGrid控件和StackPanel非常類似，其布局效果是從左到右從上到下展示布局內(nèi)子元素。

與StackPanel不同的是VariableSizedWrapGrid控件子元素到達右邊界或下邊界是將自動切換新行或者列繼續(xù)展示子元素，直到達到MaximumRowsOrColumns值或者所有子元素展示完畢。

該控件可以通過VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan附加屬性跨行或跨列顯示子對象元素。

另外值得注意的是，正如VariableSizedWrapGrid名字所言，VaribaleSized，其含義是每個Cell單元會根據(jù)子控件內(nèi)容的不同動態(tài)填充尺寸。

<VariableSizedWrapGrid Orientation = "Horizontal">
<TextBlock> 文本1</TextBlock>
<TextBlock> 文本2</TextBlock>
<TextBlock> 空</TextBlock>
<TextBlock> 測試文本1</TextBlock>
</VariableSizedWrapGrid>

實例代碼：

 

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
            <Rectangle Fill="Red"/>
            <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
            <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
            <Rectangle Fill="Yellow" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
        </VariableSizedWrapGrid>

VirtualizingStackPanel

VirtualizingStackPanel是一款同樣類似于StackPanel的布局控件，與StackPanel不同的是VirtualizingStackPanel在數(shù)據(jù)綁定后僅顯示當前綁定項，而并非全部數(shù)據(jù)集合。這樣的綁定顯示方式在載入超大數(shù)據(jù)量時，性能差異非常明顯，VirtualizingStackPanel數(shù)據(jù)載入比StackPanel快出數(shù)十倍，其內(nèi)存占有率非常低。

VirtualizingStackPanel很少被用于獨立控件效果，經(jīng)常會配合ListBox，ComboBox等ItemsControl使用，主要用于大數(shù)據(jù)量綁定。

  <ComboBox x:Name="comboboxList1" VerticalAlignment="Top">
            <ComboBox x:Name="comboboxList2" VerticalAlignment="Top">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
        </ComboBox>

代碼實例：

        <StackPanel>

            <StackPanel.Resources>
                <local:LotsOfItems x:Key="data"/>
            </StackPanel.Resources>

            <ListBox Height="150" ItemsSource="{StaticResource data}"
                     VirtualizingStackPanel.VirtualizationMode="Recycling">
            </ListBox>

        </StackPanel>

Border

Border是最后要提及的布局控件，由于它不是派生自Panel類，所以放在最后講述。Border是Windows store應(yīng)用中常見的布局控件之一，主要目的是顯示一個邊框在一個或者多個對象外圍。

開發(fā)人員可通過Border屬性控制其邊框效果以及顯示位置等。

<Border BorderBrush="Red" BorderThickness="2" Width="150"
            Height="100" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5">
   <TextBlock Text="邊框演示" />
</Border>

實例代碼：

<Border BorderBrush="Yellow"
                BorderThickness="3"
                Width="220"
                Height="100"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="549,363,0,0">
            <StackPanel Orientation="Vertical">
                <TextBlock Text="邊框演示:Windows 8實例教程 - 銀光中國" />
                <TextBlock Text="Http://www.silverlightchina.net" />
            </StackPanel>
        </Border>

源碼分享。

相關(guān)文章

12-112個旋轉(zhuǎn)AutoCAD布局空間圖形方案

07-29國內(nèi)互聯(lián)網(wǎng)巨頭紛紛布局移動操作系統(tǒng)

05-14修改CSS-margin屬性打造DIV+CSS自適應(yīng)布局

05-07Android 用戶界面設(shè)計：線性​​布局

04-28android項目窗口布局屬性介紹

01-14騰訊大閩網(wǎng)正式上線標志著騰訊在全國區(qū)域門戶網(wǎng)站布局已初步完成

11-25CSS布局順口溜-CSS網(wǎng)頁設(shè)計口訣

07-26百度布局客戶端 勢不可擋 “狗日的”又一次無路可走了

04-26DIV+CSS網(wǎng)頁布局對于網(wǎng)站的好處

02-02國外IT博客網(wǎng)頁布局分析

相關(guān)評論

閱讀本文后您有什么感想? 已有23人給出評價!

• 8 喜歡
• 3 頂
• 1 難過
• 5 囧
• 3 圍觀
• 2 無聊

熱門評論

最新評論

發(fā)表評論 查看所有評論(0)

昵稱:

表情:

字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)

推薦文章

沒有數(shù)據(jù)

• Fdisk硬盤分區(qū)圖文教程

相關(guān)下載

名稱大小下載

• 1CSS布局生成插件(PVII CSS Page Builder Magic 2)1.1M下載
• 2MAC頁面布局設(shè)計軟件（iStudio Publisher）15.7M下載
• 3百度手機輸入法皮膚布局制作工具2.9M下載
• 4房屋布局設(shè)計工具(Room arranger)20.8M下載
• 5鍵盤布局編輯器(Ukelele)8M下載
• 6設(shè)計、測量、校準和檢查屏幕圖形和布局(xScope)2.1M下載
• 7網(wǎng)頁布局工具5.4M下載
• 8星界邊境布局編輯器283KB下載
• 9桌面圖標布局保存工具(DesktopOK x64)242KB下載

最新文章

• 

  IIS8.0安裝配置完整圖文教程 IIS8.0的W

  15-12-18
• 

  Eclipse新手快捷鍵大全

  13-12-29
• 

  谷歌瀏覽器日志記錄命令console.log的使

  13-03-07
• 

  PESpin 教程學(xué)習(xí)筆記之Antidump及Remo

  11-07-15
• 

  VMware虛擬機安裝圖解

  10-12-14