Grid：網格布局，RowDefinitions定義行，ColumnDefinitions定義列，ShowGridLines是否展示網格線，
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" Title="MainWindow"> <Grid Name="MCGrid" Width="400" Background="LightSteelBlue" ShowGridLines="True"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="45" /> <RowDefinition Height="45" /> <RowDefinition Height="45" /> </Grid.RowDefinitions> </Grid> </Window>View Code
跟上面對比，把Width改為Auto、Height也改為Auto，同時HorizonalAlignment、VerticalAlignment改為Stretch，這樣就能體現出Stretch的延展作用，
在Grid中，使用GridSpliter分隔行，
<Grid Name="DynamicGrid" Width="466" Background="LightSteelBlue" ShowGridLines="True" Canvas.Top="119" Canvas.Left="8" Height="200"> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50*" /> <RowDefinition Height="Auto" /> <RowDefinition Height="50*" /> </Grid.RowDefinitions> <GridSplitter ResizeDirection="Rows" Grid.Column="0" Grid.ColumnSpan="10" Grid.Row="1" Width="Auto" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="0" Background="Green" /> </Grid>View Code
WrapPanel：水平方向或垂直方向分布子控制元件，設定Orientation，默認Horizonal，和StackPanel不同的是，當一行排滿了，或一列排滿了，會自動換行或者換列，
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:WpfApp1" Title="MainWindow"> <WrapPanel> <Ellipse Width="100" Height="100" Fill="Red" /> <Ellipse Width="90" Height="90" Fill="Orange" /> <Ellipse Width="80" Height="80" Fill="Yellow" /> <Ellipse Width="70" Height="70" Fill="LightGreen" /> <Ellipse Width="60" Height="60" Fill="Green" /> <Ellipse Width="50" Height="50" Fill="LightBlue" /> <Ellipse Width="40" Height="40" Fill="Blue" /> <Ellipse Width="30" Height="30" Fill="Black" /> </WrapPanel> <!--<StackPanel Orientation="Horizontal"> <Ellipse Width="100" Height="100" Fill="Red" /> <Ellipse Width="90" Height="90" Fill="Orange" /> <Ellipse Width="80" Height="80" Fill="Yellow" /> <Ellipse Width="70" Height="70" Fill="LightGreen" /> <Ellipse Width="60" Height="60" Fill="Green" /> <Ellipse Width="50" Height="50" Fill="LightBlue" /> <Ellipse Width="40" Height="40" Fill="Blue" /> <Ellipse Width="30" Height="30" Fill="Black" /> </StackPanel>--> </Window>View Code
Border：只能有一個子集，如要在內容周圍顯示邊框，必須放在父Border元素中，
屬性BorderBrush設定邊框顏色，BorderThickness設定邊框寬度，CornerRadius設定圓角程度（90度就是直線，0度就是圓），
<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Border Background="LightBlue" BorderBrush="Black" BorderThickness="20" CornerRadius="45" Padding="25" Grid.Row="0"> </Border> <Border Background="LightBlue" BorderBrush="Black" BorderThickness="20" CornerRadius="45" Padding="25" Grid.Row="1"> <Button Content="999"></Button> </Border> </Grid>View Code
BulletDecorator：將專案符號與另一個可是物件對齊，BulletDecorator有兩個屬性：bullet、child，
bullet放的是專案符號，bullet和child都只能有一個控制元件，如果 Child 物件是一個 TextBlock， Bullet 始終與第一行文本對齊，如果 Child 物件不是一個 TextBlock， Bullet 則與 Child 物件的中心對齊，（摘自https://lileltp.wordpress.com/2009/08/03/wpf%E4%B9%8B%E5%B8%83%E5%B1%80-bulletdecorator/）
<Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <BulletDecorator Grid.Row="0" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Center" Background="Yellow"> <BulletDecorator.Bullet> <Label>備注：</Label> </BulletDecorator.Bullet> <!--TextBlock為Child元素--> <!--TextWrapping文本進行換行--> <TextBlock Width="100" TextWrapping="Wrap" HorizontalAlignment="Left" Foreground="Purple"> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </TextBlock> </BulletDecorator> <BulletDecorator Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" VerticalAlignment="Center" Background="Yellow"> <BulletDecorator.Bullet> <Label>備注：</Label> </BulletDecorator.Bullet> <TextBox Text="奇葩說"></TextBox> </BulletDecorator> </Grid>View Code
Canvas:使用坐標絕對定位元素，子元素的大小需要設定，Canvas.Left指相對布局的左邊偏離多少，Canvas.Left相對布局的上面偏離多少，同理Canvas.Bottem、Canvas.Right，
<Canvas> <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red" Cursor="Cross" > <TextBox Text="5555"></TextBox> </Canvas> <Canvas Height="100" Width="100" Top="100" Canvas.Left="100" Background="Green" /> <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue" /> </Canvas>View Code
DockPanel:停靠面板，Dock="Left"停靠在左邊,Dock="Right"停靠在右邊， LastChildFill為true，則最后一個元素填充剩下的空間，
<DockPanel LastChildFill="False" HorizontalAlignment="Stretch" VerticalAlignment="Top"> <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button> <Button DockPanel.Dock="Top" Content="ButtonTop"></Button> <Button DockPanel.Dock="Right" Content="ButtonRight"></Button> <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button> <Button Content="LastButton"></Button> </DockPanel>View Code
Expander：該控制元件顯示具有可折疊內容，并可以顯示標題，當ExpandDirection為Right或Left，則不應該設定Width，Header可以是圖片、字串等，
<!--IsExpanded表示初始狀態是否疊起來--> <Expander Name="myExpander" Background="Tan" HorizontalAlignment="Right" Header="My Expander" ExpandDirection="Down" IsExpanded="False" Width="100"> <TextBlock TextWrapping="Wrap"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </TextBlock> </Expander>View Code
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/145.html
標籤：WPF