Windows 8技巧：Windows 8中的Popup使用方式介紹

發(fā)布時(shí)間：2013-04-22 16:13:55 作者：佚名

本篇文章小編為大家介紹，Windows 8技巧：Windows 8中的Popup使用方式介紹。需要的朋友參考下

在上一篇文章中我們將了替代Silverlight中MessageBox的MessageDialog控件,本篇文章將講訴另外一種彈出提示窗口的控件Popup。

一、我們認(rèn)識(shí)Popup控件的IsLightDismissEnabled屬性，這個(gè)屬性設(shè)置為true的時(shí)候，點(diǎn)擊非Popup控件外任何區(qū)域?qū)㈥P(guān)閉Popup。

復(fù)制代碼

代碼如下:

<Button Content="彈出窗口一" Name="btn1" Width="108"
Margin="161,96,0,0" VerticalAlignment="Top" Height="52" Click="btn1_Click"/>
<Popup x:Name="tip1" IsLightDismissEnabled="True"
HorizontalOffset="161" VerticalOffset="250">
<Grid Width="312" Height="200" >
<Grid.Background>
<ImageBrush ImageSource="./BG.png"></ImageBrush>
</Grid.Background>
<TextBlock Grid.Row="0" Foreground="White" Grid.Column="0"
FontSize="15" Height="Auto" HorizontalAlignment="Center"
Margin="0 20 0 0" VerticalAlignment="Top">
<Run>眾芳搖落獨(dú)暄妍，占盡風(fēng)情向小園</Run>
<LineBreak/>
<LineBreak/>
<Run>疏影橫斜水清淺，暗香浮動(dòng)月黃昏</Run>
<LineBreak/>
<LineBreak/>
<Run>霜禽欲下先偷眼，粉蝶如知合斷魂</Run>
<LineBreak/>
<LineBreak/>
<Run>幸有微吟可相狎，不須檀板共金樽</Run>
</TextBlock>
</Grid>
</Popup>

二、我們看Popup的顯示和隱藏時(shí)的動(dòng)畫設(shè)置，具體類型有以下幾種，具體效果可以自己下載實(shí)例并且修改實(shí)例來(lái)觀看。

AddDeleteThemeTransition

ContentThemeTransition

EdgeUIThemeTransition

EntranceThemeTransition

PaneThemeTransition

PopupThemeTransition

ReorderThemeTransition

RepositionThemeTransition

復(fù)制代碼

代碼如下:

<Button Content="彈出窗口二" x:Name="btn1_Copy" Width="108"
Margin="510,96,0,0" VerticalAlignment="Top" Height="52" Click="btn1_Copy_Click"/>
<Popup x:Name="tip2" IsLightDismissEnabled="True"
HorizontalOffset="510" VerticalOffset="250">
<Popup.ChildTransitions>
<TransitionCollection>
<AddDeleteThemeTransition></AddDeleteThemeTransition>
<ContentThemeTransition/>
<EdgeUIThemeTransition></EdgeUIThemeTransition>
<EntranceThemeTransition></EntranceThemeTransition>
<PaneThemeTransition></PaneThemeTransition>
<PopupThemeTransition></PopupThemeTransition>
<ReorderThemeTransition></ReorderThemeTransition>
<RepositionThemeTransition></RepositionThemeTransition>
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="312" Height="200" >
<Grid.Background>
<ImageBrush ImageSource="./BG.png"></ImageBrush>
</Grid.Background>
<TextBlock Grid.Row="0" Foreground="Yellow" Grid.Column="0"
FontSize="15" Height="Auto" HorizontalAlignment="Center"
Margin="0 20 0 0" VerticalAlignment="Top">
<Run>莫笑農(nóng)家臘酒渾，豐年留客足雞豚</Run>
<LineBreak/>
<LineBreak/>
<Run>山重水復(fù)疑無(wú)路，柳暗花明又一村</Run>
<LineBreak/>
<LineBreak/>
<Run>蕭鼓追隨春社近，衣冠簡(jiǎn)樸古風(fēng)存</Run>
<LineBreak/>
<LineBreak/>
<Run>從今若許閑乘月，拄杖無(wú)時(shí)夜叩門</Run>
</TextBlock>
</Grid>
</Popup></p> <p> <Button Content="彈出窗口三" x:Name="btn1_Copy1" Width="108"
Margin="850,96,0,0" VerticalAlignment="Top" Height="52" Click="btn1_Copy1_Click" />
<Popup x:Name="tip3" IsLightDismissEnabled="True" VerticalOffset="250"
HorizontalOffset="-312" HorizontalAlignment="Right">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid Width="312" Height="200" >
<Grid.Background>
<ImageBrush ImageSource="./BG.png"></ImageBrush>
</Grid.Background>
<TextBlock Grid.Row="0" Foreground="Coral" Grid.Column="0"
FontSize="15" Height="Auto" HorizontalAlignment="Center"
Margin="0 20 0 0" VerticalAlignment="Top">
<Run>舍南舍北皆春水，但見(jiàn)群鷗日日來(lái)</Run>
<LineBreak/>
<LineBreak/>
<Run>花徑不曾緣客掃，蓬門今始為君開(kāi)</Run>
<LineBreak/>
<LineBreak/>
<Run>盤飧市遠(yuǎn)無(wú)兼味，樽酒家貧只舊醅</Run>
<LineBreak/>
<LineBreak/>
<Run>肯與鄰翁相對(duì)飲，隔籬呼取盡馀杯</Run>
</TextBlock>
</Grid>
</Popup>

三、Popup的內(nèi)容還可以直接繼承于用戶控件，以將用戶控件直接彈出。下面的實(shí)例代碼中UC1是一個(gè)用戶控件，可下載源碼觀看

復(fù)制代碼

代碼如下:

最后如需源碼請(qǐng)點(diǎn)擊 Win8Popup_jb51.net 下載。效果如下：