继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

8天入门wpf—— 第六天 细说控件

慕勒551688
关注TA
已关注
手记 250
粉丝 39
获赞 133

     

       这篇我们来大概的看一下WPF的各种神马控件,首先我们要知道所有的wpf控件都是继承自Control,从用途上可以分为四种

         1:内容控件(Content Controls)

         2:条目控件(Items Controls)

         3:文本控件(Text Controls)

         4:范围控件(Range Controls)

 

一:内容控件

    内容控件的最大的特征就是有一个Content属性,从前面的文章中,我们多多少少也知道Content接收的是一个Object类型,或许

我们会立即想到莫非Button就是一个内容控件,确实,Button算是一个内容控件,凡是内容控件都继承自ContentControl,因为

Content属性就是属于ContentControl。

 

1:ButonBase

     要说Button,我们需要从ButtonBase说起,首先看一下类图。

<1>Button

  从图中我们可以看出,Button是继承自ButtonBase的,Button有个很有趣的地方就是ButtonBase中存在一个ClickMode属性,

什么意思呢?也就是说Click事件是用什么方式触发?触发方式在ClickMode中以枚举的方式展现,Hover,Press和Release,默认

也就是Press。

那么下面我用Hover的形式来触发Click事件,蛮有意思的,嘿嘿。

复制代码

1 <Window x:Class="ButtonDemo.MainWindow"2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4         Title="MainWindow" Height="350" Width="525">5     <Grid>6         <Button Content="Button" Height="23" IsDefault="True" Margin="124,77,304,211" ClickMode="Hover" Name="button1"  Width="75" Click="button1_Click" />7     </Grid>8 </Window>

复制代码

 

<2>RepeatButton

    首先这玩意我们在webform或者winform中貌似都没有见过,在wpf中也是一个新增的控件,那么它的用途是什么呢?很简单,我们在

看video的时候都有“快进”,“快退”,你懂的,首先我们看下RepeatButton中的定义,我们发现有一个

Delay:作用就是按下时第一次触发Click的时间延迟,

Interval:每次click发生的时间间隔,如果大家玩转了Timer控件都应该很清楚。

复制代码

 1 <Window x:Class="RepeatButtonDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Canvas> 6         <TextBox Canvas.Left="151" Canvas.Top="69" Height="33" Name="textBox1" Width="172" Text="0" /> 7         <RepeatButton x:Name="test" Delay="100" Click="test_Click" Width="172" 8                       Content="确定" Height="61" Canvas.Left="151" Canvas.Top="121" /> 9     </Canvas>10 </Window>

