您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> C# >> 關於C#

Windows 8 開發入門（十）：2D 變換與 AppBar 應用程式列完整指南

編輯：關於C#

Windows 8 繼承 Silverlight 的 2D 變換體系，並引入 AppBar 作為情境式命令列。

六大基本變換類別

類別	功能	關鍵屬性
RotateTransform	旋轉	Angle、CenterX、CenterY
ScaleTransform	縮放	ScaleX、ScaleY、CenterX、CenterY
SkewTransform	傾斜	AngleX、AngleY、CenterX、CenterY
TranslateTransform	平移	X、Y
TransformGroup	複合變換	Children 集合
MatrixTransform	矩陣自訂	Matrix (M11..M22, OffsetX, OffsetY)

詳細原理請參考筆者早期 Silverlight 系列文章：
5 種基本變換詳解、MatrixTransform 深度解析

XAML 範例：並排展示原圖與變換後圖片

<!-- 旋轉 45° -->
<Image Source="iPhone_001.png" Opacity="0.3" .../> <!-- 原圖參考 -->
<Image Source="iPhone_001.png" ...>
    <Image.RenderTransform>
        <RotateTransform CenterX="0" CenterY="0" Angle="45"/>
    </Image.RenderTransform>
</Image>

<!-- 縮放 0.6 倍 -->
<Image Source="iPhone_002.png" Opacity="0.3" .../>
<Image Source="iPhone_002.png" ...>
    <Image.RenderTransform>
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"/>
    </Image.RenderTransform>
</Image>

<!-- 傾斜 X 軸 45° -->
<Image Source="iPhone_003.png" Opacity="0.3" .../>
<Image Source="iPhone_003.png" ...>
    <Image.RenderTransform>
        <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"/>
    </Image.RenderTransform>
</Image>

<!-- 平移 (10, 50) -->
<Image Source="iPhone_004.png" Opacity="0.3" .../>
<Image Source="iPhone_004.png" ...>
    <Image.RenderTransform>
        <TranslateTransform X="10" Y="50"/>
    </Image.RenderTransform>
</Image>

<!-- 複合：垂直鏡像 + 向下位移 -->
<Image Source="iPhone_005.png" Opacity="0.3" .../>
<Image Source="iPhone_005.png" ...>
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleY="-1"/>
            <TranslateTransform Y="100"/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>

<!-- 以下以 MatrixTransform 重現上述效果 -->
<Image Source="iPhone_001.png" ...>
    <Image.RenderTransform><MatrixTransform Matrix="0 1 -1 0 0 0"/></Image.RenderTransform></Image> <!-- 旋轉 90° -->
<Image Source="iPhone_002.png" ...>
    <Image.RenderTransform><MatrixTransform Matrix="0.6 0 0 0.6 0 0"/></Image.RenderTransform></Image> <!-- 縮放 -->
<Image Source="iPhone_003.png" ...>
    <Image.RenderTransform><MatrixTransform Matrix="1 0 1 1 0 0"/></Image.RenderTransform></Image> <!-- 傾斜 -->
<Image Source="iPhone_004.png" ...>
    <Image.RenderTransform><MatrixTransform Matrix="1 0 0 1 10 50"/></Image.RenderTransform></Image> <!-- 平移 -->
<Image Source="iPhone_005.png" ...>
    <Image.RenderTransform><MatrixTransform Matrix="1 0 0 -1 0 0"/></Image.RenderTransform></Image> <!-- 鏡像 -->

AppBar：右鍵/下滑呼出的命令列

<Page.BottomAppBar>
    <AppBar>
        <Grid Background="Green" Width="1355">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="425*"/>
                <ColumnDefinition Width="248*"/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                <Button Name="appBarAdd" Content="新增" Click="appBarAdd_Click"/>
                <Button Name="appBarDelete" Content="刪除" Click="appBarDelete_Click"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                <Button Name="AppBarMore" Content="更多" Click="AppBarMore_Click"/>
            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

private void appBarAdd_Click(object sender, RoutedEventArgs e) {
    tbText.Text = "點擊了新增按鈕！";
}
private void appBarDelete_Click(object sender, RoutedEventArgs e) {
    tbText.Text = "點擊了刪除按鈕！";
}
private void AppBarMore_Click(object sender, RoutedEventArgs e) {
    tbText.Text = "點擊了更多按鈕！";
}