WPF第一天

XAML基础

1.XAML是什么

XAML是eXtensible Application Markup Language的英文缩写，相应的中文名称为可扩展应用程序标记语言，它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。

2.XAML的语法

• 语法类似于html
• 属于xml的一种

<Button></Button>
<Button/>

3.XAML的对象元素

• 每一个标签对应一个标签对应类的对象
• 标签内的元素对应类的属性

<!--name：该按钮对应的对象名称
	Click:改按钮的点击事件
-->
 <Button Content="this is a button"
  Name="btn1" Background="Black" 
  Foreground="Red" Width="500" Height="200"
  Click="btn1_Click_1"         
></Button>

4.XAML的常用控件

1. Border

1. 中文含义：边境，边界
2. 在wpf中表示在另一个元素四周绘制边框或背景。
3. 只能包含一段嵌套内容(通常是布局面板)，并为其添加背景或在其周围添加边框。
4. 如何创建一个Border控件<Border></Border>
5. Border只能修饰一个元素，如果需要修饰多个，要在Border元素内放置一个Panel元素，然后将多个子元素放置在Panel元素中

<!--Grid继承自Panel-->
  <Border Background="LightBlue" BorderBrush="Red" BorderThickness="1"  Width="200" Height="100">
            <Grid>
                <Button Background="Transparent" Content="btn1"></Button>
                <Button Background="Transparent" Content="btn2"></Button>
            </Grid>
        </Border>

6. BorderBrush:边框画笔，给Border边框上色
7. BorderThickness：边框宽度，默认为0

<!--BorderThickness直接赋值一个数字代表四个边框的宽度都一样，也可以分开设置
	比如
	Thickness="1,1,2,5"
	对应的边框宽度为
	左 1
	上 1
	右 2
	下 5
-->
<Border Background="LightBlue" Width="200" Height="200" BorderBrush="Red" BorderThickness="2">
</Border>

8. CornerRadius 给Border导圆角，数值越大。圆角越明显

2.Label

1. 中文含义：标签
2. 在wpf中表示控件的文本标签，并提供访问密钥支持。
3. 如何创建一个Label<Label></Label>
4. Label的一些注意事项

<!--
	Content:文本内容
	Width:控件宽度
	Height：控件高度
	Background：控件背景颜色
	FontSize：字体大小
	Foreground:字体颜色
	HorizontalAlignment：水平对齐方式，默认为拉伸
	VerticalAlignment：垂直对齐方式，默认为拉伸
	HorizontalContentAlignment：文本水平对齐方式，默认为左
	VerticalContentAlignment：文本垂直对齐方式：默认为上
	Margin：外边距，默认值是一个所有属性值为0的Thickness
	当水平和垂直对齐方式都设置为居中时，Margin的值无效，只有当对齐方式设置为非居中以及拉伸未设置控件尺寸时，Margin生效。赋值方式为：Margin="左，上，右，下"或者Margin="一个数字（四个边距）"或者Margin="数字1（左右），数字2（上下）"
-->
 <Label Content="666" Width="100" Height="30" Background="Yellow" FontSize="20" Foreground="Red" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Left" VerticalAlignment="Top"  Margin="10,20,30,50"></Label>
    </Grid>

名称	含义
Top	子元素与父级布局槽的顶端对齐
Bottom	子元素与父级布局槽的底部对齐
Center	子元素与父级布局槽的中心对其
Stretch	子元素拉伸至填满父级布局槽

如上的注释和拉伸设置所有控件通用

3.TextBlock

1. 中文含义：文本块
2. 在wpf中用于显示少量流内容
3. 如何创建<TextBlock></TextBlock>
4. TextBlock的一些注意事项

<!--
	LineBreak标签：文字换行
	TextBlock设置了 Text 内容的话，如果标签内有文本，那么标签内的文本会追加到TextBlock设置的Text内容后
-->
    <TextBlock Text="1111" Background="Yellow" HorizontalAlignment="Right" VerticalAlignment="Top">
            hahaha<LineBreak></LineBreak>
            嘿嘿嘿<LineBreak></LineBreak>
            lalala
        </TextBlock>

