首先讲的是容器控件Grid
看代码:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="184*" />
<RowDefinition Height="178*" />
<RowDefinition Height="245*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="162"/>
<ColumnDefinition Width="186"/>
<ColumnDefinition Width="132*" />
</Grid.ColumnDefinitions>
<Image Name="image1" Grid.Column="0" Grid.Row="0" Stretch="Fill" Source="Images/image1.jpg"/>
<Image Name="image2" Grid.Column="1" Grid.Row="1" Stretch="Fill" Source="Images/image2.jpg" />
<Image Name="image3" Grid.Column="2" Grid.Row="2" Stretch="Fill" Source="Images/image3.jpg" />
</Grid>
注意点:Image控件自己的大小,对其等格式优先级高于网格的格式,也就是如果Image自己有大小等格式,那么图片会超出网格定义的大小,上面的代码就是为了所有的提片全都显示在网格之内所以才把Image自身的格式全部都删除的
Canvas控件
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,0,0">
<Canvas x:Name="Canvas1">
<Image Canvas.Left="100" Canvas.Top="76" Height="150" Name="image1" Stretch="Fill" Width="200" Source="Images/image1.jpg" Canvas.ZIndex="2"/>
<Image Canvas.Left="204" Canvas.Top="186" Height="150" Name="image2" Stretch="Fill" Width="200" Source="Images/image2.jpg"/>
</Canvas>
</Grid>
注意点:对于此控件与Grid的区别我就看出多了一个Z轴,其他的至今还没看出来,感觉它们同属于容器控件,发挥的作用很是形似。
StackPanel控件
<StackPanel Orientation="Horizontal" Width="400" Height="300">
<Image Stretch="Fill" Source="Images/image1.jpg"/>
<StackPanel Orientation="Vertical">
<TextBlock Text="llo world 1" />
<TextBlock Text="llo world 1" />
<TextBlock Text="llo world 1" />
</StackPanel>
</StackPanel>
注意点:这个控件就是用来组织子控件的排列方式的,是水平或者是垂直,有一点跟Grid不一样,里面的Image控件大小若果超出了StackPanel控件定义的大小,超出部分将被隐藏
Border控件
<Border Width="300"
Height="300"
BorderBrush="Blue"
Background="Pink"
BorderThickness="10"
CornerRadius="20,200,20,20">
<TextBox Width="400"
Height="100"
VerticalAlignment="Bottom"
Background="Pink"
BorderBrush="Pink">
</TextBox>
</Border>
注意点:该空间的目的就是加一个边框,从上面的代码可以看出该控件的几个常用的属性,边框颜色,背景颜色,边框圆角,边框粗细。它的子控件的大小如果大于它,那么还是按Border的大小说了算,注意调整子控件的不同属性,已达到与边框控件合二为一的效果。
Popup控件
<Popup IsOpen="True"
Width="400"
Height="500">
<Canvas Background="Pink"
Width="300"
Height="400">
<TextBlock Text="hello world"/>
</Canvas>
</Popup>
注意点:该控件本身是不会有任何显示效果的,他就是控制内部的控件的开关,如果IsOpen="True"那内部控件就是看见的,反之就是不可见的,如果它的内部不定义任何控件,是看不到该控件本身的
ScrollView控件
<ScrollViewer Width="300"
Height="300"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="Images/image1.jpg" Width="333" Height="500" />
</ScrollViewer>
注意点:把内部的图片调整到本来的大小,超出部分会被上下滑动而出来,记得加上HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"这两条属性
Button控件
<Button Width="200" Height="100"
Margin="145,128,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
BorderBrush="Yellow"
Background="Blue"
Content="hello world"
Foreground="Red"
>
</Button>
<Button Width="200" Height="100"
Margin="145,400,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left"
>
<Button.Background>
<ImageBrush ImageSource="Images/image2.jpg"/>
</Button.Background>
</Button>
注意点:该控件是最常用的了,其中的margin单独使用是通过四个方向来定位的,但是加上 VerticalAlignment="Top" ,HorizontalAlignment="Left"这两个属性后就只在左侧和上侧设置了,就像这样Margin="145,400,0,0"
RepeatButton控件
<RepeatButton Height="111" HorizontalAlignment="Left" Margin="60,366,0,0" Name="repeatButton1" VerticalAlignment="Top" Width="321" Click="repeatButton1_Click" />
只要按着按钮一直不放就会一直触发Click事件
ToggleButton控件
<ToggleButton Width="200" Height="70"
Checked="Checked_1"
Unchecked="Checked_2"
Indeterminate="Checked_3"/>
该控件有连续的三个事件响应,点击一次触发Checked_1,点击两次Checked_2,点击第三次的时候触发Checked_3