Win8/WP8 XAML高級特性

Date 6/16/2014:

頁面靜態資源，如下：

    <Page.Resources>
        <Style x:Key="commonTextStyle" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Century Schoolbook" />
            <Setter Property="FontSize" Value="36" />
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Margin" Value="12 12" />
        </Style>
        
        <Style x:Key="paragraphTextStyle" TargetType="TextBlock" BasedOn="{StaticResource commonTextStyle}">
            <Setter Property="TextAlignment" Value="Left" />
            <Setter Property="TextWrapping" Value="Wrap" />
        </Style>
        
        <Style x:Key="frontMatterTextStyle" TargetType="Image">
            <Setter Property="Stretch" Value="None" />
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
    </Page.Resources>

可以在<Page>節點下添加<Page.Resouces>子節點，定義本面頁可以引用的靜態資源，簡而言之，當你的頁面元素有類似的風格時即可定義這樣一個靜態資源，然後以屬性的方式在頁面元素中引用。頁面元素也可重寫引用資源的某些屬性（這樣勢必會增加複雜性），更加強大的特性是其它靜態資源也可以引用其它靜態資源，這種效果類似於類的繼承。靜態資源的好處自然是減少代碼量的同時支持高可修改性，可維護性。對靜態資源的引用也很簡單：

            <TextBlock Style="{StaticResource paragraphTextStyle}">
                  胖子和瘦子跋涉千里找到沙漠中的
                三叔，此時他已奄奄一息，瘦子趕緊扶起三叔。三叔用
                盡最後一點力氣說：“叔渴，叔渴。”瘦子想了想，說：“
                舒克，舒克，開飛機的舒克！”三叔再度虛脫，瘦子眼見
                如此，對胖子說：“揹他，揹他！”胖子想了想,說：“貝
                塔，貝塔，開飛機的貝塔！”
            </TextBlock>

畫布佈局：

        <Canvas Name="canvas"></Canvas>

正如其名字所示，就是給你一個畫布，可以在代碼中對畫布進行繪製。如繪製一個圓：

            Point pt = e.GetPosition(this);

            Ellipse ellipse = new Ellipse
            {
                Width = 3,
                Height = 3,
                Fill = this.Foreground
            };

            Canvas.SetLeft(ellipse, pt.X);
            Canvas.SetTop(ellipse, pt.Y);
            canvas.Children.Add(ellipse);

用戶控件：

可以定義自己的頁面元素類，其強大之處在於也支持XAML與CSharp結合的方式創建。這樣就可以方便的先用XAML繪製好控件，動態的部分在代碼中控制。如下自定義一個顏色卡片類：

<UserControl
    x:Class="Hello.ColorItem"
    mc:Ignorable="d"
    d:DesignHeight="144"
    d:DesignWidth="384">
    
    <Grid>
        <Border BorderBrush="AliceBlue" Height="100" Width="360" BorderThickness="2" Margin="12">
            <StackPanel Orientation="Horizontal">
                <Rectangle Name="rectangle" Width="72" Height="72" Margin="12" />
                <StackPanel VerticalAlignment="Center">
                    <TextBlock Name="textblockName" FontSize="24" />
                    <TextBlock Name="textblockRgb" FontSize="18" />
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

注意其根元素是<UserControl>，同時在構造函數中用顏色信息去初始化該控件：

public ColorItem(string name, Color clr)
        {
            this.InitializeComponent();
            rectangle.Fill = new SolidColorBrush(clr);
            textblockName.Text = name;
            textblockRgb.Text = String.Format("#{0:X2}{1:X2}{2:X2}{3:X2}", clr.A, clr.R, clr.G, clr.B);
        }

這樣，就可以在你的程序中方便地引用該控件，也可也方便地修改。

Grid佈局：

網格佈局可能是MS特有的佈局，用起來也還可以，有兩個非常有用的特性是：

一 可以定義網格列或行之間的寬度比值，而不用在指出其具體值，如下：

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

這個列定義，網格的三個列寬都是 “星號”，即不指定其特定值，但規定了三列寬度必須相等（都是“星號”），當然，也可以用 " 2* "來表示兩倍寬等等。

二 網格之間可以合併，例如：

<span style="white-space:pre">	</span><Rectangle Name="colorPicked" Grid.Column="3" Grid.Row="0" Grid.RowSpan="3">

這裏定義一個醫形放在網格的第1行第四列，但其Grid.RowSpan指定其同時佔用其下兩個單元格，即合併了三個單元格。

合併單元格的效果可以用嵌套Grid來達到，但明顯會複雜很多，不論是在編輯還是修改的時候。

數據綁定：

數據綁定功能強大，你可以綁定頁面元素的屬性值到類的屬性，頁面其它元素的屬性甚至是JSON數據，這裏以文本框綁定滑動條數值爲例：

            <Slider Name="slider1" VerticalAlignment="Center"/>
            <TextBlock HorizontalAlignment="Center" FontSize="48" Text="{Binding ElementName=slider1, Path=Value}" />

將TextBlock的Text屬性綁定到Slider的Value屬性，這樣當Slider的被拖動時，文本框也會自動更新其值，這裏Slider的值是數據類型，而TextBlock的Text屬性肯定是String類型，所以數據綁定時還隱式的做了類型轉換。另一個情況是你可能需要自定義轉換，你可以定編寫一個Converter類，然後指定爲TextBlock的Converter屬性值。

其它類型的數據綁定仍待了解。

今天就行寫到這裏了，沒圖沒真相，要真相打打代碼。

Date 6/17/2014：

另一種常用的數據綁寫則涉及到MVVM（Model-View-ViewModel）跟MVC差不多，都是把視圖和邏輯分離，對於普通的如滑動條，可以使用實現INotifyChanged接口，裏面的三個函數Execute, CanExecute, CanExecuteChanged 已經足夠響應界面事件了，CanExecute返回響應是否可用，例如：按鈕可不可以點擊等等，將實現InotifyChanged接口的類定義爲xaml頁面的靜態資源，就可以在頁面中進行數據綁定了，對於Button則比較特殊，需要實現ICommand接口來實現綁定。

        <local:KeypadPage x:Key="keypadPage"/>

定義的ViewMode如上，KeypadPage就是實現了INotifyChanged的類，keypadPage就是在本頁面的靜態引用，如下，綁定KeypadPage類的一個成員：

<span style="white-space:pre">	</span><TextBlock Text="{Binding Source={StaticResource keypadPage}, Path=tip}" />

這樣就綁定了KeypadPage類的tip成員，還有Mode選項可以選。

另外Page類還有一個DataContext作可作爲默認的數據綁定源，語法更簡單，即在Page初始化時this.DataContext = new KeypadPage();即可。