WPF基础学习第一天

格式

1.XAML格式：

<Button x:Name="btnClick" Content="按钮" HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click" />

与

<Button x:Name="btnClick"  HorizontalAlignment="Left" Margin="45,94,0,0" VerticalAlignment="Top" Width="75" Click="btnClick_Click">
            <Button.Content>按钮</Button.Content>
        </Button>

是一样的，第二种，第一种，一般用于写常规的属性，第二种，一般用于写比较复杂的属性

常用控件或属性

2.Visibility属相：表示控件是否可见，但是枚举类型，Collapsed不可见，Visible可见

3.TextWrapping属性：指定文本在到达包含框的边缘时是否换行,Wrap换行，NoWrap不换行

4.MaxLength属性：可在文本框中手动输入的最大字符数

5.密码输入框控件：PasswordBox ，读写密码的属性为：Password

6.可空数据类型：引用类型

不可空的数据类型：值类型

注意：在不可null类型后面加"?"就可以为null了，例如：

int? i = null;//编译器就不会报错

简单解析：

int 和 int? 是不同的类型，int是不可为null，int?是可为null，如果把为null的赋值给不可为null的，编译器会出错：

但可以通过类型转换,使可为null的赋值给不可为null的，但前提是，可为null的对象必须要有值

比如：CheckBox控件的属性IsChecked，返回类型为bool?：

if ((bool)checkBox1.IsChecked)
            {
                MessageBox.Show("选中了");
            }

//或者
if (checkBox1.IsChecked == true)//系统自动转换
            {
                MessageBox.Show("选中了");
            }

7.GroupName属性：可为单选按钮等设置不同的组，这样就会避免了在一个界面中，放入多个单选按钮后只能选择其一

8.DatePicker控件：日期选择器

DateTime? dt = datePicker1.SelectedDate;
 if (dt == null)
   {
        MessageBox.Show("没有选择日期，请选择");
    }
    else
   {
        MessageBox.Show(dt.ToString());
    }                            

9.Image控件的Source属性，能够指定图片的位置

10.ProgressBar控件：进度条控件，常用属性有：Minimum最小值,Maximum最大值,Value初始值,IsIndeterminate不确定模式（当设置为true的时候，进度条会不断地自动循环）

常用布局

11.StackPanel堆栈布局（组件是水平或垂直的）

<Grid>
        <Button Margin="0,0,456,132">
            <Button.Content><!--Button控件的Content属相的值本来是只能一个的，但如果想设置多个的时候，可以使用布局-->
                <StackPanel Orientation="Horizontal"><!--组件排列方向：水平-->
                    <Image Width="100" Height="100" Source="1.jpg"></Image>
                    <TextBlock VerticalAlignment="Center" Text="戒指"></TextBlock><!--垂直方向中间显示，文字为戒指-->
                </StackPanel>
            </Button.Content>
        </Button>
</Grid>

12.Grid网格布局

“第一行第一列”，在Grid布局中为“0行0列”，放置的控件，默认放置的位置是“0行0列”

<Grid>
        <Grid>
            <Grid.ColumnDefinitions><!--列定义，设置了4列-->
                <ColumnDefinition Width="150"></ColumnDefinition><!--指定第一列的宽度为150-->
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions><!--行定义，设置了4行-->
                <RowDefinition Height="150"></RowDefinition><!--指定第一行的高度为150-->
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <!--以下是设置布局里面的子控件-->
            <Button Content="测试按钮" Grid.Row="1" Grid.Column="1"></Button><!--默认位置是第0行第0列;可采用附加属性的写法，指定控件的位置-->
            <TextBlock Text="keenleung" Background="Blue" Grid.Column="0" Grid.Row="0"></TextBlock>
            <Image Source="1.jpg" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"></Image><!--位置为2行0列,占据2列-->
            <Button Content="测试按钮2" Grid.Row="2" Grid.Column="2" Grid.RowSpan="2"></Button><!--位置为2行2列,占据2行-->
        </Grid>
    </Grid>

