2:WPF的界面布局

Canvas

定義一個區域，在該區域中可以使用相對於 Canvas 區域的坐標顯式定位子元素。

它是一個存儲元素的容器，它不會自動調整內部元素的排列及大小。不指定元素位置，元素將默認顯示在畫布的左上方。Canvas的主要用途是用來畫圖。Canvas默認不會自動裁減超過自身范圍的內容，溢出的內容會顯示在Canvas外面，因為默認 ClipToBounds="False"；我們可以設置ClipToBounds="True來裁剪多出的內容。

1. 在窗體中建立三個canvas（ca，ca1，ca2），ca1和ca2包含在ca中。
2. 設置ca填充色為黃色，ca1為綠色，ca2為紅色。
3. 在ca1中放入一個TextBlock，一個Button，一個Ellipse。TextBlock和Button完全包括在ca1中，Ellipse超出ca1。
4. 設置ca2的ClipToBounds=”true”。
5. 在ca2中放入一個Ellipse，使其超出ca2。

 

<Canvas Background="yellow" Name="ca">
        <Canvas Background="green" Height="158" Width="192" Name="ca1">
            <Button Content="Button" Canvas.Left="55" Canvas.Top="121" Width="75"/>
            <TextBlock Canvas.Left="80" TextWrapping="Wrap" Text="白菜" Canvas.Top="66"/>
            <Ellipse Fill="White" Height="87" Canvas.Left="136" Canvas.Top="90" Width="103" />
        </Canvas>
        <Canvas Height="119" Width="133" Background="red" ClipToBounds="True" Canvas.Left="316" Canvas.Top="157" Name="ca2">
            <Ellipse Fill="White" Height="87" Canvas.Left="58" Canvas.Top="67" Width="103"/>
        </Canvas>
    </Canvas>

 

StackPanel

StackPanel就是將子元素按照一行或者一列排列，通過設置Orientation屬性設置橫排（Horizontal）和豎排（Vertical默認）。縱向的StackPanel如果不設置子元素寬度，每個元素寬度與StackPanel一樣寬，反之橫向亦然。如果元素超過了StackPanel的空間，會截斷多出的內容。 元素的Margin屬性用於使元素之間產生一定得間隔，當元素空間大於其內容的空間時，剩余空間將由HorizontalAlignment和VerticalAlignment屬性來決定如何分配。

<StackPanel Margin="295,0,45,183" Background="Red">
            <Button Content="Button" Name="button1"/>
            <Button Content="Button" Height="23" Name="button2" Width="75" />
            <Button Content="Button" Height="43" Name="button3" Width="310" />
        </StackPanel>
        <StackPanel Margin="26,171,253,24" Name="stackPanel1" Orientation="Horizontal" Background="Red">
            <Button Content="Button"  Name="button4" Margin="10" />
            <Button Content="Button" Height="23" Name="button5" Width="75" Margin="10" />
        </StackPanel>

 

WrapPanel

從左至右或從上至下按順序位置定位子元素，如果排滿則自動換行至下一行或列繼續排列。WrapPanel面板也提供了 Orientation屬性設置排列方式，屬性設置橫排（Horizontal默認）和豎排（Vertical）

<WrapPanel Margin="25,12,247,207" Name="wrapPanel1" Background="Blue">
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
        </WrapPanel>
        <WrapPanel Height="180" Margin="290,119,0,0" Name="wrapPanel2" Width="168" Background="Blue" Orientation="Vertical">
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
        </WrapPanel>

 

DockPanel

DockPanel面板可以將子元素停靠在面板的上下左右。DockPanel會對每個子元素進行排序，並停靠在面板的一側，多個停靠在同側的元素則按順序排序，最后一個元素填充這個Panel（這個需要設置LastChildFill屬性為 True）。對於在DockPanel中的元素的停靠屬性可以通過Panel.Dock的附加屬性來設置.