复制代码复制代码

 1 namespace RepeatButtonDemo 2 { 3     /// <summary> 4     /// MainWindow.xaml 的交互逻辑 5     /// </summary> 6     public partial class MainWindow : Window 7     { 8         public MainWindow() 9         {10             InitializeComponent();11         }12 13         private void test_Click(object sender, RoutedEventArgs e)14         {15             var num = Convert.ToInt32(textBox1.Text);16 17             textBox1.Text = (++num).ToString();18         }19     }20 }

复制代码

 

<3>GridViewColumnHeader

   这个是与GridView控件一起搭配使用,放在后面一起讲。

 

<4>ToggleButton

     从图中我们看到ToggleButton是CheckBox和RadioButton的基类,大家一看,这玩意我们早就会了,是的,大家都会,这里我就说

点有新鲜味道的东西,首先我们看下ToggleButton的类定义。

嘿嘿,兴趣点来了,怎么IsChecked是可空类型?而且还存在王八IsThreeState属性,难道还有第三种状态?是的,这是在Html

中没有的,这里我们要知道,实际上我们最终的UI呈现的要么是CheckBox,要么是Radiobutton,要使第三种状态有效,我们只

需要设置IsThreeState属性和Indeterminate事件即可。

复制代码

1 <Window x:Class="CheckBoxDemo.MainWindow"2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4         Title="MainWindow" Height="350" Width="525">5     <Grid>6         <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="96,137,0,0" Name="checkBox1" VerticalAlignment="Top" IsThreeState="True" Indeterminate="checkBox1_Checked" />7     </Grid>8 </Window>

复制代码复制代码

 1 namespace CheckBoxDemo 2 { 3     /// <summary> 4     /// MainWindow.xaml 的交互逻辑 5     /// </summary> 6     public partial class MainWindow : Window 7     { 8         public MainWindow() 9         {10             InitializeComponent();11         }12 13         private void checkBox1_Checked(object sender, RoutedEventArgs e)14         {15             MessageBox.Show("不错");16         }17     }18 }

复制代码

 

2: HeaderedContentControl

    顾名思义,这是一个带有标题的内容控件,或许大家第一个反应过来的估计就是GroupBox,是的,这玩意我们在Html中用的太多了,

老规矩,我们还是看看类图。

<1> Expander

     首先得要申明,Expander是wpf中新增的一个控件,在html中我们经常会看到一个伸缩控件,折叠起来只能看到标题,伸展开才能

看到内容,继续上代码说话。

复制代码

 1 <Window x:Class="ExpanderDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Grid> 6         <Expander Header="年龄组" Height="208" Margin="39,33,154,70" Name="expander1" Width="310"> 7             <StackPanel> 8                 <RadioButton Content="RadioButton1" Height="16" Name="radioButton1" /> 9                 <RadioButton Content="RadioButton2" Height="16"  Name="radioButton2" />10             </StackPanel>11         </Expander>12 13     </Grid>14 </Window>

复制代码

<2> GroupBox

       关于GroupBox的使用,我想我也不用罗嗦了,太简单不过了。

<3>TabItem

       TabItem控件是与TabControl控件搭配使用,这个放到条目控件上说。

 

3:ToolTip

    首先我们要知道ToolTip也是继承自ContentControl,在使用ToolTip的时候我们要注意两点。

<1>: ToolTip有点特殊,它不能独立的作为一个控件使用,而是与其他具体控件的ToolTip联合使用。

<2>:ToolTip提供了一个ToolTipSerivce类,可用于设计Tooltip显示的相对位置,提示时间,嘿嘿,蛮有意思。

复制代码

 1 <Window x:Class="ToolTipDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Grid> 6         <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="130,103,0,0" Name="button1" VerticalAlignment="Top" Width="75"  7                 ToolTipService.HorizontalOffset="20" 8                 ToolTipService.VerticalOffset="20" > 9             <Button.ToolTip>10                 <StackPanel>11                     <GroupBox Header="XXX选择题,你懂得...">12                         <GroupBox.Content>13                             <StackPanel>14                                 <TextBlock x:Name="A">A:XXXX</TextBlock>15                                 <TextBlock x:Name="B">B:XX</TextBlock>16                                 <TextBlock x:Name="C">C:OOOO</TextBlock>17                                 <TextBlock x:Name="D">D:OO</TextBlock>18                             </StackPanel>19                         </GroupBox.Content>20                     </GroupBox>21                 </StackPanel>22             </Button.ToolTip>23         </Button>24     </Grid>25 </Window>

复制代码

4:ScrollViewer

   在内容控件中很常用的一个莫过于ScrollViewer,因为我们在界面布局时,永远都是“内容”大于界面,那么内容超出了我们该怎么办呢?

我们知道Html中Div具有裁剪功能,当内容超出,自动就有滚动条,那么在wpf中的ScrollViewer也能够实现同样的功能。

复制代码

 1 <Window x:Class="ScrollViewerDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Grid> 6         <ScrollViewer Height="108" HorizontalAlignment="Left" Margin="98,63,0,0" 7                       Name="scrollViewer1" VerticalAlignment="Top" Width="224"  8                       VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> 9             <StackPanel x:Name="Test" Orientation="Horizontal">10 11             </StackPanel>12         </ScrollViewer>13     </Grid>14 </Window>

复制代码复制代码

 1 namespace ScrollViewerDemo 2 { 3     /// <summary> 4     /// MainWindow.xaml 的交互逻辑 5     /// </summary> 6     public partial class MainWindow : Window 7     { 8         public MainWindow() 9         {10             InitializeComponent();11 12             for (int i = 0; i < 100; i++)13             {14                 TextBox tbx = new TextBox();15 16                 tbx.Text = i.ToString();17 18                 Test.Children.Add(tbx);19             }20         }21     }22 }

复制代码

二:条目控件

   条目控件首先都是继承自ItemsControl,在ItemsControl中我们发现有两个比较有意思的属性,Items和ItemsSource。

 

Items:

从图中可以看出Items属于ItemCollection的集合类型,所以每一个Item里面都可以放入一个Object类型对象,这里有意思的地方就是,

如果我放入的是一个UI元素,那么很好,wpf会调用UI的OnRender方法将UI元素呈现,如果说是一个没有OnRender方法的元素,那该

怎么办呢?wpf很智能,它会创建一个TextBlock,然后调用该对象的ToString()将字符串呈现在TextBlock上。

 

ItemsSource:

从前面文章中我们也看到,ItemsSource常用于数据绑定,所以是一个非常实用的属性。

 

好,接下来我们看一下条目控件的类图

从图中,我们大致可以看出这些控件可以分为两大类。

第一类:就是“条目容器”,比如Menu。

第二类:就是“具体条目”,比如MenuItem,但是在MenuItem中又可以分为“带标题”和“不带标题”的两类具体条目”。

 

<1>MenuBase

    从图中我们可以看出MenuBase的子类有两个Menu和ContextMenu,在Winform中我想大家肯定玩烂了,这里我也不多说了。

 

<2>Selector

既然是选择性的控件,那么难免少不了SelectedIndex或者SelectedItem,可以我们反应就是Listbox,嘿嘿,关于ListBox

和ComboBox这里就不多说了,我们具体的还是看下TabControl和ListView,先还是看下Selector类中的定义。

 

TabControl:

  这个控件我们在Html中用的还是比较多的,顾名思义就是选项卡,因为我们知道用ListBox是很占用空间的,而TabControl是具有更小的

地方展现更多的内容,其实TabControl的每一个标签页都是一个TabItem。

复制代码

 1 <Window x:Class="TabControlDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Grid> 6         <TabControl Height="100" HorizontalAlignment="Left" Margin="103,51,0,0" 7                     Name="tabControl1" VerticalAlignment="Top" Width="200" 8                      TabStripPlacement="Top" > 9             <TabItem Header="星期一" Name="tabItem1">10                 <TabItem.Content>11                     <TextBlock x:Name="test1" Text="你懂的"/>12                 </TabItem.Content>13             </TabItem>14             <TabItem Header="星期一" Name="tabItem2">15                 <TabItem.Content>16                     <TextBlock x:Name="test2" Text="你不懂的"/>17                 </TabItem.Content>18             </TabItem>19         </TabControl>20     </Grid>21 </Window>

复制代码

ListView:

这个控件我们在实际开发中经常用于数据绑定,它是继承自ListBox,ListBox默认只能显示一列,而ListView则可以用于显示多列,

这里我提一个很有兴趣的玩意ObservableCollection<T>。它有什么用呢?其实ObservableCollection可以允许一个UI元素作为观察者

对它进行监视,也就是说如果ObservableCollection中的元素有变动,作为观察的UI元素也会相应的改变,下面举个例子。

复制代码

 1 <Window x:Class="ListViewDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         DataContext="{Binding RelativeSource={RelativeSource Self}}" 5         Title="MainWindow" Height="350" Width="525"> 6     <Grid> 7         <ListView ItemsSource="{Binding PersonList}"> 8             <ListView.View> 9                 <GridView>10                     <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Path=Name}"/>11                     <GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Path=Age}"/>12                 </GridView>13             </ListView.View>14         </ListView>15         <Button Content="删除一行" Click="Button_Click" Margin="315,174,35,103" />16     </Grid>17 </Window>

复制代码复制代码

 1 namespace ListViewDemo 2 { 3     /// <summary> 4     /// MainWindow.xaml 的交互逻辑 5     /// </summary> 6     public partial class MainWindow : Window 7     { 8         private ObservableCollection<Person> personList = new ObservableCollection<Person>(); 9 10         public ObservableCollection<Person> PersonList11         {12             get { return personList; }13             set { personList = value; }14         }15 16         public MainWindow()17         {18             InitializeComponent();19 20             personList.Add(new Person() { Name = "一线码农", Age = 24 });21 22             personList.Add(new Person() { Name = "XXX", Age = 21 });23         }24 25         private void Button_Click(object sender, RoutedEventArgs e)26         {27             personList.RemoveAt(0);28         }29     }30 31     public class Person32     {33         public string Name { get; set; }34 35         public int Age { get; set; }36     }37 }

复制代码

                     <====  单击删除一行后  ====>

 

<3>StatusBar

关于状态栏控件,我想大家在WinForm中已经玩烂了,此处也就不多说了。

 

<4>TreeView

我们知道TreeView是一个树形控件,在Html中如果想展现一个树形结构,我们只要将数据结构“深度优先”一下就OK了,关于

TreeView的数据绑定,我的前一篇文章也说过,这里也就走马观花一下。

 

三:文本控件

在wpf中,文本控件有三个,分别是:TextBox,RichTextBox和PasswordBox,先不管怎么样,上类图

这几个控件,我想在winform中用的还是比较熟的,这里也就不罗嗦了。

 

四:范围控件

还是先上图:

下面我们看看RangeBase的类定义:

图中可以看出RangeBase是一个抽象类,定义了4个基本属性:LargeChange,SmallChange,Maximum,Minimum,有了这些东西

我们才能方便快捷的使用范围控件。

 

<1> ScrollBar

在先前的例子中,我们经常用一个控件来绑定ScrollBar的Value来形成联动,也就可以避免在后台的不必要代码,灵活方便。

复制代码

 1 <Window x:Class="ScrollBar.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="350" Width="525"> 5     <Grid> 6         <StackPanel Height="100" Margin="97,61,206,150" Name="stackPanel1" Width="200"> 7             <ScrollBar Name="test" Orientation="Horizontal" Maximum="100" Minimum="5" SmallChange="2" Height="17" Width="186" /> 8             <Label Content="滑动块值"/> 9             <TextBox Name="txtScrollValue" Text="{Binding ElementName=test, Path=Value}"/>10         </StackPanel>11     </Grid>12 </Window>

复制代码

 

<2>ProgressBar

  这个控件我们在实际应用上使用的还是比较多的,因为我们在完成一个任务时,可能需要等待数十秒或者数分钟,所以为了不让用户认为

系统处于假死状态,就要用一个等待进度条,这里有意思的地方就是,如果我们不知道任务何时完成或者说不在乎任务何时结束,我们可以

设一个无限等待的进度条,也就是说进度条上有一个“小矩形”在不停的滚动,我们要做的也就是设置IsIndeterminate=true即可。

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP