WPF實(shí)現(xiàn)抽屜菜單效果的示例代碼

第WPF實(shí)現(xiàn)抽屜菜單效果的示例代碼Style

TargetType="controls:DrawerMenuItem"

Setter

Property="HorizontalContentAlignment"

Value="Stretch"

/

Setter

Property="Foreground"

Value="{Binding

RelativeSource={RelativeSource

AncestorType={x:Type

controls:DrawerMenu}},

Path=MenuItemForeground}"/

Setter

Property="SelectionIndicatorColor"

Value="{Binding

RelativeSource={RelativeSource

AncestorType={x:Type

controls:DrawerMenu}},

Path=SelectionIndicatorColor}"/

Setter

Property="Template"

Setter.Value

ControlTemplate

TargetType="controls:DrawerMenuItem"

Button

x:Name="PART_Button"

Height="44"

Command="{TemplateBinding

SelectionCommand}"

ToolTip="{TemplateBinding

Text}"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch"

Grid

Grid.ColumnDefinitions

ColumnDefinition

Width="5"/

ColumnDefinition/

/Grid.ColumnDefinitions

Grid

Grid.ColumnSpan="2"

Grid

Width="300"

Grid.ColumnDefinitions

ColumnDefinition

Width="45"/

ColumnDefinition/

/Grid.ColumnDefinitions

Image

Grid.Column="0"

Source="{TemplateBinding

Icon}"

Margin="10,5,5,5"/

TextBlock

Text="{TemplateBinding

Text}"

Grid.Column="1"

Margin="10,0,0,0"

HorizontalAlignment="Left"

VerticalAlignment="Center"

FontSize="{StaticResource

TitleFontSize}"

Foreground="{TemplateBinding

Foreground}"

TextWrapping="Wrap"/

/Grid

/Grid

Grid

Name="PART_ItemSelectedIndicator"

Grid.Column="0"

Background="{TemplateBinding

SelectionIndicatorColor}"

Visibility="Collapsed"

/

/Grid

/Button

ControlTemplate.Triggers

Trigger

Property="IsSelected"

Value="True"

Setter

TargetName="PART_ItemSelectedIndicator"

Property="Visibility"

Value="Visible"

/

/Trigger

Trigger

SourceName="PART_Button"

Property="IsPressed"

Value="True"

Trigger.ExitActions

BeginStoryboard

Storyboard

BooleanAnimationUsingKeyFrames

Storyboard.TargetProperty="IsSelected"

DiscreteBooleanKeyFrame

KeyTime="00:00:00"

Value="True"

/

/BooleanAnimationUsingKeyFrames

/Storyboard

/BeginStoryboard

/Trigger.ExitActions

/Trigger

/ControlTemplate.Triggers

/ControlTemplate

/Setter.Value

/Setter

/Style

Style

TargetType="controls:DrawerMenu"

Setter

Property="Width"

Value="50"/

Setter

Property="Visibility"

Value="Visible"/

Setter

Property="IsOpen"

Value="True"/

Setter

Property="Template"

Setter.Value

ControlTemplate

TargetType="controls:DrawerMenu"

Grid

Background="{TemplateBinding

Background}"

ToggleButton

HorizontalAlignment="Left"

Background="#333"

VerticalAlignment="Top"

Height="40"

Width="50"

IsChecked="{Binding

RelativeSource={RelativeSource

AncestorType={x:Type

controls:DrawerMenu}},

Path=IsOpen}"

Path

HorizontalAlignment="Center"

VerticalAlignment="Center"

Stretch="Uniform"

Width="20"

Fill="{TemplateBinding

MenuIconColor}"

Data="{StaticResource

PathMenu}"/

/ToggleButton

ListBox

ItemsSource="{TemplateBinding

Content}"

HorizontalAlignment="Left"

Margin="0,40,0,0"

VerticalAlignment="Top"

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

SelectedIndex="0"/

/Grid

/ControlTemplate

/Setter.Value

/Setter

Style.Triggers

Trigger

Property="IsOpen"

Value="False"

Trigger.EnterActions

BeginStoryboard

Storyboard

DoubleAnimation

Storyboard.TargetProperty="Width"

To="180"

Duration="0:0:0.2"/

/Storyboard

/BeginStoryboard

/Trigger.EnterActions

Trigger.ExitActions

BeginStoryboard

Storyboard

DoubleAnimation

Storyboard.TargetProperty="Width"

To="50"

Duration="0:0:0.2"/

/Storyboard

/BeginStoryboard

/Trigger.ExitActions

/Trigger

/Style.Triggers

/Style

/ResourceDictionary

4）DrawerMenuExample.xaml代碼如下。

UserControl

x:

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

xmlns:mc="/markup-compatibility/2006"

xmlns:d="/expression/blend/2008"

xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews.DrawerMenu"

xmlns:wpfdev="/WPFDevelopersOrg/WPFDevelopers"

mc:Ignorable="d"

d:DesignHeight="450"

d:DesignWidth="800"

Grid

