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();
}
}
}