【WPF】1、 基本控件的簡介

WPF一直都是斷斷續續的使用。偶爾用到一下。但是每次間隔比較長，需要重新學習，就寫了這篇日志。以后有問題，看這個就可以了解各大概，然后針對細節再另外想辦法。

微軟的東西真心好，如果什么都不懂，可以直接用控件快速上手，如果有高級要求，可以調底層的庫，自己實現。

默認可以看到的控件

1、Border 放到其他控件內部，給其他控件畫邊框，其他容器必須支持雙標簽。

BorderBrush 邊框筆刷顏色

BorderThickness 邊框寬度

<Border
     BorderBrush="Chocolate" BorderThickness="1">
</Border>

 

2、Button 按鈕，按鈕用圖片應該設置內容為Image,而不能設置BackGroud為Image,如果只設置背景，按鈕鼠標經過樣式還在

            <Button>
                <Image Source="\images\btn.jpg"></Image>
            </Button>
    

 

3、Calendar 日歷

4、Canvas 畫布控件，用來畫圖的。也可以用來做容器用。子控件根據left/right和top/bottom來獲取相對與canvas邊界的定位。

    <Canvas >
        <Button Content="確認" Canvas.Left="305" Canvas.Top="83" Width="75"/>
        <TextBox Height="23" Canvas.Left="180" Canvas.Top="83" Width="120"/>
    </Canvas>

 

5、Checkbox 復選框

<CheckBox Margin="5" Click="點擊事件">是否需要驗證碼</CheckBox>

 

6、Combobox 下拉列表框

<UserControl x:Class="GameProject.UserControls.ColorSelector"
        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"
        mc:Ignorable="d"
             Loaded="UserControl_Loaded"
             >
    <ComboBox x:Name="box" SelectionChanged="Box_SelectionChanged" SelectedValuePath="Color">
    </ComboBox>
</UserControl>

using System.Reflection;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace GameProject.UserControls
{
    /// <summary>
    /// ColorSelector.xaml 的交互邏輯
    /// </summary>
    public partial class ColorSelector : UserControl
    {
        public class ColorComboBoxItem : ComboBoxItem
        {
            public Color Color { get; set; }
        }

        public Color SelectedColor { get; set; }

        public ColorSelector()
        {
            InitializeComponent();
        }

        private void Init()
        {
            box.Items.Add(new ComboBoxItem()
            {
                Content = "--請選擇顏色--",
                IsSelected = true
            });

            PropertyInfo[] props = typeof(Colors).GetProperties();
            foreach (PropertyInfo prop in props)
            {
                //根據Colors內顏色的個數創建ColorListBoxItem
                box.Items.Add(GetItem(prop.Name, (Color)prop.GetValue(null, null)));
            }
        }

        private ComboBoxItem GetItem(string text, Color color)
        {
            StackPanel stack = new StackPanel
            {
                Orientation = Orientation.Horizontal
            };

            //添加顏色方塊
            var rect = new Rectangle
            {
                Width = ActualWidth - 12,
                Height = ActualHeight - 12,
                Margin = new System.Windows.Thickness(2),
                Stroke = SystemColors.WindowTextBrush,
                Fill = new SolidColorBrush(color)
            };
            stack.Children.Add(rect);

            //添加TextBlock
            var particalText = new TextBlock
            {
                VerticalAlignment = VerticalAlignment.Center,
                Text = text
            };
            stack.Children.Add(particalText);

            var item = new ColorComboBoxItem()
            {
                Color = color,
                Content = stack,
            };
            return item;
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            Init();
        }

        private void Box_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var comboxItem = sender as ComboBox;
            var value = comboxItem.SelectedValue;
            if (value != null)
            {
                SelectedColor = (Color)value;
            }
        }
    }
}

 

7、ContentControl 內容控件。button、checkbox等的基類。一般控件都是現實Text中的文本，這個控件顯示Content屬性中的文本。

8、DataGrid 顯示表格數據。水很深。詳情見MSDN：https://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid(VS.100).aspx

9、DataPicker 日期選擇控件，帶日歷。

10、DockPanel 停靠布局容器。子控件就像一個個船，定義DockPanel.Dock屬性表示向上/下/左/右靠過去。如VS的布局方式大致如下：

