WPF自定义Popup和弹出菜单

最新推荐文章于 2025-07-07 10:59:30 发布

原创最新推荐文章于 2025-07-07 10:59:30 发布 · 4.3w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #弹出菜单 #Popup

WPF 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个UI设计实例，包括按钮组和弹出菜单的设计方案及实现方式，展示了具体的XAML代码，并提供了界面截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Popup：

<StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal">
    <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" />
    <local:ImageButton x:Name="btn_bg" Margin="5,0" ImgPath="/Images/背景.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_bg_Click" />
    <local:ImageButton x:Name="btn_jiaojia" Margin="5,0" ImgPath="/Images/脚架.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_jiaojia_Click" />
    <local:ImageButton x:Name="btn_xiangji" Margin="5,0" ImgPath="/Images/相机.png"  Width="82" Height="43" Template="{StaticResource ImageButtonTemplate}" Click="btn_xiangji_Click" />
</StackPanel>
<Popup x:Name="Pop_bg" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_bg}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
    <Border>
        <Border.Background>
            <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
        </Border.Background>
        <StackPanel Margin="5">
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2,10" Template="{StaticResource ImageButtonTemplate}" />             
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
        </StackPanel>
    </Border>
</Popup>
<Popup x:Name="Pop_jiaojia" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_jiaojia}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
    <Border>
        <Border.Background>
            <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
        </Border.Background>
        <StackPanel Margin="5">
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/复位.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
        </StackPanel>
    </Border>
</Popup>
<Popup x:Name="Pop_xiangji" PopupAnimation="Fade" Width="88" Height="125" PlacementTarget="{Binding ElementName=btn_xiangji}" Placement="Top" AllowsTransparency="True" StaysOpen="False" IsOpen="False">
    <Border>
        <Border.Background>
            <ImageBrush ImageSource="/AutoCamera;component/Images/下拉背景.png" />
        </Border.Background>
        <StackPanel Margin="5">
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/上升.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/复位.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
            <local:ImageButton Width="70" Height="31" ImgPath="/Images/下降.png" Margin="2" Template="{StaticResource ImageButtonTemplate}" />
        </StackPanel>
    </Border>
</Popup>

截图：

弹出菜单：

MyResDic.xaml

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

MainWindow.xaml

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

截图：