WPF氣泡樣式彈窗效果代碼分享
更新時(shí)間：2016年09月02日 14:16:41 作者：Amiry
這篇文章主要為大家詳細(xì)介紹了WPF氣泡樣式彈窗效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
頁(yè)面設(shè)計(jì)需求，做了一個(gè)氣泡形狀的彈出框，效果如下：
設(shè)計(jì)思路如下：
1. 使用Path繪制氣泡的尖尖，將這個(gè)放到頂層；
2. 在用border繪制長(zhǎng)方形框，將這個(gè)放到底層，并且設(shè)置Margin值，使得Path圖層和border看起來(lái)銜接在一起。
代碼如下：
<Window x:Class="BubblePanelTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Label" x:Key="TopBubblePanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Grid>
<Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Background="Yellow" HorizontalAlignment="Left" Margin="0,8.5,0,0" Padding="5">
<ContentPresenter />
</Border>
<Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" Background="Transparent">
<Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
<Path.Data>
<PathGeometry Figures="M 0,10
L 0,10,5,0
L 5,0,10,10
"/>
</Path.Data>
</Path>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Label" x:Key="BottomBubblePanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Grid>
<Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom" Margin="0,0,0,8.5" Background="Yellow" HorizontalAlignment="Left" Padding="5">
<ContentPresenter />
</Border>
<Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,0" Background="Transparent">
<Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
<Path.Data>
<PathGeometry Figures="M 0,0
L 0,0,5,10
L 5,10,10,0
"/>
</Path.Data>
</Path>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Label" x:Key="LeftBubblePanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Grid>
<Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Margin="8.5,0,0,0" Background="Yellow" HorizontalAlignment="Left" Padding="5">
<ContentPresenter />
</Border>
<Canvas Width="10" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent">
<Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
<Path.Data>
<PathGeometry Figures="M 10,0
L 10,0,0,5
L 0,5,10,10
"/>
</Path.Data>
</Path>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Label" x:Key="RightBubblePanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Label}">
<Grid HorizontalAlignment="Left">
<Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,8.5,0" Background="Yellow" Padding="5">
<ContentPresenter />
</Border>
<Canvas Width="10" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent">
<Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow">
<Path.Data>
<PathGeometry Figures="M 0,0
L 0,0,10,5
L 10,5,0,10
"/>
</Path.Data>
</Path>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Label Style="{StaticResource TopBubblePanel}" Tag="Top" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80"/>
</StackPanel>
</StackPanel>
</Label>
<Label Style="{StaticResource BottomBubblePanel}" Tag="Top" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80"/>
</StackPanel>
</StackPanel>
</Label>
<Label Style="{StaticResource LeftBubblePanel}" Tag="Top" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80"/>
</StackPanel>
</StackPanel>
</Label>
<Label Style="{StaticResource RightBubblePanel}" Tag="Top" Margin="2">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80"/>
</StackPanel>
</StackPanel>
</Label>
<StackPanel Orientation="Horizontal" Margin="0,30,0,0">
<Button Name="btnTestPopup1" Width="100" Height="30" Content="Bottom" Click="btnTestPopup1_Click" />
<Button Name="btnTestPopup2" Width="100" Height="30" Content="Top" Click="btnTestPopup2_Click" />
<Button Name="btnTestPopup3" Width="100" Height="30" Content="Right" Click="btnTestPopup3_Click" />
<Button Name="btnTestPopup4" Width="100" Height="30" Content="Left" Click="btnTestPopup4_Click" />
</StackPanel>
<Popup Name="pop1" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Slide" PlacementTarget="{Binding ElementName=btnTestPopup1}" Placement="Bottom" >
<Label Style="{StaticResource TopBubblePanel}" Tag="Top">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80" Name="txtTest1" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="確定" Click="btnOK1_Click" Width="50" Height="25" Margin="5" />
<Button Content="取消" Click="btnCancel1_Click" Width="50" Height="25" Margin="5"/>
</StackPanel>
</StackPanel>
</Label>
</Popup>
<Popup Name="pop2" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Fade" PlacementTarget="{Binding ElementName=btnTestPopup2}" Placement="Top" >
<Label Style="{StaticResource BottomBubblePanel}" Tag="Top">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80" Name="txtTest2" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="確定" Click="btnOK2_Click" Width="50" Height="25" Margin="5"/>
<Button Content="取消" Click="btnCancel2_Click" Width="50" Height="25" Margin="5"/>
</StackPanel>
</StackPanel>
</Label>
</Popup>
<Popup Name="pop3" AllowsTransparency="True" StaysOpen="False" PopupAnimation="Scroll" PlacementTarget="{Binding ElementName=btnTestPopup3}" Placement="Right" >
<Label Style="{StaticResource LeftBubblePanel}" Tag="Top">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80" Name="txtTest3" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="確定" Click="btnOK2_Click" Width="50" Height="25" Margin="5"/>
<Button Content="取消" Click="btnCancel3_Click" Width="50" Height="25" Margin="5"/>
</StackPanel>
</StackPanel>
</Label>
</Popup>
<Popup Name="pop4" AllowsTransparency="True" StaysOpen="False" PopupAnimation="None" PlacementTarget="{Binding ElementName=btnTestPopup4}" Placement="Left" >
<Label Style="{StaticResource RightBubblePanel}" Tag="Top">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="abc" />
<TextBox Width="80" Name="txtTest4" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="確定" Click="btnOK4_Click" Width="50" Height="25" Margin="5"/>
<Button Content="取消" Click="btnCancel4_Click" Width="50" Height="25" Margin="5"/>
</StackPanel>
</StackPanel>
</Label>
</Popup>
</StackPanel>
</Window>
后臺(tái)代碼，很簡(jiǎn)單，就是控制pupup顯示或隱藏
private void btnTestPopup1_Click(object sender, RoutedEventArgs e)
{
pop1.IsOpen = true;
}
private void btnOK1_Click(object sender, RoutedEventArgs e)
{
pop1.IsOpen = false;
}
private void btnCancel1_Click(object sender, RoutedEventArgs e)
{
pop1.IsOpen = false;
}
private void btnTestPopup2_Click(object sender, RoutedEventArgs e)
{
pop2.IsOpen = true;
}
private void btnOK2_Click(object sender, RoutedEventArgs e)
{
pop2.IsOpen = false;
}
private void btnCancel2_Click(object sender, RoutedEventArgs e)
{
pop2.IsOpen = false;
}
private void btnTestPopup3_Click(object sender, RoutedEventArgs e)
{
pop3.IsOpen = true;
}
private void btnOK3_Click(object sender, RoutedEventArgs e)
{
pop3.IsOpen = false;
}
private void btnCancel3_Click(object sender, RoutedEventArgs e)
{
pop3.IsOpen = false;
}
private void btnTestPopup4_Click(object sender, RoutedEventArgs e)
{
pop4.IsOpen = true;
}
private void btnOK4_Click(object sender, RoutedEventArgs e)
{
pop4.IsOpen = false;
}
private void btnCancel4_Click(object sender, RoutedEventArgs e)
{
pop4.IsOpen = false;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 超炫酷的WPF實(shí)現(xiàn)Loading控件效果
- WPF實(shí)現(xiàn)漸變淡入淡出的登陸窗口效果
- .Net語(yǔ)言Smobiler開發(fā)之如何仿微信朋友圈的消息樣式
- c#使用微信接口開發(fā)微信門戶應(yīng)用
- C#實(shí)現(xiàn)微信公眾號(hào)群發(fā)消息(解決一天只能發(fā)一次的限制)實(shí)例分享
- C#微信公眾號(hào)開發(fā)之接收事件推送與消息排重的方法
- c#使用微信接口開發(fā)微信門戶應(yīng)用中微信消息的處理和應(yīng)答
- C#開發(fā)微信公眾號(hào)接口開發(fā)
- C#微信開發(fā)（服務(wù)器配置）
- WPF微信聊天和通訊錄按鈕樣式代碼分享
相關(guān)文章
干貨來(lái)襲! C# 7.0 新特性(VS2017可用)
干貨來(lái)襲! 為大家分享了C# 7.0 新特性，VS2017可用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
ASP.NET?MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)的個(gè)體
這篇文章介紹了ASP.NET?MVC增加一條記錄同時(shí)添加N條集合屬性所對(duì)應(yīng)個(gè)體的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
ASP.NET連接sql2008數(shù)據(jù)庫(kù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了ASP.NET連接sql2008數(shù)據(jù)庫(kù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了asp.net后臺(tái)注冊(cè)js的四種方法，有需要的朋友可以參考一下2014-01-01
這個(gè)方法絕對(duì)it560原創(chuàng)，而且會(huì)讓大家少走彎路，對(duì)于網(wǎng)上流傳的webconfig配置錯(cuò)誤的說(shuō)法絕對(duì)是忽悠人，配置文件錯(cuò)誤的記錄大概是0.1%2010-06-06
官網(wǎng) Ext direct包中.NET版的問(wèn)題
下載了官網(wǎng)的 Ext direct 包進(jìn)行研究，發(fā)現(xiàn)服務(wù)器端返回結(jié)果存在一點(diǎn)小問(wèn)題。2009-06-06
.NET性能調(diào)優(yōu)之一：ANTS Performance Profiler的使用介紹
本系列文章主要會(huì)介紹一些.NET性能調(diào)優(yōu)的工具、Web性能優(yōu)化的規(guī)則（如YSlow）及方法等等內(nèi)容。成文前最不希望看到的就是園子里不間斷的“哪個(gè)語(yǔ)言好，哪個(gè)語(yǔ)言性能高”的爭(zhēng)論，不多說(shuō)，真正的明白人都應(yīng)該知道這樣的爭(zhēng)論有沒(méi)有意義，希望我們能從實(shí)際性能優(yōu)化的角度去討論問(wèn)題2013-01-01
驗(yàn)證用戶必選CheckBox控件與自定義驗(yàn)證javascript代碼
CheckBox控件，由于它的值是選擇與非選擇。因此在提交數(shù)據(jù)時(shí)，想讓用戶必須選擇CheckBox，普通情況之下，不好做驗(yàn)證;但我們可以使用asp:CustomValidator來(lái)驗(yàn)證，不過(guò)還得寫自定義驗(yàn)證Javascript代碼2013-01-01
.NET?Core?實(shí)現(xiàn)緩存的預(yù)熱的方式
本文介紹了緩存預(yù)熱在.NETCore應(yīng)用中的重要性以及如何實(shí)現(xiàn)緩存預(yù)熱,緩存預(yù)熱可以提升用戶體驗(yàn)、降低數(shù)據(jù)庫(kù)壓力、提高系統(tǒng)穩(wěn)定性,感興趣的朋友一起看看吧2025-03-03
.net6?使用Senparc開發(fā)小程序配置過(guò)程
這篇文章主要介紹了.net6?使用Senparc開發(fā)小程序配置,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07