4.Button

1. 中文含义：按钮
2. 在wpf中用于对Click事件做出响应
3. 如何创建Button<Button></Button>
4. Button的一些注意事项

<!--
	
Click:点击事件
MouseDoubleClick:鼠标双击事件

-->
<Grid >
        <Border Width="500" Height="200">
            <Grid>
                <Border CornerRadius="20" BorderThickness="1" Background="Green" BorderBrush="Black" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,50,50,50">
                    <Button Width="100" Height="50"  Content="Btn1" FontSize="20" Foreground="Red"  Background="Transparent" Click="btn1_Click"></Button>
                </Border>
                <Border CornerRadius="20" BorderThickness="1" Background="Green" BorderBrush="Black" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="50,50,50,50">
                    <Button Width="100" Height="50"  HorizontalAlignment="Center" VerticalAlignment="Top" Content="btn2" FontSize="20" Foreground="Red" Background="Transparent" Click="Button_Click_1"></Button>
                </Border>
                <Border CornerRadius="20" BorderThickness="1" Background="Green" BorderBrush="Black" Width="100" Height="50" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="50,50,50,50">
                    <Button Width="100" Height="50" HorizontalAlignment="Right" VerticalAlignment="Top" Content="btn3" FontSize="20" Foreground="Red" Background="Transparent" MouseDoubleClick="Button_MouseDoubleClick"></Button>
                </Border>
            </Grid>
                
        </Border>
    </Grid>

5. RadioButton

1. 中文含义：单选框
2. 在wpf中表示不能由用户清除的按钮
3. 如何创建一个RadioButton<RadioButton></RadioButton>
4. RadioButton的一些注意事项

<!--
	由于RadioButton为单选控件。如果不做任何处理那么在屏幕上无论出现几个RadioButton都会导致只能选择一个。解决方法如下：
	1：Border内的Radio不受外部的影响，即外部只能单选一个，但Border内的RadioButton也可以且只能选择一个
	2.使用 GroupName对RadioButton进行分组
-->
<Grid>
        <RadioButton Content="男" ></RadioButton>
        <RadioButton Content="女" HorizontalAlignment="Left" Margin="50,0,0,0"></RadioButton>
        <Border Width="500" Height="200">
            <Grid>
                <RadioButton Content="王者" ></RadioButton>
                <RadioButton Content="吃鸡" HorizontalAlignment="Left" Margin="50,0,0,0"></RadioButton>
            </Grid>
        </Border>
        <RadioButton GroupName="xx" Content="哈哈" HorizontalAlignment="Right" Margin="0,0,0,0"></RadioButton>
        <RadioButton GroupName="ZZ" Content="呵呵" HorizontalAlignment="Right" Margin="0,0,50,0"></RadioButton>
    </Grid>

6.CheckBox

1. 中文含义：复选框
2. 在wpf中表示用户可以选择和清除的控件。
3. 如何创建一个CheckBox
4. 关于CheckBox的一些注意事项

<Grid >
        <Label Width="300" Height="100" FontSize="20" Content="我喜欢玩的游戏" VerticalAlignment="Top"></Label>
        <CheckBox Width="100" Height="33" Content="赛尔号" VerticalAlignment="Top" FontSize="18" BorderBrush="Red" Margin="0,50,0,0" Name="checkBox1"/>
        <CheckBox Width="100" Height="33" Content="王者" VerticalAlignment="Top" FontSize="18" BorderBrush="Red" Margin="0,100,0,0" Name="checkBox2"/>
        <CheckBox Width="100" Height="33" Content="吃鸡" VerticalAlignment="Top" FontSize="18" BorderBrush="Red" Margin="0,150,0,0" Name="checkBox3"/>
        <Button Width="100" Height="50" FontSize="18" VerticalAlignment="Bottom" Margin="0,0,0,200" Foreground="Yellow" Content="提交" Click="Button_Click"></Button>
</Grid>

RadioButton和CheckBox的区别是
RadioButton:用户选择后其中一个后要么选择别的，要么就选选中的，必须要选一个
CheckBox:用户选择后可以自行取消勾选，可以一个也不选