【Win 10應用開發】自定義浮動層——Flyout

最近幾天總是下雨，真是“何處秋窗無雨聲”，也“不知風雨幾時休”。

好，進入正題。

彈出層有三種。

第一種是ContentDialog，即內容對話框，它其實類似於模態對話框，彈出后會覆蓋整個窗口區域，並且總在最前面，你只有關閉了對話框之后才能進行其他操作。

第二種就是提示文本，比如在一個Windows窗口上，你把鼠標移到窗口的關閉按鈕上，稍稍停一下，你會下面有提示文本出來，告訴這是關閉按鈕。

第三種有點像提示文本，但它不會自動消息，而是等你點擊了其他對象后它會消失，很像下拉列表控件的彈出框。

 

Flyout類屬於第三種彈出層，或者叫浮動層吧，在HTML中常常用div來實現。Flyout類里面其實封裝了一個ContentControl控件，用來顯示UI內容，這個內容控件是從ContentControl類派生的，叫FlyoutPresenter。如果想修改這個被封裝了的內容控件的樣式，就要通過Flyout類的FlyoutPresenterStyle屬性來完成，該屬性所設置的Style會被應用到內部的FlyoutPresenterStyle控件實例上。

 

即，Flyout上彈出來的可視化部分是可以由開發者自己來定義的，通過Flyout.Content屬性來設定，只要是UIElement的子類均可。

Flyout是從FlyoutBase派生出來的。使用Flyout的最簡單方法是和Button控件一起協作，因為Button類有一個Flyout屬性，只要向該屬性設置一個FlyoutBase的子類的實例，不用任何代碼處理，連Click事件也不用處理，運行后就可以通過點擊按鈕來顯示浮出層。

 

舉個例子：

        <Button Content="fly out">
            <Button.Flyout>
                <Flyout>
                    <TextBlock Text="白日放歌須縱酒" Foreground="Blue" FontSize="25"/>
                </Flyout>
            </Button.Flyout>
        </Button>

Flyout上直接放了一個顯示文本的TextBlock對象。在程序運行階段，只要單擊一下按鈕，就會彈出來。如下圖。

 

大伙伴們也發現，只有Button類才有Flyout屬性，如果像HyperlinkButton這樣的控件，沒有那個Flyout屬性，該如何處理呢。沒事，FlyoutBase類有個附加屬性，可以把FlyoutBase實例附加到某個可視化對象上。看例子吧。

        <HyperlinkButton Content="click me" Click="OnLinkClick" Margin="0,25" >
            <FlyoutBase.AttachedFlyout>
                <Flyout>
                    <Ellipse Width="32" Height="32" Fill="Red" />
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </HyperlinkButton>

這時候，它不會自動處理，如果不寫代碼的話，運行程序后，你點擊鏈接是沒有反應的，所以要處理其單擊事件。

        private void OnLinkClick(object sender, RoutedEventArgs e)
        {
            HyperlinkButton link = sender as HyperlinkButton;
            FlyoutBase.ShowAttachedFlyout(link);
        }

 

FlyoutBase有個靜態方法，叫ShowAttachedFlyout，方法參數是附加了FlyoutBase對象的元素，就我們上面的例子來說，是HyperlinkButton元素上附加了一個Flyout實例，因此，在調用HyperlinkButton方法時，要把HyperlinkButton實例傳遞方法參數。

方法會自動找到附加在HyperlinkButton上的Flyout實例，並顯示出來。結果如下圖。

 

上文我提到過，如果要自定義Flyout的控件容器的樣式，可以設置FlyoutPresenterStyle屬性，所用到的Style的TargetType是FlyoutPresenter類。看看例子。

        <Button Content="點一點,看一看">
            <Button.Flyout>
                <Flyout Placement="Right">
                    <TextBlock Text="青春作伴好還鄉" Foreground="LightGray" FontSize="24" />
                    <Flyout.FlyoutPresenterStyle>
                        <Style TargetType="FlyoutPresenter">
                            <Setter Property="Background" Value="Purple"/>
                        </Style>
                    </Flyout.FlyoutPresenterStyle>
                </Flyout>
            </Button.Flyout>
        </Button>

Placement屬性用來指定浮出層的位置，是相對於這個Button而言的位置。本例中，讓Flyout出現在按鈕的右方。

結果如圖。

 

好了，上面幾個簡單到無法再簡單的例子，向大伙伴們演示了Flyout組件的用法。本文到此就要收筆了，有空再聊。