Common xaml controls
常见的xaml控件:
先上一段代码,把他们基本都实现出来:
<Grid Name="MyGrid">
<Button Name="button"
Content="Button"
HorizontalAlignment="Left"
Margin="0,97,0,0"
Click="button_Click"
VerticalAlignment="Top"/>
<!--
这个一个简单的button控件,要讲的不多,
注意那个Click="button_Click"这句话定义了一个eventhandler,
可以选中button_Click然后右键转到定义去实现它。
-->
<TextBlock
FontSize="25"
Name="textBlock"
HorizontalAlignment="Left"
Margin="41,11,0,0"
TextWrapping="Wrap"
Text="TextBlock"
VerticalAlignment="Top"
Height="91"
Width="216"/>
<!--
输入的,而一个简单的textBlock的控件,没有什么可说的,
就是和textBox要区分开,textBox是负责输入的框,
而textBlock是负责显示文档的框。
-->
<TextBox Name="myTextBox"
HorizontalAlignment="Left"
Margin="0,172,0,0"
TextWrapping="Wrap"
Text="TextBox"
InputScope="Url"
VerticalAlignment="Top"
Width="109" Height="43"/>
<!--
刚刚已经说过这:textBox是负责输入的框,
而里面的InputScope="Url"这一点是用来设置当你输入时候的输入格式,
是26小键盘输入,还是数字输入,还是其他语种输入;
-->
<ComboBox Name="myComboBox"
HorizontalAlignment="Left"
Margin="0,231,0,0"
VerticalAlignment="Top"
Width="140"
Height="72"
RenderTransformOrigin="0.471,-0.237">
<ComboBoxItem Content="1" IsSelected="True"/>
<ComboBoxItem Content="2" />
<ComboBoxItem Content="3" />
<ComboBoxItem Content="4" />
<ComboBoxItem Content="5" />
<ComboBoxItem Content="6" />
</ComboBox>
<!--
ComboBox很有趣,它具有切换页面然后让你选泽的功能,
comboBox里面可以看到有很多comboBoxItem 这就是进入另一个页面待选的东西,
IsSelected表示默认选项。
-->
<CheckBox Name="myCheckBox"
Content="CheckBox"
HorizontalAlignment="Left"
Margin="222,162,0,0"
VerticalAlignment="Top"
Height="68" Width="77"/>
<!--
checkBox,就是一个勾选框。
-->
<RadioButton
Name="myFirstRadioButton"
Content="RadioButton1"
HorizontalAlignment="Left"
Margin="215,226,0,0"
VerticalAlignment="Top"
Height="56"
RenderTransformOrigin="0.5,0.5"
Width="93">
</RadioButton>
<RadioButton
Name="mySecondRadioButton"
Content="RadioButton2"
HorizontalAlignment="Left"
Margin="210,299,0,0"
VerticalAlignment="Top"
Height="60"
Width="34" RenderTransformOrigin="0.523,0.063"/>
<RadioButton
Name="myThirdRadioButton"
Content="RadioButton3"
HorizontalAlignment="Left"
Margin="210,375,0,0"
VerticalAlignment="Top"
Height="56"
RenderTransformOrigin="0.5,0.5"
Width="93"
GroupName="secondGroup"
>
</RadioButton>
<RadioButton
Name="myFourthRadioButton"
Content="RadioButton4"
HorizontalAlignment="Left"
Margin="210,450,0,0"
VerticalAlignment="Top"
Height="60"
GroupName="secondGroup"
Width="34"/>
<!--
RadioButton和checkButton差不多,也就是一个勾选栏,
然而是圆的,看起来好看,同时在功能上面,有个组的功能特别好,创建多个radioButton,
然后通过groupName不同来分组,从而达到每组只能选择一项,选择多项的功能。
-->
<DatePicker Name="myDatePicker"
HorizontalAlignment="Left"
Margin="0,305,0,0"
VerticalAlignment="Top"
/>
<!--
DatePicker这个控件就是一个显示时间的窗口
-->
<TimePicker
Name="myTimePicker"
HorizontalAlignment="Left"
Margin="0,394,0,0"
VerticalAlignment="Top"/>
<!--
timePicker这个控件就是显示具体时间的窗口
-->
<Image
Name="myImage"
Source="Assets/SmallLogo.scale-240.png"
HorizontalAlignment="Left"
Height="100"
Margin="222,358,0,0"
VerticalAlignment="Top"
Width="100"/>
<!--
image控件可以添加图片,我选的图片是Assets下的一些demo图片,
也没有学会其他加图片的方法,我将我的图片放到Assets目录下,
结果在vs解决问题资源管理器中没有显示,自然也就加载不了。这个很无奈,想学加图片
-->
<Slider
Name="mySliderControl"
HorizontalAlignment="Left"
Margin="40,482,0,0"
VerticalAlignment="Top"
Maximum="100"
Width="100"/>
<!--
slider就是一个滑条的感觉,Maximum是设置最大值的
-->
<ProgressBar
Name="myProgressBar"
HorizontalAlignment="Left"
Height="10"
Margin="41,544,0,0"
VerticalAlignment="Top"
Maximum="100"
Value="{Binding ElementName=mySliderControl,Path=Value,Mode=OneWay}"
Width="142"/>
<!--
ProgressBar是设置一个进度条,Maximum是设置进度条最大到达多少,
而Value="{Binding ElementName=mySliderControl,Path=Value,Mode=OneWay}"是指,
它bind了上面所建的slider的值。这个有待学习。
-->
<ProgressRing
Name="myProgressRing"
HorizontalAlignment="Left"
Margin="262,54,0,0"
VerticalAlignment="Top"/>
<!--
progressRing就是大家平时讨厌见到的转圈圈的progress。
-->
<ToggleButton
Name="myToggleButton"
Content="ToggleButton"
HorizontalAlignment="Left"
Click="myToggleButton_Click"
Margin="254,510,0,0"
VerticalAlignment="Top"/>
<!--
toggleButton也就一个特殊的button,我们来看一下它的eventhandler。
可以看到,就是一个可以记录自己是否被选中的button
-->
</Grid>