Common xaml controls（补交作业）

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>