[Windows 8 App]顯示訊息的控制項-----TextBlock、Image

2013-12-03

[Windows 8 App]顯示訊息的控制項-----TextBlock、Image、Popup

TextBlock控制項

TextBlock控制項是很常使用的一種控制項

主要功能是用來顯示文字內容

還能根據需求將顯示的提示訊息設置成不同的大小和樣式

TextBlock的常用屬性

屬性	屬性介紹
Fontfamily	TextBlock顯示的文字字體
FontSize	TextBlock的文字大小
FontStyle	TextBlock顯示字體的文字樣式
Text	TextBlock顯示的文字內容
Foreground	TextBlock顯示文字的顏色
TextWrapping	TextBlock文字是否要換行

實作一個TextBlock的範例：

新增一個【TextBlock】的專案名稱，開啟【MainPage.xaml】

在Grid的設計畫面中，放置兩個TextBlock


<Page
    x:Class="TextBlock.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TextBlock"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Left" FontSize="70" Margin="284,177,0,0" TextWrapping="Wrap" Text="TextBlock控制項範例" VerticalAlignment="Top" Width="845" Height="90" />
        <TextBlock FontSize="50" Margin="284,305,237,69">
            <Run FontFamily="標楷體">這是</Run>
            <Run FontFamily="標楷體">一個楷體的文字</Run>
            <LineBreak />
            <Run FontFamily="宋體">這是一個宋體的文字</Run>
            <LineBreak />
            <Run FontFamily="微軟雅黑體">這是一個微軟雅黑體的文字</Run>
            <LineBreak />
            <Run FontFamily="微軟正黑體">這是一個微軟正黑體的文字</Run>
            <LineBreak />
            <Run FontFamily="新細明體">這是一個新細明體的文字</Run>
            <LineBreak />
            <Run FontFamily="細明體">這是一個細明體的文字</Run>
        </TextBlock>
    </Grid>
</Page>

設計畫面：

Image控制項

在開發應用程式時，除了顯示文字外

還能搭配圖片，讓整體的應用程式更為美觀，也能以圖來帶說明

Image的常用屬性

屬性	屬性介紹
Source	圖片的來源位置
Stretch	圖片的呈現狀態

關於Stretch屬性的詳細說明，可以參考此文章：http://www.dotblogs.com.tw/frank12690/archive/2013/11/17/129720.aspx

通過範例來介紹Image控制項：

新增一個【Image】的專案名稱，新增一個資料夾【images】，這是要放圖片的

在【images】的資料夾下放一張圖片，等等作範例要使用的

開啟【MainPage.xaml】，在Grid的設計畫面中，放進一個Image和一個TextBlock

【MainPage.xaml】的程式碼如下：


<Page
    x:Class="Image.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Image"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image HorizontalAlignment="Left" Source="images/badminton.jpg" Width="546" Margin="408,341,0,172" Stretch="Fill" />
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="羽毛球" FontSize="100" Margin="515,206,0,453" Width="326" />
    </Grid>
</Page>

設計畫面：

回首頁