WPF 左侧菜单栏的客户端小程序

WPF 左侧菜单栏的客户端小程序
首先看看效果:
在这里插入图片描述
在这里插入图片描述
程序集:
在这里插入图片描述

xaml代码:

<Window x:Class="WPFMeunuUI.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:WPFMeunuUI"
        mc:Ignorable="d"
        Title="MainWindow" Height="600" Width="800" ResizeMode="NoResize" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <!--Toggle Button Style Template-->
        <ImageBrush x:Key="tb_mouse_over" ImageSource="Images/menu2.png"></ImageBrush>
        <Style x:Key="font_style" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="微软雅黑"></Setter>
            <Setter Property="VerticalAlignment" Value="Center"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
        <!--Tool Tip Style Template-->
        <Style TargetType="ToolTip" x:Key="tt_style">
            <Setter Property="Placement" Value="Right"></Setter>
            <Setter Property="Height" Value="40"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="Margin" Value="20,0,0,0"></Setter>
            <Setter Property="Background" Value="#4A5668"></Setter>
            <Setter Property="BorderBrush" Value="Transparent"></Setter>
            <Setter Property="Foreground" Value="White"></Setter>
            <Setter Property="FontFamily" Value="微软雅黑"></Setter>
            <Setter Property="FontSize" Value="16"></Setter>
            <Setter Property="PlacementRectangle" Value="60,0,0,0"></Setter>
            <Setter Property="HorizontalOffset" Value="15"></Setter>
            <Setter Property="VerticalOffset" Value="6"></Setter>
            <Setter Property="HasDropShadow" Value="True"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
        </Style>
        <!--App Close Button Style Template-->
        <ImageBrush x:Key="CloseBtn_MouseOver" ImageSource="CloseImages/close2.png"></ImageBrush>
        <Style x:Key="Close_btn" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="button"
                                BorderThickness="0"
                                Background="{TemplateBinding Background}"
                                SnapsToDevicePixels="True"></Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="button" Value="{StaticResource CloseBtn_MouseOver}"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="tb_style" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border x:Name="border" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                            
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource tb_mouse_over}"></Setter>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource tb_mouse_over}"></Setter>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource tb_mouse_over}"></Setter>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource tb_mouse_over}"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <!--Background Color-->
        <Grid Background="Black">
            <!--Background Image-->
            <Grid x:Name="BG" PreviewMouseLeftButtonDown="BG_PreviewMouseLeftButtonDown">
                <Grid.Background >
                    <ImageBrush x:Name="img_bg" Stretch="Fill" ImageSource="Background/timg.jpg"></ImageBrush>
                </Grid.Background>
            </Grid>
            <!--App Close Button-->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="60"></ColumnDefinition>
                    <ColumnDefinition Width="30"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Button x:Name="CloseBtn" Grid.Column="1" Grid.Row="1" Height="40" Width="40" BorderThickness="0" Style="{StaticResource Close_btn}" Click="CloseBtn_Click">
                    <Button.Background>
                        <ImageBrush ImageSource="CloseImages/close0.png"></ImageBrush>
                    </Button.Background>
                </Button>
            </Grid>
            <!--Navigation Panel-->
            <Grid x:Name="nav_pnl" HorizontalAlignment="Left" Width="65" Background="#2E333A">
                
                <StackPanel x:Name="st_pnl">
                    <!--Grid for the Menu Toggle Button-->
                    <Grid Height="90">
                        <!--Menu Title-->
                        <TextBlock Grid.Row="1" Grid.Column="0" Margin="73,-20,0,0" Text="M E N U" Foreground="White" FontSize="22" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource font_style}">
                            <!--Shadow Effect-->
                            <TextBlock.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="1" Direction="-90" Color="White"></DropShadowEffect>
                            </TextBlock.Effect>
                        </TextBlock>

                        <!--Toggle Button-->
                        <ToggleButton x:Name="Tg_Btn" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="18,-20,0,0" Height="30" Width="30" BorderThickness="0" Style="{StaticResource tb_style}" Unchecked="Tg_Btn_Unchecked" Checked="Tg_Btn_Checked">
                            <!--Toggle button default background image-->
                            <ToggleButton.Background>
                                <ImageBrush  Stretch="None" ImageSource="Images/menu.png"></ImageBrush>
                            </ToggleButton.Background>
                            <!--Toggle Button Checked \ unChecked events-->
                            <ToggleButton.Triggers>
                                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                                    <BeginStoryboard>
                                        <Storyboard x:Name="HideStackPanel">
                                            <DoubleAnimation Storyboard.TargetName="nav_pnl" Storyboard.TargetProperty="Width" BeginTime="0:0:0" Duration="0:0:0.2">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                
                                <EventTrigger RoutedEvent="ToggleButton.Checked">
                                    <BeginStoryboard>
                                        <Storyboard x:Name="ShowStackPanel">
                                            <DoubleAnimation Storyboard.TargetName="nav_pnl" Storyboard.TargetProperty="Width" BeginTime="0:0:0" From="65" To="230" Duration="0:0:0.3"></DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </ToggleButton.Triggers>
                        </ToggleButton>
                    </Grid>
                    <!--ListView with menu List items-->
                    <ListView x:Name="LV" Background="Transparent" BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                        <!--Home-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/home.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Home" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_home" Content="Home" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Contacts-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/contacts.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Contacts" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_contacts" Content="Contacts" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Messages-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/messages.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Messages" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_messages" Content="Messages" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Maps-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/map.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Maps" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_maps" Content="Maps" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Setting-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/setting.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Setting" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_setting" Content="Setting" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Sign out-->
                        <ListViewItem HorizontalAlignment="Left" Margin="0,0,0,15" MouseEnter="ListViewItem_MouseEnter">
                            <StackPanel Orientation="Horizontal" Width="230">
                                <Image Source="Images/Signout.png" Stretch="None" Margin="12,0,0,0"></Image>
                                <TextBlock Text="Sign Out" Margin="25,0,0,0" Style="{StaticResource font_style}"></TextBlock>
                            </StackPanel>
                            <!--Tool Tip-->
                            <ListViewItem.ToolTip>
                                <ToolTip x:Name="tt_signout" Content="Sign Out" Style="{StaticResource tt_style}"></ToolTip>
                            </ListViewItem.ToolTip>
                        </ListViewItem>
                        <!--Listview items style template-->
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type ListViewItem}">
                                            <Border x:Name="Bd"
                                                    Height="50"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="{TemplateBinding BorderThickness}"
                                                    Background="{TemplateBinding Background}"
                                                    Padding="{TemplateBinding Padding}"
                                                    SnapsToDevicePixels="True">
                                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"></ContentPresenter>
                                            </Border>
                                            <ControlTemplate.Triggers>
                                                <MultiTrigger>
                                                    <MultiTrigger.Conditions>
                                                        <Condition Property="IsMouseOver" Value="true"></Condition>
                                                    </MultiTrigger.Conditions>
                                                    <Setter Property="Background" TargetName="Bd" Value="#404D5B"></Setter>
                                                    <Setter Property="BorderBrush" TargetName="Bd" Value="#404D5B"></Setter>
                                                </MultiTrigger>
                                                <MultiTrigger>
                                                    <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="true"></Condition>
                                                    </MultiTrigger.Conditions>
                                                    <Setter Property="Background" TargetName="Bd" Value="#708090"></Setter>
                                                    <Setter Property="BorderBrush" TargetName="Bd" Value="#708090"></Setter>
                                                </MultiTrigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </StackPanel>
            </Grid>
        </Grid>
    </Grid>
