在前小節(jié)中，我們在Card程序的主界面中加入了簡單的XAML控件， 本小節(jié)將在其基礎上進行優(yōu)化，使界面看上去更加美觀。本小節(jié)用到了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方法中，我們?yōu)間ridMsg設置背景圖片。

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;。

轉載于:https://www.cnblogs.com/qixue/p/4992229.html

總結

以上是生活随笔為你收集整理的M2: XAML Controls(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。