WPF真入门教程05--UI布局2

这一节，来学习下ComboBox下拉框，Border边框控件，Image图片控件，CheckBox复选框，这些发挥着不同的作用，是布局基础组成部分，从左侧拖控件到右边，完成以下代码：

<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"/></Grid>
</Window>

别看代码多，都是智能提示，方便很多。

第二步，在后台编写cs代码，简单的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp6
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void btncancle_Click(object sender, RoutedEventArgs e){}private void btnlogin_Click(object sender, RoutedEventArgs e){string uname = txtname.Text.Trim();string passwd = txtpass.Password.Trim();MessageBox.Show("登录成功","登录提示",MessageBoxButton.OK,MessageBoxImage.Information);}private void RadioButton_Checked(object sender, RoutedEventArgs e){string t = (sender as RadioButton).Content.ToString();MessageBox.Show(t);}private void Window_Loaded(object sender, RoutedEventArgs e){//动态添加一个单选按钮RadioButton radbtn = new RadioButton();radbtn.Content = "主任";radbtn.GroupName = "role";radbtn.HorizontalAlignment = HorizontalAlignment.Left;radbtn.VerticalAlignment = VerticalAlignment.Top;radbtn.Margin = new Thickness(375,64, 0, 0);radbtn.Checked += RadioButton_Checked;//指定事件处理mygrid.Children.Add(radbtn);//动态指定下拉框数据源List<string> listinfo = new List<string>();listinfo.Add("请选择");listinfo.Add("南京");listinfo.Add("桂林");listinfo.Add("深圳");listinfo.Add("沈阳");mycbm.ItemsSource = listinfo;mycbm.SelectedIndex =2; }private void Button_Click(object sender, RoutedEventArgs e){//获取所有勾选的复选框的内容string txt = "";foreach(UIElement ele in mygrid.Children){if(ele is CheckBox){CheckBox chk = ele as CheckBox;if(chk.IsChecked==true){                       txt += chk.Content.ToString();txt += ",";}}}MessageBox.Show(txt.TrimEnd(','));//TrimEnd去掉最后一个字符}private void Button_Click_1(object sender, RoutedEventArgs e){string[] excel = { "足球", "兰球", "铁球" };for(int i=0;i<excel.Length;i++){CheckBox chkitem = new CheckBox();chkitem.Content = excel[i];chkitem.HorizontalAlignment = HorizontalAlignment.Left;chkitem.VerticalAlignment = VerticalAlignment.Top;chkitem.Margin = new Thickness(40 + i *60, 160, 0, 0);mygrid.Children.Add(chkitem);}}private void Button_Click_2(object sender, RoutedEventArgs e){//相对路径，UriKind.Relative路径类型myimg.Source = new BitmapImage(new Uri("/images/80zj.jpg",UriKind.Relative));}private void Button_Click_3(object sender, RoutedEventArgs e){//绝对路径，AppDomain.CurrentDomain.BaseDirectory表示当前程序的运行路径myimg.Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory+"/imgs/3sk.jpg",UriKind.Absolute));}}
}

其中第2行复选框是后台动态添加的，第2个下拉框也是。代码中涉及C#基本语法，如列表List操作，所以需要有.Net基础才行。

第三步，运行程序，可以看到：