开篇之前,照例推荐王磊老师的关于Windows 8.1内容控件和容器控件的讲解,很有帮助
在Windows Phone 8.1中的Border和Frame的用法和在Windows 8.1中几乎一模一样,但是不管怎样,好记忆不如多练
练,练习之后才发现有些东西不是那么理所当然的,而且一些细节在练习的时候也会显现出来,这一点我深有感触
好了,废话不多说了,进入正题吧。
首先是Border--边框控件,当然Border字面是就是边框,一旦叫做框了,自然可以被当做容器来“框”东西了
a.Child属性 ----- 存放Border框住的内容
b.BorderThickness ---- 边框的宽度
当然设置宽度的值就有意思了,有多种i设置方法
如:BorderThickness=“5” -------- 上下左右都是5px
BorderThickness="5,10" ------- 左右为5px,上下为10px
BorderThickness="5,10,15,20" ------ 左边框为5px,上为10px,右为15px,下为20px
c.BorderBrush ----- 边框的画笔,说的简单点就是边框的颜色
注意可以设置为纯色,如Red,Green等
也可以设置图片哦,用图像画刷ImageBrush
d.Background ----- 边框内容的背景画笔,一样,可以纯色,可以图片
e.CornerRadius ----- 边框角的半径,说的通俗点,就像HTML5中的Border的Radius属性
这个属性很有意思,看我下面的第三个Border就知道了
当CornerRadius 的值为Border的宽度的一半时,会变成一个圆哦(前提是Border的长宽是一样)
f.ChildTransitions ----- 说是主题过渡,我没试出来啥效果,所以这里我就不误导大家了,我这个也不是很
明白
g.Width和Height ----- 这个不用说了,Border的宽和高
好了,终于可以贴代码了大家将就着看吧
我一共写了3个Border,这样才有对比性
<Page
x:Class="TestUnion.BorderDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestUnion"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Storyboard x:Name="story">
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Duration="0:0:5" AutoReverse="True"
Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<LinearDoubleKeyFrame KeyTime="0:0:5" Value="360" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--设置背景,边框画刷(边框颜色),边框宽度(4个数)-->
<Border Background="Green" BorderBrush="Red"
BorderThickness="5,10,15,20">
<Border.Child>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--这边为了实现那个第三个Border的BorderThickness大小不断变化而写的Slider,TextBox-->
<!--如果看不懂的话,可以略过,跟Border没什么大关系,不影响对Border的认识-->
<!--如果要理解也不难,只要弄懂绑定就可以了,什么Binding path=**,Element=**,Mode=**-->
<Slider Grid.Row="0" x:Name="slider" Maximum="50" Minimum="1" Value="25" Width="200"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox x:Name="txtBox" Grid.Row="1" Width="200" Text="{Binding Path=Value,ElementName=slider,Mode=OneWay}" FontSize="15" />
</Grid>
</Border.Child>
</Border>
<!--设置背景,边框画刷,边框宽度(1个数),最重要的是CornerRadius属性-->
<Border Grid.Row="1" Background="Blue" BorderBrush="Yellow"
BorderThickness="5" CornerRadius="25">
<Grid>
<TextBlock Text="也可以直接在bordr里面写,默认是在border的child里面的"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="30" TextWrapping="Wrap"/>
</Grid>
</Border>
<!--设置背景,边框画刷(图片),边框宽度(绑定Slider的值)-->
<Border Grid.Row="2" Background="Coral"
BorderThickness="{Binding ElementName=txtBox,Path=Text,Mode=OneWay}" CornerRadius="100" Width="200" Height="200"
RenderTransformOrigin="0.5,0.5">
<Border.BorderBrush>
<ImageBrush ImageSource="Assets/food.jpg" />
</Border.BorderBrush>
<Border.RenderTransform>
<RotateTransform x:Name="rotate" />
</Border.RenderTransform>
<TextBlock Text="Food" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</Page>
运行截图:
初始界面:
调节Slider,取两个极端,一个是1,一个是50:
同时我们可以不通过调节Slider,直接在TextBox里面输入数值也可以改变Border的BorderThickess值
在TextBox值输入100:
怎么样,感觉很好玩吧。実に おもしろい