WPF 布局

最近項目需要权她,使用WPF編制一些簡單的工具∶朊罚現(xiàn)在將學習和使用過程中的一些體會記錄下來,作為備忘纳击。

WPF的布局與Bootstrap 的網(wǎng)格布局有些類似,通過使用Grid將區(qū)域劃分為若干網(wǎng)格攻臀,然后在網(wǎng)格中放置控件焕数。WPF的控件屬性與WinForm的有相似的地方,都可以在后臺代碼中修改屬性的內(nèi)容刨啸,也可以在頁面描述中定義模板和需要與后臺模型的綁定屬性堡赔。所不同的是WPF中控件模板的定義更靈活,但同時也更復雜设联,綁定功能更強大善已,但同時語法也更復雜。這里簡單總結(jié)一下离例,便于以后查詢應用雕拼。

Grid布局

使用Grid嵌套進行布局,可以定義基本的頁面粘招,下面的布局是基本的布局樣式:

<Window x:Class="WpfLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfLayout"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <!--定義Grid的行啥寇,定義2行-->
            <!--第一行放Toolbar-->
            <RowDefinition Height="40"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--定義Grid的列,定義1列-->
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ToolBar Grid.Column="0" Grid.Row="0">
            <Button>
                <Image   Source="Images/ToolbarImg/File.png" Width="32" Height="32"></Image>
            </Button>
        </ToolBar>
        <Grid  Grid.Column="0" Grid.Row="1">
            <Grid.RowDefinitions>
                <!--定義Grid的行洒扎,定義1行-->
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <!--定義Grid的列辑甜,定義2列-->
                <ColumnDefinition Width="200"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Grid.Row="0" Grid.Column="0" BorderThickness="0" >
                <TreeView >

                </TreeView>
            </Border>
            <GridSplitter Width="5"> </GridSplitter>
            <Border Grid.Row="0" Grid.Column="1" Width="auto"  >
                <Grid >

                </Grid>
            </Border>
        </Grid>
    </Grid>
</Window>

DockPanel布局

需要注意的是:DockPanel布局中最后一個控件填充剩余區(qū)域,而不是按從上到下的順序:

<Grid>
        <DockPanel>
            <!--团劾洌靠布局磷醋,讓菜單欄和工具欄位于窗口頂部-->
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="File">
                    <!--菜單項為MenuItem,文字使用屬性 Header-->
                    <MenuItem Name="menuOpen" Header="Open" Click="menuOpen_Click"></MenuItem>
                    <MenuItem Header="Save"></MenuItem>
                    <MenuItem Header="Delete"></MenuItem>
                </MenuItem>
                <MenuItem Header="Edit"></MenuItem>
                <MenuItem Header="View"></MenuItem>
                <MenuItem Header="About"></MenuItem>
            </Menu>
            <ToolBar DockPanel.Dock="Top">
                <!--ToolBar和StatusBar就是一個容器-->
                <Button Content="Save"></Button>
                <Button Content="SaveAll"></Button>
                <Button Content="FileExplorer"></Button>
                <Button Content="Start"></Button>
                <Button Content="Test"></Button>
            </ToolBar>
            <StatusBar  DockPanel.Dock="Bottom"  >
                 <TextBlock Text="statusBar"></TextBlock>
            </StatusBar>
            <!--Grid最后加入胡诗,填充剩余區(qū)域-->
            <Grid>
                
            </Grid>
            
        </DockPanel>
    </Grid>

Canvas

支持坐標定位邓线,在控件中使用Canvas.Left,Canvas.Top,Canvas.Right和Canvas.Bottom進行定位煌恢。

StackPanel

順序排列控件骇陈,橫向或者縱向,設置Orientation屬性為Horizontal或Vertical瑰抵。

WrapPanel

可以規(guī)定控件具有統(tǒng)一的寬度和高度你雌,并且超出范圍可以換行,也支持橫向或縱向排列二汛。

  • Orientation:這就像StackPanel中的Orientation屬性婿崭,唯一不同的是默認值為Horizontal拨拓。當Horizontal Orientation看上去類似于Windows資源管理器的縮略圖視圖:元素是從左向右排列的,然后自上至下自動換行氓栈。Vertical Orientation看上去類似于Windows資源管理器的列表視圖:元素是從上向下排列的渣磷,然后從左至右自動換行。
  • ItemHeight:所有子元素都一致的高度授瘦。每個子元素填充高度的方式取決于它的VerticalAlignment屬性醋界、Height屬性等。任何比ItemHeight高的元素都將被截斷奥务。
  • ItemWidth:所有子元素都一致的寬度物独。每個子元素填充高度的方式取決于它的VerticalAlignment屬性、Width屬性等氯葬。任何比ItemWidth高的元素都將被截斷挡篓。
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市帚称,隨后出現(xiàn)的幾起案子官研,更是在濱河造成了極大的恐慌,老刑警劉巖闯睹,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件戏羽,死亡現(xiàn)場離奇詭異,居然都是意外死亡楼吃,警方通過查閱死者的電腦和手機始花,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來孩锡,“玉大人酷宵,你說我怎么就攤上這事」埽” “怎么了浇垦?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長荣挨。 經(jīng)常有香客問我男韧,道長,這世上最難降的妖魔是什么默垄? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任此虑,我火速辦了婚禮,結(jié)果婚禮上厕倍,老公的妹妹穿的比我還像新娘寡壮。我一直安慰自己,他們只是感情好讹弯,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布况既。 她就那樣靜靜地躺著,像睡著了一般组民。 火紅的嫁衣襯著肌膚如雪棒仍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天臭胜,我揣著相機與錄音莫其,去河邊找鬼。 笑死耸三,一個胖子當著我的面吹牛乱陡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仪壮,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼憨颠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了积锅?” 一聲冷哼從身側(cè)響起爽彤,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缚陷,沒想到半個月后适篙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡箫爷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年嚷节,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片虎锚。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡硫痰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出翁都,到底是詐尸還是另有隱情碍论,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布柄慰,位于F島的核電站鳍悠,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏坐搔。R本人自食惡果不足惜藏研,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望概行。 院中可真熱鬧蠢挡,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至勤家,卻和暖如春腹尖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背伐脖。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工热幔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人讼庇。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓绎巨,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蠕啄。 傳聞我的和親對象是個殘疾皇子场勤,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

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

  • WPF布局原則 不應顯示設置大小 為了布局的穩(wěn)定性,控件的大小應該可以自動適應容器介汹。如下為新建一個窗體却嗡,默認包含一...
    東南有大樹閱讀 19,485評論 3 12
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,449評論 0 17
  • CSS Grid(網(wǎng)格) 布局(又稱為 “Grid(網(wǎng)格)” )嘹承,是一個二維的基于網(wǎng)格的布局系統(tǒng)它的目標是完全改變...
    諾CIUM閱讀 1,309評論 0 3
  • 文/樊夢潔 人不是孤島,就算是島骤竹,它也在大洋的底部跟世界發(fā)生著關聯(lián)帝牡。 01 我體型偏瘦,鑒于天生的優(yōu)勢蒙揣,在自己的朋...
    樊飯飯閱讀 1,184評論 21 21
  • 春風十里揚州路靶溜,卷上珠簾總不如。
    扎西多吉閱讀 99評論 0 0