WPF學習筆記 - 11 WPF Pannels - Grid, GridSplitter, UniformGrid

Grid

是最複雜的一個Panel，可以切割為許多的rows和columns，

需要設定每個rows和columns的百分比，

當許要複雜的格式，或是組合各個Panel可以使用

切成左右兩邊

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

</Grid>

此時兩個Button各會填滿左右兩邊，如果不希望這種情況發生，可以增加屬性來控制

<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>

<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>

建一個3*3的表格

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="2*" />

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="2*" />

<RowDefinition Height="1*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Column="2">Button 3</Button>

<Button Grid.Row="1">Button 4</Button>

<Button Grid.Column="1" Grid.Row="1">Button 5</Button>

<Button Grid.Column="2" Grid.Row="1">Button 6</Button>

<Button Grid.Row="2">Button 7</Button>

<Button Grid.Column="1" Grid.Row="2">Button 8</Button>

<Button Grid.Column="2" Grid.Row="2">Button 9</Button>

</Grid>

值得注意的是Width="2*"，代表這個control是Width="*"control的兩倍大(* = 1*)

在Grid裡有一種指定大小的方法

1. * - 會隨著其他control的大小，自動變化

2. Auto - 隨著control的內容，自動變化

3. 設定絕對的大小

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="100" />

</Grid.ColumnDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2 with long text</Button>

<Button Grid.Column="2">Button 3</Button>

</Grid>

使用ColumnSpan或RowSpan跨欄

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="1*" />

<ColumnDefinition Width="1*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Button>Button 1</Button>

<Button Grid.Column="1">Button 2</Button>

<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>

</Grid>

此為Two Rows、Two Columns的表格，可以發現第二個Row的button整個填滿了整個Row，

因為使用了Grid.ColumnSpan="2"

GridSplitter

可以讓使用者自行用滑鼠拉動，調整大小

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="5" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>

<GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />

<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>

</Grid>

一個簡單的留言版面

<Grid Margin="10">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Label>Name:</Label>

<TextBox Grid.Column="1" Margin="0,0,0,10" />

<Label Grid.Row="1">E-mail:</Label>

<TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />

<TextBox Grid.Row="2" Grid.ColumnSpan="2" AcceptsReturn="True" />

</Grid>

UniformGrid

與Grid相同，但每個rows和columns都是相同的size

WPF學習筆記 - 9 WPF Pannels介紹

Canvas

模仿WinForm的方式，所有的control都是絕對路徑，以Canvas的左邊和上面為基準點，

除非你希望control的位置都是固定的，不隨著視窗的大小變動，否則很少使用

WrapPanel

control會照順序排列(預設是平行排列horizontally)，直到第一行排不下，

會自動換新行，繼續排列下去

StackPanel

類似WrapPanel，每個control會接著上一個control排列下去，

差別在於StackPanel底下的每個control的大小都是最大的，

預設Orientation="Vertical"，所以每個control的寬度都跟視窗等長

DockPanel

可以設定dock位置，來指定control要貼齊哪一邊，最後一個control則會補滿剩下的空位，

通常會用在需要切割視窗的時候…例如要分為左、右兩欄

Grid

是最複雜的一個Panel，可以切割為許多的rows和columns，

需要設定每個rows和columns的百分比，

當許要複雜的格式，或是組合各個Panel可以使用

UniformGrid

與Grid相同，但每個rows和columns都是相同的size

Kendo UI MultiSelect, 連搜尋的功能都有，方便又好用~~

有時候我們會遇到一個需求，某個選項是可以複選的，並且希望還要附帶可以搜尋的功能，如果要手刻的話…實在是個大工程，今天要介紹一下Kendo UI的MultiSelect元件，輕鬆的就可以做到這件事囉~~
官網說明

1. 首先一樣要加加入Kendo UI的css和js，就不額外說明了

2.  加入tag
<select id="PeopleCC" name="PeopleCC" multiple="multiple" ></select>

3. 加入js

$("#PeopleTO").kendoMultiSelect({
                placeholder: "Select employee...",
                dataTextField: "Display",
                dataValueField: "Id",
                autoBind: false,
                filter: 'contains',
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            url: "/Alarm/GetMutiSelect",
                        }
                    }
                }
                //value: [
                //    { ProductName: "Chang", ProductID: 2 },
                //    { ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
                //]
            });

