WPF自定义Popup和弹出菜单

Popup：

1. <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal">
2. <local:ImageButton x:Name="btn_back2" Margin="10,0,5,0" ImgPath="/Images/返回2.png" Width="112" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_back2_Click" />
3. <local:ImageButton x:Name="btn_bg" Margin="5,0" ImgPath="/Images/背景.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_bg_Click" />
4. <local:ImageButton x:Name="btn_jiaojia" Margin="5,0" ImgPath="/Images/脚架.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_jiaojia_Click" />
5. <local:ImageButton x:Name="btn_xiangji" Margin="5,0" ImgPath="/Images/相机.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_xiangji_Click" />
6. </StackPanel>
7. <Popup x:Name="Pop_bg" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_bg}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
8. <Border>
9. <Border.Background>
10. <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
11. </Border.Background>
12. <StackPanel Margin="5">
13. <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2,10" Template="{StaticResource ImageButtonTemplate}" />
14. <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
15. </StackPanel>
16. </Border>
17. </Popup>
18. <Popup x:Name="Pop_jiaojia" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_jiaojia}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
19. <Border>
20. <Border.Background>
21. <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
22. </Border.Background>
23. <StackPanel Margin="5">
24. <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
25. <local:ImageButton Width="70" Height="31" ImgPath="/Images/复位.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
26. <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
27. </StackPanel>
28. </Border>
29. </Popup>
30. <Popup x:Name="Pop_xiangji" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_xiangji}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
31. <Border>
32. <Border.Background>
33. <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
34. </Border.Background>
35. <StackPanel Margin="5">
36. <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
37. <local:ImageButton Width="70" Height="31" ImgPath="/Images/复位.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
38. <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
39. </StackPanel>
40. </Border>
41. </Popup>

截图：
         

---

弹出菜单：

MyResDic.xaml

1. <ControlTemplate x:Key="SelfMenuItemTemplate" TargetType="{x:Type MenuItem}">
2. <Border Background="Transparent"  Height="25">
3. <StackPanel Orientation="Horizontal">
4. <Rectangle Width="5" Height="25" Name="mousemark" Fill="Gray" />
5. <TextBlock Margin="5,0" VerticalAlignment="Center" Text="{Binding Header, RelativeSource={RelativeSource TemplatedParent}}"/>
6. </StackPanel>
7. </Border>
8. <ControlTemplate.Triggers>
9. <Trigger Property="IsMouseOver" Value="True">
10. <Setter TargetName="mousemark" Property="Fill" Value="Blue" />
11. </Trigger>
12. </ControlTemplate.Triggers>
13. </ControlTemplate>

MainWindow.xaml

1. <local:ImageButton x:Name="btn_set" Width="27" Height="26" VerticalAlignment="Top"  ImgPath="/Images/设置菜单.png" Template="{StaticResource ImageButtonTemplate}" Click="btn_set_Click">
2. <local:ImageButton.ContextMenu>
3. <ContextMenu Name="menu" Placement="MousePoint" Width="200">
4. <MenuItem Header="修改密码" Template="{StaticResource SelfMenuItemTemplate}" />
5. <MenuItem Header="设置照片存放位置" Template="{StaticResource SelfMenuItemTemplate}" />
6. <MenuItem Header="设置套系解析位置" Template="{StaticResource SelfMenuItemTemplate}" />
7. <MenuItem Header="进入官网" Template="{StaticResource SelfMenuItemTemplate}" />
8. <ContextMenu.Template>
9. <ControlTemplate TargetType="{x:Type ContextMenu}">
10. <Border Margin="10,10" Background="AliceBlue">
11. <ItemsPresenter Margin="2,2" />
12. <Border.Effect>
13. <DropShadowEffect BlurRadius="8" Opacity="0.5" />
14. </Border.Effect>
15. </Border>
16. </ControlTemplate>
17. </ContextMenu.Template>
18. </ContextMenu>
19. </local:ImageButton.ContextMenu>
20. </local:ImageButton>

截图：

---

下面给大家欣赏下整个界面好了，请允许我小小的嘚瑟下~

---

工程下载地址（只实现了界面哦~）：
http://yun.baidu.com/share/link?shareid=1484254303&uk=3508115909