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基础才行。

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

 

这一波操作又成功了，百尺杆头进了一小步，看来要加辣条和啤酒了。