如果是一到這個頁面，就要自動進行Binding的話autoBind要記得改成true，例如在要編輯資料時，需要預設從db取出上次選擇的資料，這時如果沒有將autoBind改為true的話，MultiSelect會一直沒有資料可以選擇，因為MultiSelect是當第一次使用者點了它之後，才去做binding的動作，如果裡面已經有填資料進去，就不會binding囉

filter: 'contains'，這個選項就是開啟搜尋的功能
value: 如果需要預設值，就可以在value裡設定

使用方法非常簡單，到目前為止小艾差不說試了4、5種Kendo UI的元件了，用法上大同小異，就是設好datasource，然後指給tag就對了

Kendo UI Grid 全AJAX的CRUD功能範例

Grid有許多的套件都有提供，今天小艾要介紹一套，Kendo UI的Grid使用方式，先附上官網
Kendo UI

1.   首先套用css和javascript

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

2. 加入html
<div id="example">
    <div id="grid"></div>

</div>

3. 接下來都是javascript的處理了

設定dataSource

var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                url: "/PeopleData/PeopleList",
                dataType: "json",
                contentType: "application/json"
            },
            update: {
                type: "POST",
                url: "/PeopleData/Edit",
                dataType: "json",
                contentType: "application/json"
            },
            destroy: {
                type: "POST",
                url: "/PeopleData/Delete",
                dataType: "json",
                contentType: "application/json"
            },
            create: {
                type: "POST",
                url: "/PeopleData/Create",
                dataType: "json",
                contentType: "application/json"
            },
            parameterMap: function (data, operation) {
                if (operation === "read") {
                    return JSON.stringify({ skip: data.skip, take: data.take });
                }
                else if ((operation === "update" || operation === "create") && data) {
                    return JSON.stringify({ peopleData: data });
                }
                else if (operation === "destroy" && data.PeopleID) {
                    return JSON.stringify({ personId: data.PeopleID });
                }
                return data;
            }
        },
        //batch: true,
        schema: {
            //取出資料陣列
            data: function (d) { return d.PeopleDataList; },
            //取出資料總筆數(計算頁數用)
            total: function (d) { return d.Count; },
            model: {
                id: "PeopleID",
                fields: {
                    PeopleID: { editable: false, nullable: true },
                    CN: { validation: { required: true } },
                    Depart: { defaultValue: { DepartID: 0, DepartName: "Please wait" } },
                    Pasd: { validation: { required: true } },
                    Name: { validation: { required: true } },
                    Mail: { type: "email", validation: { required: true } },
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverSorting: true
    });

transport裡的read,update,destroy,create分別對應到讀取，修改，新增，刪除的動作。
parameterMap裡偵對不同的指令，把值傳入後端做處理。
schema設定grid顯示對應的資料，還可以加上vaildation的設定

設定好Datasource後，就要準備把資料塞給kendo ui grid了

$("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [
            "Name",
            { field: "CN", title: "CN" },
            { field: "Depart", title: "Depart", width: "180px", editor: departDropDownEditor, template: "#=Depart.DepartName#" },
            { field: "Pasd", title: "Pasd" },
            { field: "Mail", title: "Mail" },
            { command: ["edit", "destroy"], title: " ", width: "250px" }],
        editable: "inline"
    });

值得注意的是，Depart以DropDownList的方式呈現，所以需要設定departDropDownEditor，到後端去取得Depart List的資料
PS. 下面的 $('input  應該是  $('<input，不過blogger會顯示成text…所以就把 < 拿掉了，複製code時別忘了加回去哦！

function departDropDownEditor(container, options) {
        $('input data-bind="value:' + options.field + '" data-text-field="DepartName" data-value-field="DepartID" required="" />')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            type: "POST",
                            url: "/PeopleData/GetDepartList",
                            dataType: "json",
                            contentType: "application/json"
                        },
                    }
                }
            });
    }

departDropDownEditor去後端取出資料後，把name和id bind給list就大功告成囉！！簡單明瞭，出來的效果也不錯，完全不需要導頁，全AJAX就搞定CRUD功能。

附上範例程式：請點我

最後推薦個新創日本求職網站

TRAILS - 日本求職軌跡

FB粉絲團

Trails會慢慢的提供一些有用的資訊給想到日本去工作的朋友，只要簡單的註冊會員後就可以免費看文章，找工作囉~~目前日本企業職缺正在募集中，會陸陸續續更新上來！