WPF UI 设计需要自动适应窗体大小,那么Grid是非常好的布局控件。
首先看看这个控件的布局:
这个Grid是3列5行的布局, Grid里面可以包含任何子元素,因此是所有布局的首选, 还有一些其他的空间如DockPanel,Canvas,StackPanel,WarpPanel也是非常好的布局控件.
先看如下代码:
<Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="60"/> <RowDefinition Height="*"/> <RowDefinition Height="25"/> <RowDefinition Height="20"/> </Grid.RowDefinitions>
不多说,上UI全部的代码:
<Grid Background="#989898"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="60"/> <RowDefinition Height="*"/> <RowDefinition Height="25"/> <RowDefinition Height="20"/> </Grid.RowDefinitions> <Border Background="#989898" BorderBrush="#989898" BorderThickness="2,0,2,2" Margin="0,0,5.643,0" Height="24.75" VerticalAlignment="Top" Grid.ColumnSpan="3" HorizontalAlignment="Right" Width="112"> <WrapPanel> <Button Height="22.75" Name="btn_Top" Width="35" Content="T" Margin="0,0,1,0" HorizontalAlignment="Stretch" VerticalAlignment="Top"/> <Button Height="22.75" Name="btn_Min" Width="35" Content="-" Margin="0,0,1,0" HorizontalAlignment="Stretch" VerticalAlignment="Top"/> <Button Height="22.75" Name="btn_Close" Width="35" Content="X" Margin="0,0,1,0" HorizontalAlignment="Stretch" VerticalAlignment="Top"/> </WrapPanel> </Border> <DockPanel Grid.Row="1" Grid.ColumnSpan="3" Margin="7,0" Background="#989898"> <Label Height="28" Name="lblForder" Margin="7,0,0,0">Forder Path:</Label> <Button Height="23" Name="btn_Broswer" DockPanel.Dock="Right" Padding="8,3" Margin="7,0">Broswer</Button> <TextBlock Height="23" Name="tbk_ForderPath" Background="White" ForceCursor="True" Foreground="Red"/> </DockPanel> <GroupBox Grid.Row="2" Grid.ColumnSpan="3" Margin="7"> <GroupBox.Header> <WrapPanel> <TextBlock Text="{Binding ElementName= listbox1, Path=Items.Count}"/> <TextBlock Padding="2,0,0,0"> file(s) found.</TextBlock> </WrapPanel> </GroupBox.Header> <ListBox Name="listbox1" SelectionMode="Single"> <ListBox.ContextMenu> <ContextMenu> <MenuItem Name="cmi2" Header="Delete selected files" /> <MenuItem Name="cmi3" Header="Clear"/> </ContextMenu> </ListBox.ContextMenu> </ListBox> </GroupBox> <DockPanel Grid.Row="3" Margin="0" Name="dockPanel1" Grid.ColumnSpan="3"> <Label Height="28" Name="label1" Margin="7,0,0,0">Status:</Label> <Button Height="23" Name="btn_Start" DockPanel.Dock="Right" Padding="8,3" Margin="7,0">Start</Button> <TextBlock Height="23" Name="tbk_Status" Background="White" Text=""/> </DockPanel> <ProgressBar Name="pBar" Grid.Row="4" Grid.ColumnSpan="3" Visibility="Hidden" /> </Grid> </Window>
Grid.Row="" 代表在几行, Grid.Column="" 代表在几列. RowSpan,ColumnSpan 代表跨几行,几列. 和HTML的table是一样的道理.
Padding=““ Margin=”“ 这些都是定位这个位置,类似HTML的属性.
这个设置Window在屏幕中间:WindowStartupLocation="CenterScreen"
最好设置一下Window的最小大小,这样就不会把重要信息隐藏了.
MinWidth="550"
MinHeight="550"
WindowStyle="None"
下一篇:WPF 多线程处理(3)
上一篇:WPF 多线程处理(1)