Menu自定义样式

最新推荐文章于 2023-07-25 16:27:51 发布

~忘记了时间~

最新推荐文章于 2023-07-25 16:27:51 发布

阅读量238

点赞数

分类专栏：控件样式模板文章标签： wpf

本文链接：https://blog.csdn.net/qq_34581845/article/details/125295299

版权

控件样式模板专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自定义Menu样式

通过图片替换固有控件布局，简单实现样式效果

先看效果

在这里插入图片描述

Xaml

    <UserControl.Resources>
        <ImageBrush x:Key="Images1" ImageSource="pack://application:,,,/Wpf.AvalonDock;component/Images/MenuItem_BG.png" Opacity="0.8"/>
        <ImageBrush x:Key="Images2" ImageSource="pack://application:,,,/Wpf.AvalonDock;component/Images/MenuItem_BG2.png" Opacity="0.8"/>
        <ImageBrush x:Key="Selected_BG" ImageSource="pack://application:,,,/Wpf.AvalonDock;component/Images/Selected_BG.png"/>
        <Style TargetType="{x:Type Menu}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Menu}">
                        <Border BorderBrush="White" Background="White" CornerRadius="3">
                            <ItemsPresenter Margin="-2 0 0 0"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type MenuItem}" x:Key="Main_MenuItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="Border" Background="Transparent">
                            <Grid>
                                <ContentPresenter Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header"/>
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="True" AllowsTransparency="True">
                                    <Border x:Name="SubMenuBorder">
                                        <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                            <Border x:Name="My_Border" Background="{DynamicResource Images1}"/>
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" Margin="2"/>
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Tag" Value="True">
                                <Setter TargetName="My_Border" Property="Background" Value="{DynamicResource Images2}"/>
                            </Trigger>
                            <Trigger Property="Tag" Value="True">
                                <Setter TargetName="My_Border" Property="Background" Value="{DynamicResource Images1}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type MenuItem}">
                        <Border x:Name="Border" BorderBrush="Transparent" BorderThickness="1">
                            <Grid x:Name="My_Grid">
                                <ContentPresenter Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header"/>
                                <Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" 
									   Placement="Right" x:Name="SubMenuPopup" Focusable="False " 
									   AllowsTransparency="True">
                                    <Border x:Name="SubMenuBorder">
                                        <Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
                                            <Border x:Name="My_Border" Margin="-10 0 0 0"/>
                                            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" Margin="2"/>
                                        </Grid>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsHighlighted" Value="true">
                                <Setter TargetName="Border" Property="BorderBrush" Value="Yellow"/>
                                <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsHighlighted" Value="false">
                                <Setter TargetName="Border" Property="BorderThickness" Value="0"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="{DynamicResource Images1}"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="Border" Property="Background" Value="{DynamicResource Images2}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

应用样式

    <Menu Name="menu1" Height="24" Width="40" Margin="20 0 0 0">
        <MenuItem x:Name="My_Menu" Height="80" Width="50" Style="{StaticResource Main_MenuItem}">
            <MenuItem.Header>
                <Label Content="视图"/>
            </MenuItem.Header>
            <MenuItem Header="工程" Tag="true" IsChecked="True" Height="24" Padding="20,0,0,0" Click="MenuItem_Checked"/>
            <MenuItem Header="编译输出" Tag="true" IsChecked="True" Height="24" Padding="20,0,0,0" Click="MenuItem_Checked"/>
            <MenuItem Header="FB/FU" Tag="true" IsChecked="True" Height="24" Padding="20,0,0,0" Click="MenuItem_Checked"/>
            <MenuItem Header="通道" Tag="true" IsChecked="True" Height="24" Padding="20,0,0,0" Click="MenuItem_Checked"/>
            <MenuItem Header="EtherCAT" Tag="true" IsChecked="True" Height="24" Padding="20,0,0,0" Click="MenuItem_Checked"/>
        </MenuItem>
    </Menu>