XAML常用控制元件2

Charles_Su發表於2021-05-24
控制元件

這節繼續講一些xaml中的常用控制元件。

佈局控制元件

除了我們之前講過的Grid，StackPanel，Border佈局控制元件，xaml中還有如下幾個佈局控制元件：

Canvas：使用這個佈局，可以通過座標來控制子控制元件的顯示。當把控制元件放到Canvas中，這個控制元件會被附加上Canvas.X和Canvas.Y屬性，我們可以根據這兩個屬性，來指定控制元件的座標，單位是畫素。wpf和WinForm中XY軸的定義是一樣的，都是從程式的左上角作為原點，原點到右上角這一條線是X軸，原點到左下角這一條線是Y軸。

DockPanel：使用這個佈局，控制元件會自動靠在DockPanel的某一條邊，通過其附加在控制元件上的DockPanel.Dock這個屬性來指定停靠在那一條邊，這個屬性是個列舉值：Top，Left，Right，Bottom。DockPanel它自身有一個非常重要的bool值屬性：LastChildFill，當這個屬性為True時，最後一個新增在該佈局控制元件中的控制元件會自動填滿剩餘空間，即使為其賦了DockPanel.Dock值，也會被無視，該屬性預設就是True，如果開發時有特殊需求自行更改為False即可。

WarpPanel：這個佈局跟StackPanel很相像，它是流式佈局，同樣是使用Orientation屬性來控制子控制元件的排列，但是比StackPanel更強大的功能是當控制元件不能在一行或者一列排開時，它會自另起一行或一列，

列表項控制元件

Menu：這個控制元件專用於選單項的顯示，使用其屬性ItemsSource繫結後臺一個集合或陣列，或者使用MenuItem以硬編碼的形式來填充一個個選單項，MenuItem的Header屬性用來控制選單項的顯示文字，該控制元件除了有click這樣的一般事件外，還有用於響應選中的Checked和Unchecked事件，以及控制選中事件是否執行的IsCheckable的屬性(該屬性預設為False)，請看下面一段程式碼：

<Menu >
    <MenuItem Header="選單項1"  IsCheckable="True" Checked="MenuItem_Checked" Unchecked="MenuItem_Unchecked"/>
    <MenuItem Header="選單項2" />
    <MenuItem Header="選單項3" />
    <MenuItem Header="選單項4" /> 
    <MenuItem Header="選單項5" /> 
</Menu>

對應後臺C#事件處理器程式碼為:

private void MenuItem_Checked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("選單1被選中了");
}

private void MenuItem_Unchecked(object sender, RoutedEventArgs e)
{
    MessageBox.Show("選單1取消選中");
}

程式執行時，當我點選選單項1時會彈出MessageBox框提示“選單1被選中了”，取消選中時會提示“選單1取消選中”，效果如下：

XAML常用控制元件2

ListBox：這個控制元件是個使用頻率很高的控制元件，用於顯示後臺一個陣列或者集合資料，同樣的也是使用其屬性ItemsSource與後臺進行資料繫結，或者使用ListboxItem以硬編碼的形式填充資料，請看程式碼：

<ListBox>
    <ListBoxItem>列表項1</ListBoxItem>
    <ListBoxItem>列表項2</ListBoxItem>
    <ListBoxItem>列表項3</ListBoxItem>
    <ListBoxItem>列表項4</ListBoxItem>
    <ListBoxItem>列表項5</ListBoxItem>
</ListBox>

XAML常用控制元件2

而且，ListBoxItem可以容納控制元件，比如Button，CheckBox，都可以往裡填充：

<ListBox> 
    <ListBoxItem>
        <Button Content="我是按鈕"/>
    </ListBoxItem> 
    <ListBoxItem>
        <CheckBox IsChecked="True"/>
    </ListBoxItem> 
</ListBox>

在這種情況下，ListBoxItem標籤就可以省略了，系統會自動進行封裝：

<ListBox> 
    <Button Content="我是按鈕"/>
    <CheckBox IsChecked="True"/>
</ListBox>

　　

DataGrid控制元件

這個控制元件就是一個表格，跟資料庫中的表是類似的，並且它的職責就是用來顯示資料庫中的資料，下面先看個例項程式碼：

<DataGrid ItemsSource="後臺資料來源">
    <DataGrid.Columns>
        <DataGridTextColumn Header="我是文字"/>
        <DataGridCheckBoxColumn Header="我是選擇框"/>
        <DataGridComboBoxColumn Header="我是下拉框"/>
        <DataGridHyperlinkColumn Header="我是超連結"/>
        <DataGridTemplateColumn Header="我是自定義列" Width="1*">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content=""/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>　

該控制元件同樣是使用ItemsSource來繫結資料，我們使用該控制元件時要先通過DataGrid.Columns來定義列的數量及型別，微軟已經為我們定義了上述程式碼中所示的文字，選擇框，下拉框，超連結四個常用列型別，根據業務需求，我們也可以通過DataGridTemplateColumn來自定義列模板。

對於該控制元件的使用，後期會詳細通過程式碼體現，如果有任何控制元件使用上的問題，您儘可以來垂詢。

 

相關文章