M2: XAML Controls(2)

在前小节中，我们在Card程序的主界面中加入了简单的XAML控件， 本小节将在其基础上进行优化，使界面看上去更加美观。本小节用到了Grid Control, Border Control，以及XAML控件的VerticalAlignment，HorizontalAlignment，Padding， Margin， TextWrapping等属性。

打开Card程序，右键单击Assets文件夹，选择Add， Existing Item…， 选择一张JPG图片（我们这里的图片名称为background.jpg)，这张图片将用作贺卡的背景。单击Add按钮。 切换到MainPage.xaml页面，定位到StackPanel控件， 为StackPanel添加Padding属性。 分别为Button1和Button2添加Margin属性，修改后代码如下：

<StackPanel Orientation="Horizontal" Grid.Row="1" Padding="4">
    <Button x:Name="btnSendMail" Content="Send to Friend" Grid.Row="1" Margin="4"/>
    <Button x:Name="btnGetMessage" Content="Get a Wishes" Grid.Row="1" Click="GetMessage_Click" Margin="4"/>
</StackPanel>

定位到TextBlock Control，新添加FontSize属性和“，并设置水平居中对齐。

<TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center"  TextWrapping="Wrap"/>

在页面上新添加一个Border Control，将TextBlock包裹。并设置Border的透明度属性Opacity, 背景属性Background, 垂直对齐属性VerticalAlignment， 修改后代码如下：

<Border Opacity="0.8" Background="White" VerticalAlignment="Center">
    <TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center"  TextWrapping="Wrap"/>
</Border>

在页面上新添加一个Grid Control, 将其放在Grid第一行，Grid用于显示贺卡的背景。

<Grid x:Name="gridMsg" Grid.Row="0" >            
    <Border Opacity="0.8" Background="White" VerticalAlignment="Center">
        <TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center"  TextWrapping="Wrap"/>
    </Border>
</Grid>

再返回到MainPage.xaml.cs页面， 在构造方法中加入Loaded事件， 在Loaded方法中，我们为gridMsg设置背景图片。

public MainPage()
{
    this.InitializeComponent();
    this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    ImageBrush imageBrush = new ImageBrush();
    imageBrush.ImageSource = new BitmapImage(new Uri(@"ms-appx:///Assets/background.jpg"));
    imageBrush.Stretch = Stretch.UniformToFill;
    gridMsg.Background = imageBrush;
}

其中，使用BitmapImage前要引入命名空间using Windows.UI.Xaml.Media.Imaging;。