控件是咱们的门面,控件有很多,但是如果仔细去分析,也是有规律可循的,根据其作用,我们可以把控件分类,日常工作中我们打交道最多的控件无外乎6类:
1、布局控件:是可以容纳多个控件或者嵌套其他布局的控件,用于在UI上组织和排列控件。Grid、StackPanel、DockPanel等控件都属此类,它们拥有共同的父类为Panel。
2、内容控件:只能容纳一个控件或者布局控件作为他的内容。Window、Button等控件属于此类,因为只能容纳一个控件作为其内容,所以经常借助布局控件来规划其内容。它们的共同父类是ContentControl。
3、带标题内容控件:相当于一个内容控件,但是可以加一个标题(Header),标题部分亦可容纳一个控件或者布局,GroupBox、TabItem等是这类控件的典型代表。它们的共同父类是HeaderedContentControl。
4、条目控件:可以显示一列数据,一般情况下这列数据的类型是相同的。此类控件包括ListBox、ComboBox等。它们额共同基类是ItemsControl。此类控件在显示集合类型数据方面功能比较强大。
5、带标题条目控件:相当于一个条目控件加上一个标题显示区。TreeViewItem、MenuItem都属于此类控件。这类控件往往用于显示层级关系数据,结点显示在其Header区域,子级结点则显示在其条目控件区域。此类控件的共同基类是HeaderdeItemsControl。
6、特殊内容控件:比如TextBox容纳的是字符串、TextBlock可以容纳可自由控制格式的文本、Image容纳图片类型数据等。这类控件相对比较独立,但也比较常用。
这节操作下WrapPanel控件,它将内容进行水平或垂直排列元素,当元素个数过多时,会自动换行或换列来进行排列,来看看下面的示意,应该能明白吧。
在上节代码基础上,拖入一个WrapPanel控件,及Border,完整代码是:
<Window x:Class="WpfApp6.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:WpfApp6"
mc:Ignorable="d"
Title="WPF基础控件" Height="758.275" Width="1078.5" Icon="images/22i.jpg" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded">
<Grid Name="mygrid" >
<Button Name="btnlogin" IsDefault="True" Click="btnlogin_Click" Background="YellowGreen" BorderThickness="3" BorderBrush="Red" Content="登录" HorizontalAlignment="Left" Margin="166,95,0,0" VerticalAlignment="Top" Width="74" RenderTransformOrigin="-0.2,0.368"/>
<Label Content="帐号" HorizontalAlignment="Left" HorizontalContentAlignment="Center" Margin="54,23,0,0" VerticalAlignment="Top" Width="102"/>
<TextBox Name="txtname" HorizontalAlignment="Left" Height="23" Margin="142,23,0,0" TextWrapping="Wrap" Text="admin" VerticalAlignment="Top" Width="120"/>
<Label Content="密码" HorizontalAlignment="Left" Margin="276,23,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.088,0.6"/>
<PasswordBox Name="txtpass" HorizontalAlignment="Left" Height="22" Margin="330,23,0,0" Password="123456" PasswordChar="#" VerticalAlignment="Top" Width="120"/>
<Button Name="btncancle" IsCancel="True" Foreground="Chartreuse" FontSize="14" Click="btncancle_Click" Content="取消" HorizontalAlignment="Left" Margin="266,95,0,0" VerticalAlignment="Top" Width="74">
<Button.Background>
<ImageBrush ImageSource="images/32s.jpg"></ImageBrush>
</Button.Background>
</Button>
<RadioButton Content="老师" GroupName="role" HorizontalAlignment="Left" Margin="156,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
<RadioButton Content="学生" GroupName="role" HorizontalAlignment="Left" Margin="230,65,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.14,0.357" Checked="RadioButton_Checked"/>
<RadioButton Content="管理员" GroupName="role" HorizontalAlignment="Left" Margin="303,65,0,0" VerticalAlignment="Top" Checked="RadioButton_Checked"/>
<!-- IsThreeState属性指定 ToggleButton 是否有两种或三种状态:true,false,null,即选中 、清除 和不确定-->
<CheckBox Content="汽车" Name="chkexcel" IsChecked="True" IsThreeState="True" HorizontalAlignment="Left" Margin="45,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="阅读" HorizontalAlignment="Left" Margin="118,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="唱歌" HorizontalAlignment="Left" Margin="181,138,0,0" VerticalAlignment="Top"/>
<CheckBox Content="体育" HorizontalAlignment="Left" Margin="241,138,0,0" VerticalAlignment="Top"/>
<Button Content="获取复选框" HorizontalAlignment="Left" Margin="301,135,0,0" VerticalAlignment="Top" Width="91" Click="Button_Click"/>
<Button Content="创建复选框" HorizontalAlignment="Left" Margin="409,134,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<!--Image图片控件,Stretch指定拉伸模式 -->
<Image HorizontalAlignment="Left" Name="myimg" Height="83" Margin="45,184,0,0" VerticalAlignment="Top" Width="85" Source="images/6p.jpg" Stretch="Fill" RenderTransformOrigin="0.541,0.157"/>
<Button Content="相对替换" HorizontalAlignment="Left" Margin="152,187,0,0" VerticalAlignment="Top" Width="69" Height="32" Click="Button_Click_2"/>
<Button Content="绝对替换" HorizontalAlignment="Left" Margin="152,240,0,0" VerticalAlignment="Top" Width="69" Height="28" RenderTransformOrigin="0.536,0.815" Click="Button_Click_3"/>
<!-- Border边框控件,与布局面板一起使用,里面只能有一个子元素,BorderThickness边框粗细,BorderBrush边框颜色,CornerRadius圆角大小,Background背景色-->
<Border BorderBrush="red" BorderThickness="3" HorizontalAlignment="Left" Height="32" Margin="266,184,0,0" VerticalAlignment="Top" Width="100">
<Label Content="我有边框" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border BorderBrush="BlueViolet" BorderThickness="5" CornerRadius="9" Background="Bisque" HorizontalAlignment="Left" Height="38" Margin="266,229,0,0" VerticalAlignment="Top" Width="100">
<Label Content="我有圆角" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="16,1,16,3"/>
</Border>
<!--ComboBox下拉框,IsDropDownOpen指定是否展开,默认不展开 -->
<ComboBox HorizontalAlignment="Left" Name="hecbm" IsDropDownOpen="False" Margin="403,187,0,0" VerticalAlignment="Top" Width="81" Height="22">
<ComboBoxItem Content="请选择" IsSelected="True" Background="#FF26D365"/>
<ComboBoxItem Content="亚洲"/>
<ComboBoxItem Content="非洲"/>
<ComboBoxItem Content="欧洲"/>
</ComboBox>
<ComboBox Name="mycbm" HorizontalAlignment="Left" Margin="403,241,0,0" VerticalAlignment="Top" Width="81" Height="27" RenderTransformOrigin="0.247,0.481"/>
<ListBox HorizontalAlignment="Left" Height="95" Margin="45,290,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.21,0.484">
<ListBoxItem Content="茶杯" IsSelected="True"/>
<ListBoxItem Content="茶叶"/>
<ListBoxItem Content="茶水"/>
<ListBoxItem Content="茶桌"/>
</ListBox>
<ListBox Name="mylist" HorizontalAlignment="Left" Height="95" Margin="166,290,0,0" VerticalAlignment="Top" Width="100"/>
<!-- DatePicker日期控件-->
<DatePicker Focusable="False" HorizontalAlignment="Left" Margin="301,290,0,0" VerticalAlignment="Top" Width="106" SelectedDateFormat="Long" />
<!--Slider 滑动控件,Orientation刻度方向(默认水平),TickPlacement刻度位置(默认没有):both/left/right/none,TickFrequency刻度间隔,IsSnapToTickEnabled表示数值变化形式(true代表整形,false代表浮点)-->
<Slider Name="sd1" HorizontalAlignment="Left" Margin="303,327,0,0" TickPlacement="Both" TickFrequency="1" IsSnapToTickEnabled="true" Maximum="100" Minimum="1" Value="1" VerticalAlignment="Top" Width="104"/>
<!--Label控件, Content指定内容:Binding绑定,ElementName绑定控件名称,Path绑定控件的value值,Mode=OneWay指单向影响-->
<Label Content="当前值:" HorizontalAlignment="Left" Margin="304,362,0,0" VerticalAlignment="Top"/>
<Label Content="{Binding ElementName=sd1,Path=Value,Mode=OneWay}" Name="mylbl" HorizontalAlignment="Left" Margin="360,362,0,0" VerticalAlignment="Top" Width="47"/>
<Slider HorizontalAlignment="Left" Name="sd2" Margin="421,282,0,0" TickPlacement="BottomRight" TickFrequency="5" Orientation="Vertical" Maximum="100" Minimum="1" Value="10" VerticalAlignment="Top" Height="103" Width="33" Background="#FFCCFB2D" BorderBrush="#FF4118B0"/>
<!--TextBlock文字块 -->
<TextBlock FontSize="{Binding ElementName=sd2,Path=Value,Mode=OneWay}" HorizontalAlignment="Left" Margin="459,290,0,0" TextWrapping="Wrap" Text="看我" VerticalAlignment="Top" Height="86" Width="61"/>
<!--ProgressBar进度条:Orientation方向(Horizontal/Vertical,水平/垂直),IsIndeterminate指定连续进度 -->
<ProgressBar Orientation="Horizontal" IsIndeterminate="true" Value="30" HorizontalAlignment="Left" Height="18" Margin="48,394,0,0" VerticalAlignment="Top" Width="327"/>
<ProgressBar Name="ps2" Orientation="Vertical" Value="0" Minimum="0" Maximum="120" HorizontalAlignment="Left" Height="149" Margin="402,394,0,0" VerticalAlignment="Top" Width="29"/>
<Button Content="加载进度" HorizontalAlignment="Left" Margin="441,434,0,0" VerticalAlignment="Top" Width="60" Click="Button_Click_4"/>
<Label Content="当前:" HorizontalAlignment="Left" Margin="438,469,0,0" VerticalAlignment="Top"/>
<Label Content="" Name="ps2lbl" HorizontalAlignment="Left" Margin="474,469,0,0" VerticalAlignment="Top"/>
<!--StackPanel堆栈布局控件,默认对齐是垂直方向 -->
<Label Content="堆积面板 (StackPanel)" HorizontalAlignment="Left" Margin="54,422,0,0" VerticalAlignment="Top" RenderTransformOrigin="-3.825,0.04"/>
<StackPanel HorizontalAlignment="Left" Height="109" Cursor="ArrowCD" Margin="56,446,0,0" VerticalAlignment="Top" Width="143">
<Button>吉利</Button>
<Button>长城</Button>
<Button Margin="0,2,0,2">奇瑞</Button>
<Button>红旗</Button>
<Button>比亚迪</Button>
</StackPanel>
<Border BorderBrush="Crimson" BorderThickness="1" HorizontalAlignment="Left" Height="92" Margin="219,450,0,0" VerticalAlignment="Top" Width="154">
<StackPanel Margin="0,0,0,0" Orientation="Horizontal" >
<Button Margin="5,0,5,0" Background="#FFA6C321">华山</Button>
<Button Margin="5,0,5,0">峨眉</Button>
<Button Margin="5,0,5,0">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFF7F0EA" Offset="1"/>
</LinearGradientBrush>
</Button.Background> 昆山
</Button>
<Button Margin="5,0,5,0">武当</Button>
</StackPanel>
</Border>
<Label Content="换行面板 (WrapPanel)" HorizontalAlignment="Left" Margin="54,555,0,0" VerticalAlignment="Top"/>
<!--WrapPanel流布局控件,默认对齐是垂直方向,Orientation元素布局方式 -->
<Border BorderBrush="red" BorderThickness="4" CornerRadius="12" Margin="56,560,569,26" Height="100">
<WrapPanel Orientation="Horizontal" ItemHeight="30" ItemWidth="40" Margin="0,0,0,22" >
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="海王星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
<Button Content="森林星"/>
</WrapPanel>
</Border>
</Grid>
</Window>
运行程序之后,可以看到效果,
行走江湖,口号要震天。