<DockPanel>
        <!--停靠布局，讓菜單欄和工具欄位於窗口頂部-->
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="文件(F)">
                <!--菜單項為MenuItem，文字使用屬性 Header-->
                <MenuItem Header="新建">
                    <MenuItem Header="項目"></MenuItem>
                    <MenuItem Header="文件"></MenuItem>
                    <MenuItem Header="從現有代碼創建項目"></MenuItem>
                </MenuItem>
                <MenuItem Header="打開"></MenuItem>
                <MenuItem Header="起始頁"></MenuItem>
                <Separator />
                <MenuItem Header="添加"></MenuItem>
                <Separator />
                <MenuItem Header="關閉"></MenuItem>
                <MenuItem Header="關閉解決方案"></MenuItem>
            </MenuItem>
            <MenuItem Header="編輯"></MenuItem>
            <MenuItem Header="視圖"></MenuItem>
            <MenuItem Header="項目"></MenuItem>
            <MenuItem Header="生成"></MenuItem>
        </Menu>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <!--ToolBar和StatusBar就是一個容器-->
                <Button Content="&lt;-"></Button>
                <Button Content="-&gt;"></Button>
                <Separator />
                <Button Content="新建項目"></Button>
                <Button Content="打開文件"></Button>
                <Button Content="保存"></Button>
                <Button Content="全部保存"></Button>
                <Separator />
                <Button Content="撤銷"></Button>
                <Button Content="重做"></Button>
            </ToolBar>
            <ToolBar>
                <Button Content="注釋"></Button>
                <Button Content="取消對選中行的注釋"></Button>
                <Separator />
                <Button Content="在當前標簽切換書簽"></Button>
                <Button Content="將插入符號移動到上一書簽"></Button>
            </ToolBar>
           </ToolBarTray>

            <StatusBar DockPanel.Dock="Bottom" Height="20">
            <TextBlock Text="已保存的項      行 41     列 54    字符 53    Ins"></TextBlock>
        </StatusBar>
        <TextBox DockPanel.Dock="left" Text="工具箱" Width="100"></TextBox>
        <TextBox DockPanel.Dock="left" Text="MainWindow.xaml" Width="400"></TextBox>
        <TextBox DockPanel.Dock="left" Text="解決方案資源管理器"></TextBox>
    </DockPanel>

 

11、DocumentViewer

12、Ellipse 實心橢圓

13、Expander 下拉框

14、Frame 是一種支持導航的內容控件

<Frame NavigationUIVisibility="Hidden" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Content="{Binding Page}"></Frame>

 

15、Grid 網格布局控件。內部分兩部分：

<Grid.RowDefinitions>和<Grid.ColumnDefinitions>定義行列，行列的寬高有兩種表示方法，按尺寸和比例。按比例，表示方式是加 數字+*，計算方式是，如下面的例子，三個列的尺寸比是1:1:2。尺寸和比例可以混用，會先將尺寸扣除，剩下的按比例顯示。

控件部分需要指定所在行列，可以設置跨行（Grid.RowSpan屬性）和跨列（Grid.ColumnSpan屬性）。

<Grid>
        <Grid.RowDefinitions>
            <!--定義行，每個RowDefinition都是一行-->
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--定義列，每一個ColumnDefinition都是一列-->
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Button Content="Button" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="top" Width="75" />
        <Button Content="Button" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="top" Width="75"/>
        <Button Content="Button" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="top" Width="75" />
        <Button Content="Button" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="top" Width="75" />
        <Button Content="Button" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="top" Width="75"/>
        <Button Content="Button" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="top" Width="75" />
    </Grid>

 

16、GridSplitter 分割線

17、GroupBox 具有標題的容器盒子

18、Image 圖片控件 source屬性設置圖片路徑

19、Label 文本標簽 不支持換行 Content屬性內為顯示的文本

20、ListBox 列表選擇組件，可以橫向也可以豎向，能獲取選中值。可使用Separator控件做分隔符。

21、ListView 列表視圖。分視圖顯示方式（ <ListView.View>，里面放ViewBase類型的控件，如GridView控件，只能放一個）和數據源（ <ListView.ItemsSource>）兩個部分。如果只是顯示數據的，單用GridView就行了，所以這個常用與一個數據源，存在多個View的情況。提供右鍵菜單。因為涉及后台代碼，在這里，不提供demo，可以參考微軟的demo：http://download.microsoft.com/download/B/2/5/B25C4C6A-97FE-4014-9D4B-B39607BA9A12/wpf_samples/ListViewCustomView.exe。

22、MediaElement 播放視頻音頻，默認是界面上什么都沒有，需要再代碼中調用Play()方法才會播放。

23、Menu 菜單欄，一般放在頂部，如vs頂部，標題下面那排。

24、PasswordBox 密碼輸入框。輸入內容顯示為*******

25、ProgressBar 進度條。value屬性表示進度，范圍0-100

26、RadioButton 單選按鈕

27、Rectangle 實心矩形

28、RichTextBox 富文本輸入框

29、ScrollBar 滾動條。沒見過單獨用的，一般都直接再外面套一個ScrollViewer

30、ScrollViewer 帶滾動條的容器。

<ScrollViewer HorizontalAlignment="Stretch"  Name="MapscrollViewer" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
    <ScrollViewer.Content>
        <Image Name="Map"></Image>
    </ScrollViewer.Content>
</ScrollViewer>

小細節，ScrollViewer的大小和ScrollViewer.Content的大小不一致，存在間隔。

 

31、Separtor 豎向分隔線，可以用於ToolBar中分隔按鈕組。

32、Slider 滑動條，當用戶關注相對大小，而不是具體的數字時使用。常用語音量控制等。

33、StackPanel 堆疊容器。子控件每個都占一行或一列。Orientation屬性設置橫向Horizontal和豎向Vertical

34、StatusBar 狀態欄，一般放在底部，顯示各種狀態信息，如VS下面那排。

35、TabControl tab選項卡和對應容器

36、TextBlock 文本塊  Text屬性為顯示內容，TextWrapping="Wrap"表示換行顯示文本。

37、TextBox 文本框，基本控件，沒什么好解釋的

<TextBlock Name="coordinate" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"></TextBlock>

 

38、ToolBar 工具欄，單獨用時獨占一行。

39、TolBarPanel 繼承自StackPanel，工具欄容器。

40、ToolBarTray 工具欄集合，當有多個工具欄時使用。內部的ToolBar不再獨占一行。

41、TreeView 樹形視圖。

  <TreeView>
    <TreeViewItem Header="常用WPF控件" IsExpanded="True">
      <TreeViewItem Header="指針" />
      <TreeViewItem Header="Border" />
      <TreeViewItem Header="Button" />
      <TreeViewItem Header="CheckBox" />
      <TreeViewItem Header="ComboBox" />
      <TreeViewItem Header="Grid" />
      <TreeViewItem Header="Image" />
      <TreeViewItem Header="Label" />
    </TreeViewItem>
    <TreeViewItem Header="所有WPF控件" IsExpanded="True">
      <TreeViewItem Header="指針" />
      <TreeViewItem Header="Border" />
      <TreeViewItem Header="Button" />
      <TreeViewItem Header="Canvas" />
      <TreeViewItem Header="CheckBox" />
      <TreeViewItem Header="ComboBox" />
      <TreeViewItem Header="ContentControl" />
      <TreeViewItem Header="DockPanel" />
      <TreeViewItem Header="Grid" />
      <TreeViewItem Header="Image" />
      <TreeViewItem Header="Label" />
    </TreeViewItem>
    <TreeViewItem Header="常規" />
  </TreeView>

 

42、Viewbox 主要為子控件提供拉伸，縮放等功能。感覺沒什么卵用，子控件都有Stretch屬性控制拉伸的。

43、WebBrowser 內置Web瀏覽器（IE內核，不裝IE不能用）

44、WindowsFormsHost 這個里面支持WinForm控件。

45、WrapPanel 包裹塊裝元素的容器。子控件是一塊一塊的，從左往右排列，如果超過右邊框，則換行；超過下邊界，則隱藏。

    <WrapPanel Height="291" Width="542">
        <Calendar/>
        <Calendar/>
        <Calendar/>
        <Calendar/>
    </WrapPanel>

 

默認不能看到的控件

1、文檔

DocumentViewerBase 提供用於顯示固定內容或流動內容（分別由 System.Windows.Documents.FixedDocument 或 System.Windows.Documents.FlowDocument 表示）的查看器的基類。

DocumentPageView 表示已分頁 System.Windows.Documents.DocumentPage 的視區。

FlowDocumentPageViewer 表示一個用於在固定查看模式下查看流內容的控件，該模式一次顯示一頁內容。

FlowDocument 用高級文檔功能（如分頁和列）承載流內容和設置流內容格式。 定義一個文檔，文檔樣式。