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"/>

<!--

RadioButtoncheckButton差不多,也就是一个勾选栏,

然而是圆的,看起来好看,同时在功能上面,有个组的功能特别好,创建多个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>

posted @ 2015-04-28 18:11  闫文雄  阅读(196)  评论(0编辑  收藏  举报