zoukankan      html  css  js  c++  java
  • WPF横向导航菜单

    一、序言

        记得没出来工作就开始逛博客园了,这个博客网站做的很好,有很多大神都在里面,当然也有了优质的技术文章,好了,言归正传。这篇博文讲的是做一个横向导航菜单,毕竟菜单是常用的,要多练习练习,就仿照博客园个人博客主页的菜单做一个。

    二、该菜单使用Menu控件 

       1、前端xmal代码如下

    <Window x:Class="WpfApp1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid>
            <Menu>
                <MenuItem Header="首页"/>
                <MenuItem Header="新随笔"/>
                <MenuItem Header="联系"/>
                <MenuItem Header="订阅"/>
                <MenuItem Header="管理"/>
            </Menu>
        </Grid>
    </Window>

     2、运行起来看下效果图

     3、基本功能做完了就要实现以下效果提升用户体验了,现在要把鼠标移到菜单项上背景色变为蓝色,下面是xmal代码:

    <Window x:Class="WpfApp1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid>
            <Menu>
                <MenuItem Header="首页">
                    <MenuItem.Template>
                        <ControlTemplate TargetType="MenuItem">
                            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="首页" Background="LightGray"></TextBlock>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </MenuItem.Template>
                </MenuItem>
                <MenuItem Header="新随笔">
                    <MenuItem.Template>
                        <ControlTemplate TargetType="MenuItem">
                            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="新随笔" Background="LightGray"></TextBlock>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </MenuItem.Template>
                </MenuItem>
                <MenuItem Header="联系">
                    <MenuItem.Template>
                        <ControlTemplate TargetType="MenuItem">
                            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="联系" Background="LightGray"></TextBlock>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </MenuItem.Template>
                </MenuItem>
                <MenuItem Header="订阅">
                    <MenuItem.Template>
                        <ControlTemplate TargetType="MenuItem">
                            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="订阅" Background="LightGray"></TextBlock>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </MenuItem.Template>
                </MenuItem>
                <MenuItem Header="管理">
                    <MenuItem.Template>
                        <ControlTemplate TargetType="MenuItem">
                            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="管理" Background="LightGray"></TextBlock>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </MenuItem.Template>
                </MenuItem>
            </Menu>
        </Grid>
    </Window>

    3.1、上面每个菜单项都用了重复模板,有点鸡肋,现在要把这个模板抽象出来


       3.1.1、创建资源字典

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:WpfApp1.Dictionary">
        <ControlTemplate x:Key="MenuItemTemplate" TargetType="MenuItem">
            <TextBlock x:Name="txt" Padding="2,2,2,2" Text="首页"  Background="LightGray"></TextBlock>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="txt" Property="Background" Value="Blue"></Setter>
                    <Setter TargetName="txt" Property="Padding" Value="2,2,2,2"></Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ResourceDictionary>

       3.1.2、集成资源字典

    <Application x:Class="WpfApp1.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:WpfApp1"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="DictionaryDictionaryMenu.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>

       3.1.3、使用资源字典

    <Window x:Class="WpfApp1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid>
            <Menu>
                <MenuItem Header="首页" Name="ddd" Template="{StaticResource MenuItemTemplate}">
                </MenuItem>
                <MenuItem Header="新随笔" Name="ddd1" Template="{StaticResource MenuItemTemplate}">
                </MenuItem>
                <MenuItem Header="联系" Name="ddd2"  Template="{StaticResource MenuItemTemplate}">
                </MenuItem>
                <MenuItem Header="订阅" Name="ddd4" Template="{StaticResource MenuItemTemplate}">
                </MenuItem>
                <MenuItem Header="管理" Name="ddd5" Template="{StaticResource MenuItemTemplate}">
                </MenuItem>
            </Menu>
        </Grid>
    </Window>

       3.1.4、运行效果图,上面的资源字典控件模板里面Text的值如何动态绑定?

  • 相关阅读:
    堆排序
    上线打包不常见错误整理
    ios开发者相关的几个apple邮箱
    App被拒选择回复还是重新提审,如何选择最高效的应对方式?
    iOS证书(.p12)和描述文件(.mobileprovision)申请
    OC与Swift混编
    tableViewCell重用
    tabBar选择不同item设置标题不同颜色
    iOS 关于TouchID指纹解锁的实现
    cocoaPods报错You need at least git version 1.8.5 to use CocoaPods
  • 原文地址:https://www.cnblogs.com/772933011qq/p/10695522.html
Copyright © 2011-2022 走看看