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>

运行截图：

初始界面：

调节Slider,取两个极端，一个是1，一个是50：

                           

同时我们可以不通过调节Slider，直接在TextBox里面输入数值也可以改变Border的BorderThickess值

在TextBox值输入100：

怎么样，感觉很好玩吧。実に　おもしろい