【萬里征程——Windows App開發】用浮出控制元件做預覽效果

在前面學習控制元件的時候，我們已經見過了MessageDialog了，關於Button還有一個浮出控制元件Flyout哦。具體是怎樣用呢？接下來就一起看看咯。

我們還是延續前面的那個示例好了，那麼，程式碼來了。

        <Button x:Name="btnWhat" Content="這是什麼？">
            <Button.Flyout>
                <Flyout>
                    <StackPanel>
                        <TextBlock Width="430" Style="{StaticResource BaseTextBlockStyle}"
                                   Text="噢！你剛剛又踩到地雷了，要撤銷嗎？" Foreground="Red" FontSize="25"/>
                        <Button Click="btnUndo_Click" Margin="12" Content="撤銷"/>
                    </StackPanel>
                </Flyout>
            </Button.Flyout>
        </Button>

當我們點選了撤銷按鈕後，當然需要btnWhat按鈕的Flyout消失掉，這個嘛，也只要1行程式碼啦。另外這個踩雷的邏輯這裡就不展開啦，以後說不定會有相關的實戰喲。

private void btnUndo_Click(object sender, RoutedEventArgs e)
{
     btnWhat.Flyout.Hide();
}

更為重要的呢，在於這些在WP8上也是通用的哦，這才是核心所在呢。^_^既然這一篇部落格主要是浮出控制元件，如果可以藉助浮出產生預覽影象的效果會不會很棒呢？先來看張執行截圖吧。

以下都是程式碼啦，什麼Binding呀之類的都不用管啦。需要注意的地方也就是那些Height和Width可能需要拿來調整一下。

   <Page.Resources>
        <Flyout x:Key="ResourceFlyoutImage" Placement="Right">                            
            <Image Source="{Binding Path=Source}" MaxHeight="800" MaxWidth="1400" Stretch="Uniform"/>
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="MinHeight" Value="900"/>
                    <Setter Property="MinWidth"  Value="1600"/>
                    <Setter Property="BorderThickness" Value="3"/>
                    <Setter Property="Background" Value="Wheat"/>
                    <Setter Property="BorderBrush" Value="Green"/>
                    <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>        
                </Style>
            </Flyout.FlyoutPresenterStyle>
        </Flyout>
    </Page.Resources>    

    <Grid>
        <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
            <Image Source="Assets/14152.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                        
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14158.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                 
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14160.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"    
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                           
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14164.jpg" Width="100" Height="100" Margin="12" Tapped="img_Tapped"      
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                  
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
        </StackPanel>
    </Grid>

private void img_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}             

同樣的，在WP上也是可以得哦，一下是做了些修改後的XAML程式碼啦。正如大家所見，我把圖片都縮小了，Placement也設定成了Top，StactPanel的屬性也做了修改。

    <Page.Resources>
        <Flyout x:Key="ResourceFlyoutImage" Placement="Top">
            <Image Source="{Binding Path=Source}" MaxHeight="600" MaxWidth="400" Stretch="Uniform"/>
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="MinHeight" Value="600"/>
                    <Setter Property="MinWidth"  Value="400"/>
                    <Setter Property="BorderThickness" Value="3"/>
                    <Setter Property="Background" Value="Wheat"/>
                    <Setter Property="BorderBrush" Value="Green"/>
                    <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
        </Flyout>
    </Page.Resources>

    <Grid>
        <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal">
            <Image Source="Assets/14152.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                        
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14158.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"  
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                 
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14160.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"    
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                           
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>

            <Image Source="Assets/14164.jpg" Width="72" Height="60" Margin="12" Tapped="img_Tapped"      
                   FlyoutBase.AttachedFlyout="{StaticResource ResourceFlyoutImage}"                                                  
                   DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
        </StackPanel>
    </Grid>

效果還是挺好的哦！（用的638……解析度好差，小夥伴們應該早就從程式碼中發現了吧。）話說這個預覽的圖片還不是一次蹦出來的哦，而是分成多個部分，慢慢才出來的，效果嘛，就像百葉窗一樣。（用流量看這篇部落格的童鞋對不住了，我也是截了好多次才截出這個效果的圖的。）

那麼這篇部落格到此就為止啦，希望大家學的開心。下一篇再見咯！

為使本文得到斧正和提問，轉載請註明出處：
http://blog.csdn.net/nomasp