日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

三种基础的布局控件

發(fā)布時(shí)間：2025/6/15 编程问答 18 豆豆
生活随笔 收集整理的這篇文章主要介紹了 三种基础的布局控件 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

布局控件對(duì)于用戶體驗(yàn)來(lái)說(shuō)至關(guān)重要，下面就來(lái)體驗(yàn)一下Windows8的應(yīng)用商店項(xiàng)目開發(fā)中的幾種常用布局吧。

新建一個(gè)項(xiàng)目叫做LayoutTest來(lái)做測(cè)試。

一：Grid網(wǎng)格布局控件

作用：定義由行和列組成的網(wǎng)格區(qū)域。

新建一個(gè)空白xaml頁(yè)面，命名為：GridLayout.xaml。

里面寫上如下代碼：

[html] view plaincopy
  • <Page??
  • ????x:Class="LayoutTest.GridLayout"??
  • ????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??
  • ????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"??
  • ????xmlns:local="using:LayoutTest"??
  • ????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"??
  • ????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"??
  • ????mc:Ignorable="d">??
  • ??
  • ????<!--Grid表格布局??
  • ????????Grid.RowDefinitions：定義Grid中的行??
  • ????????Grid.ColumnDefinitions?：定義Grid的列???
  • ????????創(chuàng)建一個(gè)四行五列的表格布局??
  • ????-->??
  • ????<Grid?HorizontalAlignment="Center"?Height="210"??VerticalAlignment="Center"?Width="305">??
  • ????????<Grid.RowDefinitions>??
  • ????????????<!--定義四行及每行高度，*表示所占的比例-->??
  • ????????????<RowDefinition?Height="1*"/>??
  • ????????????<RowDefinition?Height="2*"/>??
  • ????????????<RowDefinition?Height="3*"/>??
  • ????????????<RowDefinition?Height="4*"/>??
  • ????????</Grid.RowDefinitions>??
  • ??????????
  • ????????<Grid.ColumnDefinitions>??
  • ????????????<!--定義五列及每列寬度，*表示所占的比例-->??
  • ????????????<ColumnDefinition?Width="1*"?/>??
  • ????????????<ColumnDefinition?Width="2*"/>??
  • ????????????<ColumnDefinition?Width="3*"/>??
  • ????????????<ColumnDefinition?Width="4*"/>??
  • ????????????<ColumnDefinition?Width="5*"/>??
  • ????????</Grid.ColumnDefinitions>??
  • ????</Grid>??
  • </Page>??

    • 這樣便是一個(gè)簡(jiǎn)單的格子布局，效果如圖所示：



    這樣只是簡(jiǎn)單的創(chuàng)建了格子布局，為了讓效果更明顯一點(diǎn)，我們把每個(gè)格子都填充上顏色，完整代碼如下：

    [html] view plaincopy
  • <Page??
  • ????x:Class="LayoutTest.GridLayout"??
  • ????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??
  • ????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"??
  • ????xmlns:local="using:LayoutTest"??
  • ????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"??
  • ????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"??
  • ????mc:Ignorable="d">??
  • ??
  • ????<!--Grid表格布局??
  • ????????Grid.RowDefinitions：定義Grid中的行??
  • ????????Grid.ColumnDefinitions?：定義Grid的列???
  • ????????創(chuàng)建一個(gè)四行五列的表格布局??
  • ????-->??
  • ????<Grid?HorizontalAlignment="Center"?Height="210"??VerticalAlignment="Center"?Width="305">??
  • ????????<Grid.RowDefinitions>??
  • ????????????<!--定義四行及每行高度，*表示所占的比例-->??
  • ????????????<RowDefinition?Height="1*"/>??
  • ????????????<RowDefinition?Height="2*"/>??
  • ????????????<RowDefinition?Height="3*"/>??
  • ????????????<RowDefinition?Height="4*"/>??
  • ????????</Grid.RowDefinitions>??
  • ??
  • ????????<Grid.ColumnDefinitions>??
  • ????????????<!--定義五列及每列寬度，*表示所占的比例-->??
  • ????????????<ColumnDefinition?Width="1*"?/>??
  • ????????????<ColumnDefinition?Width="2*"/>??
  • ????????????<ColumnDefinition?Width="3*"/>??
  • ????????????<ColumnDefinition?Width="4*"/>??
  • ????????????<ColumnDefinition?Width="5*"/>??
  • ????????</Grid.ColumnDefinitions>??
  • ??
  • ????????<!--第一行的五列-->??
  • ????????<Rectangle?Fill="#000000"?Grid.Row="0"?Grid.Column="0"?/>??
  • ????????<Rectangle?Fill="#444444"?Grid.Row="0"?Grid.Column="1"?/>??
  • ????????<Rectangle?Fill="#888888"?Grid.Row="0"?Grid.Column="2"?/>??
  • ????????<Rectangle?Fill="#bbbbbb"?Grid.Row="0"?Grid.Column="3"?/>??
  • ????????<Rectangle?Fill="#ffffff"?Grid.Row="0"?Grid.Column="4"?/>??
  • ??
  • ????????<!--第二行的五列-->??
  • ????????<Rectangle?Fill="#000000"?Grid.Row="1"?Grid.Column="0"?/>??
  • ????????<Rectangle?Fill="#000044"?Grid.Row="1"?Grid.Column="1"?/>??
  • ????????<Rectangle?Fill="#000088"?Grid.Row="1"?Grid.Column="2"?/>??
  • ????????<Rectangle?Fill="#0000bb"?Grid.Row="1"?Grid.Column="3"?/>??
  • ????????<Rectangle?Fill="#0000ff"?Grid.Row="1"?Grid.Column="4"?/>??
  • ??
  • ????????<!--第三行的五列-->??
  • ????????<Rectangle?Fill="#000000"?Grid.Row="2"?Grid.Column="0"?/>??
  • ????????<Rectangle?Fill="#004400"?Grid.Row="2"?Grid.Column="1"?/>??
  • ????????<Rectangle?Fill="#008800"?Grid.Row="2"?Grid.Column="2"?/>??
  • ????????<Rectangle?Fill="#00bb00"?Grid.Row="2"?Grid.Column="3"?/>??
  • ????????<Rectangle?Fill="#00ff00"?Grid.Row="2"?Grid.Column="4"?/>??
  • ??
  • ????????<!--第四行的五列-->??
  • ????????<Rectangle?Fill="#000000"?Grid.Row="3"?Grid.Column="0"?/>??
  • ????????<Rectangle?Fill="#440000"?Grid.Row="3"?Grid.Column="1"?/>??
  • ????????<Rectangle?Fill="#880000"?Grid.Row="3"?Grid.Column="2"?/>??
  • ????????<Rectangle?Fill="#bb0000"?Grid.Row="3"?Grid.Column="3"?/>??
  • ????????<Rectangle?Fill="#ff0000"?Grid.Row="3"?Grid.Column="4"?/>??
  • ??
  • ??
  • ????</Grid>??
  • </Page>??
    • 效果圖如下：



    二：Canvas畫布布局

    作用：定義一個(gè)區(qū)域可以使用相對(duì)于該區(qū)域的坐標(biāo)直接定位子元素。

    給工程添加一個(gè)新的空白xaml文件，叫做CanvasLayout.xaml。

    完整的代碼如下：

    [html] view plaincopy
  • <Page??
  • ????x:Class="LayoutTest.CanvasLayout"??
  • ????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??
  • ????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"??
  • ????xmlns:local="using:LayoutTest"??
  • ????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"??
  • ????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"??
  • ????mc:Ignorable="d">??
  • ??
  • ????<Grid>??
  • ????????<Canvas?HorizontalAlignment="Center"?Height="600"?Margin="0"???
  • ????????????????VerticalAlignment="Center"?Width="800"?Background="Blue">??
  • ??
  • ????????????<!--Canvas里子元素通過(guò)調(diào)整Canvas區(qū)域的絕對(duì)位置來(lái)定位??
  • ?????????????Canvas.Left?–?以左上角為原點(diǎn)，Canvas?X軸的距離??
  • ?????????????Canvas.Top?–?以左上角為原點(diǎn)，Canvas?Y軸的距離??
  • ?????????????-->??
  • ??
  • ????????????<Ellipse?Fill="Red"?Height="51"?Canvas.Left="400"?Stroke="White"???
  • ?????????????????????Canvas.Top="52"?Width="53"/>??
  • ????????????<Rectangle?Fill="Green"?Height="56"?Canvas.Left="415"?Stroke="Black"???
  • ???????????????????????Canvas.Top="105"?Width="20"/>??
  • ????????</Canvas>??
  • ????</Grid>??
  • </Page>??

    • 效果圖：



    三、StackPanel排列布局控件
    作用：將子元素排列成一行（可沿水平或垂直方向）
    再添加一個(gè)空白頁(yè)，命名為“StackPanelLayout.xaml”，然后把原來(lái)的Grid標(biāo)簽刪除，在Page標(biāo)簽內(nèi)添加如下代碼：

    [html] view plaincopy
  • <Page??
  • ????x:Class="LayoutTest.StackPanelLayout"??
  • ????xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"??
  • ????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"??
  • ????xmlns:local="using:LayoutTest"??
  • ????xmlns:d="http://schemas.microsoft.com/expression/blend/2008"??
  • ????xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"??
  • ????mc:Ignorable="d">??
  • ??????
  • ????<StackPanel?Background="Black">??
  • ????????<StackPanel?Orientation="Horizontal"?x:Name="stackpanel">??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????????<Button>Test</Button>??
  • ????????</StackPanel>??
  • ????????<Button?Width="111"?Height="111">變換方向</Button>??
  • ??
  • ????</StackPanel>??
  • </Page>??

    • 此時(shí)可以看到一排按鈕齊刷刷的排在那里，那么接下來(lái)為這個(gè)按鈕添加監(jiān)聽，監(jiān)聽代碼如下：

    [csharp] view plaincopy
  • private?void?Change(object?sender,?RoutedEventArgs?e)??
  • ???????{??
  • ???????????///更改Stackpanel控件的內(nèi)部排列方式??
  • ???????????if?(stackpanel.Orientation?==?Orientation.Horizontal)??
  • ???????????{??
  • ???????????????stackpanel.Orientation?=?Orientation.Vertical;??
  • ???????????}??
  • ???????????else??
  • ???????????{??
  • ???????????????stackpanel.Orientation?=?Orientation.Horizontal;??
  • ???????????}??
  • ???????}??

    • 打開App.xaml.cs，找到下面這幾句代碼，把typeof括號(hào)里的MainPage改成StackPanelLayout，這里的意思就是應(yīng)用啟動(dòng)時(shí)候顯示的頁(yè)面。

    運(yùn)行一下，便可以看到風(fēng)騷的效果了。

    總結(jié)

    以上是生活随笔為你收集整理的三种基础的布局控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。