一个简单的登陆界面：

<Grid>
        <Grid>
            <!--一个简单的登陆界面-->
            <Grid.RowDefinitions><!--行定义,以下设置了3行-->
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions><!--列定义，以下设置了2列-->
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock Text="用户名：" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock><!--该控件水平和垂直方向上都是居中显示-->
            <TextBox Grid.Column="1" Margin="15"></TextBox>
            <TextBlock Text="密码：" VerticalAlignment="Center"  HorizontalAlignment="Center" Grid.Row="1"></TextBlock>
            <PasswordBox Grid.Row="1" Grid.Column="1" Margin="15"></PasswordBox><!--Margin控制控件边距的大小-->
            <Button Content="确定" Grid.Row="2" Margin="15"></Button>
            <Button Content="取消" Grid.Column="2" Grid.Row="2" Margin="15"></Button>
        </Grid>
    </Grid>

结果视图：

13.通过代码往布局里面添加控件

<Grid>
        <StackPanel Name="stp1" MouseDown="stp1_MouseDown" MouseEnter="stp1_MouseEnter"></StackPanel>
    </Grid>

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            Button btn = new Button();
            btn.Content = "第1个按钮";
            stp1.Children.Add(btn);//往布局里通过代码添加控件
        }

14.通过代码设置Grid布局的行数和列数，并且添加控件

 /// <summary>
        /// 通过代码设置Grid布局的行数和列数，并且添加控件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            //先设置Grid布局为几行和几列
            for (int t = ; t < ; t++)//10行10列
            {
                RowDefinition rd = new RowDefinition();
                grid1.RowDefinitions.Add(rd);

                ColumnDefinition cd = new ColumnDefinition();
                grid1.ColumnDefinitions.Add(cd);
            }
            //往布局里面放控件,假如放置的都是Button控件
            for (int i = ; i < ; i++)
            {
                for (int j = ; j < ; j++)
                {
                    Button btn = new Button();
                    btn.Content = i + "," + j;

                    //通过代码修改Grid.Row和Grid.Column属性
                    Grid.SetRow(btn, i);
                    Grid.SetColumn(btn, j);

                    grid1.Children.Add(btn);
                }
            }
        }

结果视图：

15.如果想加入的是图片，以下代码做参考：

//前面的代码不变
  Image img = new Image();
//代码给Source属性赋值
img.Source = new BitmapImage(new Uri("1.jpg", UriKind.Relative));
Grid.SetRow(img, i);
Grid.SetColumn(img, j);
grid1.Children.Add(img);

16.如果是随机选取图片呢？

 //往布局里面放控件,假如放置的都是随机选取的图片(前面的代码不变)
            Random random = new Random();
            for (int i = ; i < ; i++)
            {
                for (int j = ; j < ; j++)
                {
                    int imgNum = random.Next(, );//随机选取图片

                    Image img = new Image();
                    //代码给Source属性赋值
                    img.Source = new BitmapImage(new Uri("images/" + imgNum + ".jpg", UriKind.Relative));
                    //通过代码修改Grid.Row和Grid.Column属性
                    Grid.SetRow(img, i);
                    Grid.SetColumn(img, j);
                    grid1.Children.Add(img);
                }
            }

结果：

16.布局的嵌套

<Window x:Class="布局的嵌套.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="顶层布局的按钮" Grid.Row="1" Grid.Column="1"></Button>
            <StackPanel><!--在Grid顶层布局里面嵌套一个StackPanel布局-->
                <Button Content="内层StackPanel布局里的按钮"></Button>
                <Button Content="内层StackPanel布局里的按钮"></Button>
                <Button Content="内层StackPanel布局里的按钮"></Button>
            </StackPanel>
            <Grid Grid.Column="1"><!--在Grid顶层布局里面嵌套一个Grid布局-->
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button Content="内层Grid里的按钮"></Button>
            </Grid>
        </Grid>
    </Grid>
</Window>

视图：

练习

