Windows Phone 8.1中的Border-蒲公英云

开篇之前，照例推荐王磊老师的关于Windows 8.1内容控件和容器控件的讲解，很有帮助

链接：重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup

在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>