</Window>

主程序后台代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WPFMeunuUI
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ListViewItem_MouseEnter(object sender, MouseEventArgs e)
        {
            //Set tooltip visibility
            if(Tg_Btn.IsChecked == true)
            {
                tt_home.Visibility = Visibility.Collapsed;
                tt_contacts.Visibility = Visibility.Collapsed;
                tt_messages.Visibility = Visibility.Collapsed;
                tt_maps.Visibility = Visibility.Collapsed;
                tt_setting.Visibility = Visibility.Collapsed;
                tt_signout.Visibility = Visibility.Collapsed;
            }
            else
            {
                tt_home.Visibility = Visibility.Visible;
                tt_contacts.Visibility = Visibility.Visible;
                tt_messages.Visibility = Visibility.Visible;
                tt_maps.Visibility = Visibility.Visible;
                tt_setting.Visibility = Visibility.Visible;
                tt_signout.Visibility = Visibility.Visible;
            }
        }

        private void Tg_Btn_Unchecked(object sender, RoutedEventArgs e)
        {
            img_bg.Opacity = 1;
        }

        private void Tg_Btn_Checked(object sender, RoutedEventArgs e)
        {
            img_bg.Opacity = 0.3;
        }

        private void BG_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Tg_Btn.IsChecked = false;
        }

        private void CloseBtn_Click(object sender, RoutedEventArgs e)
        {
            Close();
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值