WPF 項(xiàng)目版本控制以及布局控件

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í)踐

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末咙俩,一起剝皮案震驚了整個(gè)濱河市坛猪,隨后出現(xiàn)的幾起案子墅茉,更是在濱河造成了極大的恐慌,老刑警劉巖就斤,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悍募,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡洋机,警方通過查閱死者的電腦和手機(jī)坠宴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绷旗,“玉大人喜鼓,你說我怎么就攤上這事∠沃” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵角骤,是天一觀的道長(zhǎng)隅忿。 經(jīng)常有香客問我,道長(zhǎng)邦尊,這世上最難降的妖魔是什么硼控? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮胳赌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘匙隔。我一直安慰自己疑苫,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著捍掺,像睡著了一般撼短。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挺勿,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天曲横,我揣著相機(jī)與錄音,去河邊找鬼不瓶。 笑死禾嫉,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蚊丐。 我是一名探鬼主播熙参,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼麦备!你這毒婦竟也來了孽椰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤凛篙,失蹤者是張志新(化名)和其女友劉穎黍匾,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體呛梆,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡锐涯,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了削彬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片全庸。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖融痛,靈堂內(nèi)的尸體忽然破棺而出壶笼,到底是詐尸還是另有隱情,我是刑警寧澤雁刷,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布覆劈,位于F島的核電站,受9級(jí)特大地震影響沛励,放射性物質(zhì)發(fā)生泄漏责语。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一目派、第九天 我趴在偏房一處隱蔽的房頂上張望坤候。 院中可真熱鬧,春花似錦企蹭、人聲如沸白筹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)徒河。三九已至系馆,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間顽照,已是汗流浹背由蘑。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留代兵,地道東北人尼酿。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像奢人,于是被迫代替她去往敵國(guó)和親谓媒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 時(shí)間如流水何乎,只能流去不流回句惯!點(diǎn)贊再看,養(yǎng)成習(xí)慣支救,這是您給我創(chuàng)作的動(dòng)力抢野!本文 Dotnet9 https://dot...
    沙漠盡頭的狼閱讀 2,150評(píng)論 0 1
  • WPF布局原則 不應(yīng)顯示設(shè)置大小 為了布局的穩(wěn)定性,控件的大小應(yīng)該可以自動(dòng)適應(yīng)容器各墨。如下為新建一個(gè)窗體指孤,默認(rèn)包含一...
    東南有大樹閱讀 19,485評(píng)論 3 12
  • 時(shí)間如流水,只能流去不流回贬堵!點(diǎn)贊再看恃轩,養(yǎng)成習(xí)慣,這是您給我創(chuàng)作的動(dòng)力黎做!本文 Dotnet9 https://dot...
    沙漠盡頭的狼閱讀 3,706評(píng)論 0 4
  • 最近項(xiàng)目需要叉跛,使用WPF編制一些簡(jiǎn)單的工具。現(xiàn)在將學(xué)習(xí)和使用過程中的一些體會(huì)記錄下來蒸殿,作為備忘筷厘。 WPF的布局與B...
    尋找無(wú)名的特質(zhì)閱讀 629評(píng)論 0 1
  • 布局和面板教程 教程數(shù)據(jù) 本教程致力于顯示GUI元素如何相對(duì)于其容器定位和調(diào)整大小。布局是各種設(shè)備上應(yīng)用程序可用性...
    YottaYuan閱讀 661評(píng)論 0 1