WPF 總結(jié)
一撇簿、內(nèi)容版本控制
1补疑、項(xiàng)目?jī)?nèi)容管理的必要性
項(xiàng)目開發(fā):項(xiàng)目立項(xiàng)-->代碼開發(fā)-->運(yùn)維 產(chǎn)生很多文檔
2、常見的版本控制工具
Git/SVN
3、Git與GitHub/GitLab
4锹杈、代碼管理實(shí)操
二竭望、界面布局控件
1咬清、從應(yīng)用開發(fā)流程說起
WPF:業(yè)務(wù)邏輯
UI:窗口/控件
2旧烧、桌面應(yīng)用的窗口布局
3、WPF布局原理與夠原則
不用顯示的方式設(shè)定元素的尺寸
不用屏幕坐標(biāo)來指定位置 4平委、WPF常用布局控件與布局構(gòu)成
-
Gride 特點(diǎn): 功能強(qiáng)大廉赔,布局靈活的容器
兩行四列表格
<Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2">提交</Button> </Grid> 屬性備注: Width= "auto" 列寬自適應(yīng) MinWidth 最小寬度 MaxWidth 最大寬度 Height="auto" 行高自適應(yīng) MinHeight 最小高度 MaxHeight 最大高度 Grid.Column 按鈕所在哪列 從0開始 Grid.Row 按鈕所在哪行 從0開始 Grid.ColumnSpan 跨列 從當(dāng)前列往右跨 Grid.RowSpan 跨行 從當(dāng)前行往下跨
項(xiàng)目中常用的列表數(shù)據(jù)布局:
<Grid Background="Orange" Grid.IsSharedSizeScope="True"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> </Grid.RowDefinitions> <!--表頭--> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="100" SharedSizeGroup="A"> </ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">用戶名</TextBlock></Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">郵箱號(hào)</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15">狀態(tài)</TextBlock> </Border> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter> </Grid> <!--數(shù)據(jù)--> <Grid Grid.Row="1" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="A"></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">小明</TextBlock> </Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">1142105884@qq.com</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15" >注銷</TextBlock> </Border> </Grid> </Grid> 備注: Grid.IsSharedSizeScope="True" :允許尺寸共享 SharedSizeGroup="A" :設(shè)置尺寸共享列 (哪一列和哪一列共享 [表頭和數(shù)據(jù)列都得加]) //設(shè)置列拖動(dòng)塊 <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter>
StackPanel
-
<StackPanel Orientation="Horizontal"> <Border> <TextBlock>首頁(yè)</TextBlock></Border> <Border> <TextBlock>首頁(yè)</TextBlock> </Border> <Border> <TextBlock>首頁(yè)</TextBlock> </Border> </StackPanel> 備注: Orientation="Horizontal" :橫向排列 Orientation="Vertical" :豎向排列
使用場(chǎng)景:無(wú)處不在,工具欄 ToolBar笆环、菜單欄
缺點(diǎn):不換行
-
DockPanel 【容器】 通過Dock驮炅樱靠進(jìn)行布局账忘。 附加屬性: DockPanel.Dock Top/ LastChildFill :true/false 最后一個(gè)控件是否填充剩余的空間。
<DockPanel LastChildFill="True"> <Button Content="button1" DockPanel.Dock="Top"></Button> <Button Content="button2" DockPanel.Dock="Bottom"></Button> <Button Content="button3" ></Button> <Button Content="button4" DockPanel.Dock="Right"></Button> <Button Content="button5" ></Button> </DockPanel> 備注:DockPanel.Dock="Top" :button 頂部 這個(gè)屬性是DockPanel里面的。 LastChildFill="True" : 最后一個(gè)控件是否填充剩余的空間戳稽。
使用場(chǎng)景:功能區(qū)域劃分
-
WrapPanel 唯一一個(gè)不能被gride替代的布局控件期升。 主要屬性:Orientation :Horizontal/Vertical 可以換行 使用場(chǎng)景: 界面圖標(biāo)式布局
<WrapPanel Orientation="Horizontal"> <Button Content="button" Width="100"></Button> <Button Content="button1" Width="150"></Button> <Button Content="button2" Width="50"></Button> <Button Content="button3" Width="80"></Button> </WrapPanel>
-
UniformGride 另一種風(fēng)格布局颂郎,自動(dòng)生成統(tǒng)一一致的行列
主要屬性:Rows="5" Columns="2"
使用場(chǎng)景:儀表盤 駕駛艙
<UniformGrid Rows="5" Columns="2"> <Button Content="button1"></Button> <Button Content="button2"></Button> <Button Content="button3"></Button> <Button Content="button4"></Button> <Button Content="button5"></Button> <Button Content="button6"></Button> <Button Content="button7"></Button> <Button Content="button8"></Button> <Button Content="button9"></Button> </UniformGrid>
-
Canvas 通過精確坐標(biāo)定位子元素 主要配置屬性:Canvas.Top/Left/Right/Bottom 使用場(chǎng)景:編輯場(chǎng)景(組態(tài))
<Canvas > <Button Content="button1" Canvas.Top="200" ></Button> <Button Content="button2" Canvas.Top="20" Canvas.Left="400"></Button> <Button Content="button3"></Button> </Canvas>
InkCanvas
支持任意筆畫的輸入控件
使用場(chǎng)景:畫板
<InkCanvas EditingMode="Ink">
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Red" Width="10"></DrawingAttributes>
</InkCanvas.DefaultDrawingAttributes>
<Button Content="button1" InkCanvas.Top="50"></Button>
<Button Content="button2" InkCanvas.Left="100"></Button>
<Button Content="button3"></Button>
</InkCanvas>
EditingMode="Ink" 手寫筆畫
EditingMode="Select" 放大控件
EditingMode="GestureOnly"
Strokes :獲取筆畫
DefaultDrawingAttributes :設(shè)置筆畫的顏色與寬度
Border
最基礎(chǔ)的裝飾控件
主要屬性配置: CornerRadius 設(shè)置圓角
使用場(chǎng)景:繪制邊線以及背景色 圓角 使用頻繁
<Border CornerRadius="4">
<Grid>
</Grid>
</Border>
擴(kuò)展布局控件
TabControl TabItem TabPanel
Toolbar Panel ToolbarOverflowPanel
VirtualizingStackPanel(虛擬化的StackPanel) 性能優(yōu)
特殊容器
Scrollviewer
GroupBox
Expander
5寺酪、布局原理與自定義實(shí)踐
從布局原理到布局過程
所有布局控件都有自己的特定方式
都是繼承自Panel
兩個(gè)過程:測(cè)量+排列
6寄雀、布局實(shí)踐