17.模拟一个简单计算器的界面(采取8行5列)

code:

 <Window x:Class="一个计算器的简单布局.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="MainWindow" Height="323" Width="228">
     <Grid>
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="20"></RowDefinition>
                 <RowDefinition Height="60"></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
                 <RowDefinition></RowDefinition>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
                 <ColumnDefinition></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <Menu HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="220" Grid.ColumnSpan="5">
                 <MenuItem Header="查看"></MenuItem>
                 <MenuItem Header="编辑"></MenuItem>
                 <MenuItem Header="帮助"></MenuItem>
             </Menu>
             <TextBox Grid.Row="1" Grid.ColumnSpan="10" Margin="5,10,5,0" IsReadOnly="True"></TextBox><!--Margin是”左上右下“这样的一个顺序-->
             <Button Content="MC" Grid.Row="2" Width="34" Height="27"></Button>
             <Button Content="MR" Grid.Row="2" Grid.Column="1" Width="34" Height="27"></Button>
             <Button Content="MS" Grid.Row="2" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Content="M+" Grid.Row="2" Grid.Column="3" Width="34" Height="27"></Button>
             <Button Content="M-" Grid.Row="2" Grid.Column="4" Width="34" Height="27"></Button>
             <Button Grid.Row="3" Grid.Column="0" Width="34" Height="27">
                 <Button.Background>
                     <ImageBrush ImageSource="images/boult.png"></ImageBrush>
                 </Button.Background>
             </Button>
             <Button Content="CE" Grid.Row="3" Grid.Column="1" Width="34" Height="27"></Button>
             <Button Content="C" Grid.Row="3" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Grid.Row="3" Grid.Column="3" Width="34" Height="27">
                 <Button.Background>
                     <ImageBrush ImageSource="images/+-.png"></ImageBrush>
                 </Button.Background>
             </Button>
             <Button Grid.Row="3" Grid.Column="4" Width="34" Height="27">
                 <Button.Background>
                     <ImageBrush ImageSource="images/3.png"></ImageBrush>
                 </Button.Background>
             </Button>
             <Button Content="7" Grid.Row="4" Grid.Column="0" Width="34" Height="27"></Button>
             <Button Content="8" Grid.Row="4" Grid.Column="1" Width="34" Height="27"></Button>
             <Button Content="9" Grid.Row="4" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Content="/" Grid.Row="4" Grid.Column="3" Width="34" Height="27"></Button>
             <Button Content="%" Grid.Row="4" Grid.Column="4" Width="34" Height="27"></Button>
             <Button Content="4" Grid.Row="5" Grid.Column="0" Width="34" Height="27"></Button>
             <Button Content="5" Grid.Row="5" Grid.Column="1" Width="34" Height="27"></Button>
             <Button Content="6" Grid.Row="5" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Content="*" Grid.Row="5" Grid.Column="3" Width="34" Height="27"></Button>
             <Button Grid.Row="5" Grid.Column="4" Width="34" Height="27">
                 <Button.Background>
                     <ImageBrush ImageSource="images/4.png"></ImageBrush>
                 </Button.Background>
             </Button>
             <Button Content="1" Grid.Row="6" Grid.Column="0" Width="34" Height="27"></Button>
             <Button Content="2" Grid.Row="6" Grid.Column="1" Width="34" Height="27"></Button>
             <Button Content="3" Grid.Row="6" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Content="-" Grid.Row="6" Grid.Column="3" Width="34" Height="27"></Button>
             <Button Content="=" Grid.Row="6" Grid.Column="4" Width="34" Height="59.5" Grid.RowSpan="2"></Button>
             <Button Content="0" Grid.Row="7" Grid.Column="0" Width="78" Height="27" Grid.ColumnSpan="2"></Button>
             <Button Content="." Grid.Row="7" Grid.Column="2" Width="34" Height="27"></Button>
             <Button Content="+" Grid.Row="7" Grid.Column="3" Width="34" Height="27"></Button>
         </Grid>
     </Grid>
 </Window>