zoukankan      html  css  js  c++  java
  • WPF自定义Popup和弹出菜单

    Popup:

    [html] view plain copy
     
    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

    [html] view plain copy
     
    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

    [html] view plain copy
     
    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

  • 相关阅读:
    Spring学习(一)初识Spring
    搜索引擎学习(七)解析查询
    搜索引擎学习(六)Query的子类查询
    Oracle学习(十四)分表分区
    Oracle学习(十三)优化专题
    Python学习————流程控制之while循环
    Python学习————深浅copy
    Python学习————while循环作业
    Python学习————运算符
    Python学习————与用户交互
  • 原文地址:https://www.cnblogs.com/sjqq/p/7835101.html
Copyright © 2011-2022 走看看