<DockPanel Margin="0,0,255,145" Name="dockPanel1" Background="Yellow" LastChildFill="False">
            <Button Content="上1" Height="23" Name="button1" Width="75" DockPanel.Dock="Top" />
            <Button Content="上2" Height="23" Name="button1_1" Width="75" DockPanel.Dock="Top" />
            <Button Content="右" Height="23" Name="button2" Width="75" DockPanel.Dock="Right" />
            <Button Content="下" Height="23" Name="button3" Width="75" DockPanel.Dock="Bottom" />
            <Button Content="左" Height="23" Name="button4" Width="75" DockPanel.Dock="Left" />
            <Button Content="Last" Name="button5"/>
        </DockPanel>
        <DockPanel Margin="165,172,0,0" Name="dockPanel2" Background="Yellow">
            <Button Content="上1" Height="23" Name="button21" Width="75" DockPanel.Dock="Top" />
            <Button Content="上2" Height="23" Name="button21_1" Width="75" DockPanel.Dock="Top" />
            <Button Content="右" Height="23" Name="button22" Width="75" DockPanel.Dock="Right" />
            <Button Content="下" Height="23" Name="button23" Width="75" DockPanel.Dock="Bottom" />
            <Button Content="左" Height="23" Name="button24" Width="75" DockPanel.Dock="Left" />
            <Button Content="Last" Name="button25"/>
        </DockPanel>

 

Grid

Grid <Grid.ColumnDefinitions>列元素集和<Grid.RowDefinitions>行元素集合兩種元素組成。類似於html的table。放在Grid面板中的控件元素都必須采用附加屬性語法定義其放置所在的行和列，否則元素均默認放置在第0行第0列。

1. 固定長度——寬度不夠，會裁剪，單位pixel。
   2.自動長度——自動匹配列中最長元素的寬度。
   3.比例長度——*表示占用剩余的全部寬度；兩行都是*，將平分剩余寬度；像上面的一個2*，一個*，表示前者2/3寬度。

使用Grid.ColumnSpan和Grid.RowSpan附加屬性可以讓相互間隔的行列合並

使用GridSplit控件結合Grid控件實現類似於WinForm中SplitContainer的功能

 

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="90"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <GridSplitter Width="10" Grid.Column="1" Grid.RowSpan="3"></GridSplitter>
        <Rectangle Fill="Green" Height="60" Width="60"/>
        <Rectangle Fill="Blue" Height="60" Width="60" Grid.Column="0" Grid.Row="3"/>
        <Rectangle Fill="Red" Grid.ColumnSpan="2" Grid.Row="1"/>
    </Grid>

 

UniformGrid

均布網格的是Grid的簡化版本，每個單元格的大小相同，不用在定義行列集合。均布網格每個單元格只能容納一個元素，將自動按照定義在其內部的元素個數，自動創建行列，並通常保持相同的行列數。

 

<UniformGrid>
        <Button Content="Button" Height="23" Name="button1" Width="75" />
        <Button Content="Button" Height="23" Name="button2" Width="75" />
        <Button Content="Button" Height="23" Name="button3" Width="75" />
        <Button Content="Button" Height="23" Name="button4" Width="75" />
        <Button Content="Button" Height="23" Name="button5" Width="75" />
    </UniformGrid>

 

ViewBox

ViewBox這個控件通常和其他控件結合起來使用，是WPF中非常有用的控制。定義一個內容容器，Stretch屬性可拉伸和縮放單個子元素以填滿可用空間。一個 Viewbox 只能具有一個 Child。

<Viewbox Stretch="UniformToFill">
            <Button Content="Button" Height="23" Name="button1" Width="75" />
        </Viewbox>

 

Border

Border 是一個裝飾的控件，此控件繪制邊框及背景，在 Border 中只能有一個子控件（這個子控件又可以包含多個子控件）。

ScrollViewer

用戶界面中的內容比計算機屏幕的顯示區域大，大出的部分就會破壞原有的布局。利用 ScrollViewer 控件可以方便地使應用程序中的內容具備滾動功能。在ScrollViewer中也只能包含一個子控件

<Border BorderBrush="Red" BorderThickness="5" Height="200" Margin="56,49,147,62" Name="border1" Width="300" Background="Blue">
            <ScrollViewer Height="100" Width="200" FlowDirection="LeftToRight" Background="Lime" HorizontalContentAlignment="Left" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <Button Content="Button" Height="58" Name="button1" Width="259" FlowDirection="LeftToRight" />
            </ScrollViewer>
        </Border>

 

 

打包下載

http://files.cnblogs.com/terryzh/WPF%E5%B8%83%E5%B1%80.7z