Background="#FF7B7BFF"

Grid.ColumnDefinitions

ColumnDefinition

Width="Auto"/

ColumnDefinition/

/Grid.ColumnDefinitions

wpfdev:DrawerMenu

Background="#eee"

SelectionIndicatorColor="{StaticResource

PrimaryPressedSolidColorBrush}"

MenuItemForeground="{StaticResource

BlackSolidColorBrush}"

HorizontalAlignment="Left"

wpfdev:DrawerMenu.Content

wpfdev:DrawerMenuItem

Icon="pack://application:,,,/Images/CircularMenu/2.png"

Text="主頁(yè)"

SelectionCommand="{Binding

HomeCommand,RelativeSource={RelativeSource

AncestorType=local:DrawerMenuExample}}"/

wpfdev:DrawerMenuItem

Icon="pack://application:,,,/Images/CircularMenu/4.png"

Text="Edge"

SelectionCommand="{Binding

EdgeCommand,RelativeSource={RelativeSource

AncestorType=local:DrawerMenuExample}}"/

wpfdev:DrawerMenuItem

Icon="pack://application:,,,/Images/CircularMenu/1.png"

Text="云盤"

SelectionCommand="{Binding

CloudCommand,RelativeSource={RelativeSource

AncestorType=local:DrawerMenuExample}}"/

wpfdev:DrawerMenuItem

Icon="pack://application:,,,/Images/CircularMenu/8.png"

Text="郵件"

SelectionCommand="{Binding

MailCommand,RelativeSource={RelativeSource

AncestorType=local:DrawerMenuExample}}"/

wpfdev:DrawerMenuItem

Icon="pack://application:,,,/Images/CircularMenu/6.png"

Text="視頻"

SelectionCommand="{Binding

VideoCommand,RelativeSource={RelativeSource

AncestorType=local:DrawerMenuExample}}"/

/wpfdev:DrawerMenu.Content

/wpfdev:DrawerMenu

Frame

Name="myFrame"

Grid.Column="1"

Margin="0,40,0,0"

NavigationUIVisibility="Hidden"/Frame

/Grid

/UserControl

5）DrawerMenuExample.xaml.cs代碼如下。

using

System;

using

System.Collections.Generic;

using

System.Linq;

using

System.Windows;

using

System.Windows.Controls;

using

System.Windows.Input;

using

System.Windows.Media;

using

WPFDevelopers.Samples.Helpers;

namespace

WPFDevelopers.Samples.ExampleViews.DrawerMenu

///

summary

///

Win10MenuExample.xaml

的交互邏輯

///

/summary

public

partial

class

DrawerMenuExample

:

UserControl

{

private

ListUri

_uriList

=

new

ListUri()

{

new

Uri("ExampleViews/DrawerMenu/HomePage.xaml",UriKind.Relative),

new

Uri("ExampleViews/DrawerMenu/EdgePage.xaml",UriKind.Relative),

};

public

DrawerMenuExample()

{

InitializeComponent();

myFrame.Navigate(_uriList[0]);

}

public

ICommand

HomeCommand

=

new

RelayCommand(obj

=

{

myFrame.Navigate(_uriList[0]);

});

public

ICommand

EdgeCommand

=

new

RelayCommand(obj

=

{

myFrame.Navigate(_uriList[1]);

});

public

ICommand

CloudCommand

=

new

RelayCommand(obj

=

{

WPFDevelopers.Minimal.Controls.MessageBox.Show("點(diǎn)擊了云盤","提示");

});

public

ICommand

MailCommand

=

new

RelayCommand(obj

=

{

WPFDevelopers.Minimal.Controls.MessageBox.Show("點(diǎn)擊了郵件","提示");

});

public

ICommand

VideoCommand

=

new

RelayCommand(obj

=

{

WPFDevelopers.Minimal.Controls.MessageBox.Show("點(diǎn)擊了視頻","提示");

});

}

6）HomePage.xaml.cs代碼如下。

Page

x:

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

xmlns:mc="/markup-compatibility/2006"

xmlns:d="/expression/blend/2008"

xmlns:local="clr-namespace:WPFDevelopers.Samples.ExampleViews.DrawerMenu"

mc:Ignorable="d"

d:DesignHeight="450"

d:DesignWidth="800"

Title="HomePage"

Background="{StaticResource

PrimaryTextSolidColorBrush}"

Grid

TextBlock

VerticalAlignment="Center"

HorizontalAlignment="Center"

Width="400"

TextAlignment="Center"

TextWrapping="Wrap"

Margin="0,0,0,40"

FontSize="{StaticResource

NormalFontSize}"

Run

Foreground="White"Home/Run

Run

Text="微信公眾號(hào)

WPFDevelopers"

FontSize="40"

Foreground="#A9CC32"

FontWeight="Bold"/Run

LineBreak/

Hyperlink

NavigateUri="/WPFDevelopersOrg/WPFDevelopers.git"

RequestNavigate="GithubHyperlink_RequestNavigate"

Github

源代碼/Hyperlink

Run/