Goffo.WpfHamburgerMenu 1.1.0

README

What is this repository for?

• This is a custom Hamburger Menu control for WPF applications
• NuGet Package: Goffo.WpfHamburgerMenu
• Learn Markdown

How do I get set up?

• XAML Example

<Window x:Class="HamburgerMenu.WPF.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:HamburgerMenu.WPF"
        xmlns:custom="clr-namespace:WPFHamburgerMenu.CustomControl;assembly=WPFHamburgerMenu.CustomControl"
        xmlns:views="clr-namespace:HamburgerMenu.WPF.Views"
        xmlns:viewmodels="clr-namespace:HamburgerMenu.WPF.ViewModels"
        mc:Ignorable="d"
        Title="Hamburger Menu Demo" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="MenuButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="border" Background="Transparent">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="Background" Value="Transparent" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        
        
        <custom:HamburgerMenuBar Grid.Row="0" 
                                 CheckCommand="{Binding CheckCommand}"
                                 HamburgerBarBackground="#0098DB"
                                 HamburgerBarMargin="0"
                                 HamburgerBarPadding="15"
                                 MenuTitle="Hamburger Menu Demo"
                                 Foreground="White"
                                 FontSize="20"
                                 Margin="0 0 0 3"
                                 Padding="10 0 0 0"
                                 HamburgerWidth="25"
                                 HamburgerHeight="25"
                                 HamburgerBackground="Transparent"
                                 HamburgerFillColor="White">
        </custom:HamburgerMenuBar>
        
        
        <StackPanel Grid.Row="0"
                    Orientation="Horizontal"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center">
            <Button Content="Contact"
                    Background="Transparent"
                    Foreground="White"
                    FontSize="20"
                    Margin="0 0 20 0"
                    BorderThickness="0"
                    BorderBrush="Transparent"
                    Command="{Binding ContactCommand}"
                    Style="{StaticResource MenuButtonStyle}">
            </Button>
            <Button Content="About"
                    Background="Transparent"
                    Foreground="White"
                    FontSize="20"
                    Margin="0 0 20 0"
                    BorderBrush="Transparent"
                    BorderThickness="0"
                    Command="{Binding AboutCommand}"
                    Style="{StaticResource MenuButtonStyle}">
            </Button>

        </StackPanel>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
            
            <custom:HamburgerMenu
                x:Name="menu"
                Grid.Column="0"
                Background="#f2f2f2"
                BorderBrush="#dbdbdb"
                BorderThickness="0 0 1 0"
                FallbackOpenWidth="300"
                IsOpen="{Binding IsChecked, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                OpenCloseDuration="0:0:0.25">
                
                <custom:HamburgerMenu.Resources>
                    <Style TargetType="custom:HamburgerMenuItem">
                        <Setter Property="Padding" Value="20 10" />
                        <Setter Property="FontSize" Value="16" />
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Foreground" Value="#444" />
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
                                            To="#dbdbdb"
                                            Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                            To="Transparent"
                                            Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground" Value="#1669bb" />
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Foreground" Value="#1669bb" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </custom:HamburgerMenu.Resources>
                
                <custom:HamburgerMenu.Content>
                    <StackPanel Margin="0 10">
                        <custom:HamburgerMenuItem x:Name="HomeItem" Content="Home" Command="{Binding UpdateViewCommand}" CommandParameter="Home"></custom:HamburgerMenuItem>
                        <custom:HamburgerMenuItem Content="Work" Command="{Binding UpdateViewCommand}" CommandParameter="Work"></custom:HamburgerMenuItem>
                    </StackPanel>
                </custom:HamburgerMenu.Content>
            </custom:HamburgerMenu>
            
            
            <ContentControl Grid.Column="1" Content="{Binding CurrentViewModel}">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type viewmodels:HomeViewModel}">
                        <views:HomeView />
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type viewmodels:WorkViewModel}">
                        <views:WorkView></views:WorkView>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type viewmodels:ContactViewModel}">
                        <views:ContactView></views:ContactView>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type viewmodels:AboutViewModel}">
                        <views:AboutView></views:AboutView>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
        </Grid>
    </Grid>
</Window>

• MainViewModel (and BaseViewModel) Code Behind

    public class BaseViewModel : INotifyPropertyChanged
    {
        #region Notify Property Changed Event

        public event PropertyChangedEventHandler? PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion

    }

    public class MainViewModel : BaseViewModel
    {
        public MainViewModel()
        {
            UpdateViewCommand = new UpdateViewCommand(this);
            CheckCommand = new CheckCommand(this);
            ContactCommand = new ContactCommand(this);
            AboutCommand = new AboutCommand(this);
        }

        #region Properties

        private BaseViewModel? _currentViewModel;

        public BaseViewModel? CurrentViewModel
        {
            get => _currentViewModel;
            set
            {
                if (value is null || _currentViewModel == value)
                {
                    return;
                }

                _currentViewModel = value;
                OnPropertyChanged(nameof(CurrentViewModel));
            }
        }

        private bool _isChecked = true;

        public bool IsChecked
        {
            get => _isChecked;

            set
            {
                if(_isChecked == value)
                {
                    return;
                }

                _isChecked = value;
                OnPropertyChanged(nameof(IsChecked));
            }
        }

        #endregion

        #region Methods

        public void ToggleIsChecked()
        {
            IsChecked = !IsChecked;
        }

        #endregion

        #region Commands

        public ICommand UpdateViewCommand { get; set; }
        public ICommand CheckCommand { get; set; }
        public ICommand ContactCommand { get; set; }
        public ICommand AboutCommand { get; set; }

        #endregion
    }

• Commands

    public abstract class BaseCommand : ICommand
    {
        public event EventHandler? CanExecuteChanged;

        public virtual bool CanExecute(object? parameter) => true;

        public abstract void Execute(object? parameter);

        public void OnCanExecuteChange()
        {
            CanExecuteChanged?.Invoke(this, EventArgs.Empty);
        }

    }
	
	
	    public class UpdateViewCommand : BaseCommand
    {
        private readonly MainViewModel _mainViewModel;

        public UpdateViewCommand(MainViewModel mainViewModel)
        {
            _mainViewModel = mainViewModel;
        }

        public override void Execute(object? parameter)
        {
            if(parameter is null)
            {
                return;
            }

            string? view = parameter.ToString();

            if (string.IsNullOrEmpty(view))
            {
                return;
            }

            switch (view)
            {
                case "Home":
                    _mainViewModel.CurrentViewModel = new HomeViewModel();
                    break;
                case "Work":
                    _mainViewModel.CurrentViewModel = new WorkViewModel();
                    break;
                case "Contact":
                    _mainViewModel.CurrentViewModel = new ContactViewModel();
                    break;
                case "About":
                    _mainViewModel.CurrentViewModel = new AboutViewModel();
                    break;
                default:
                    break;
            }
        }
    }


    public class CheckCommand : BaseCommand
    {
        private readonly MainViewModel _mainViewModel;

        public CheckCommand(MainViewModel mainViewModel)
        {
            _mainViewModel = mainViewModel;
        }

        public override void Execute(object? parameter)
        {
            _mainViewModel.ToggleIsChecked();
        }
    }
	
	    public class AboutCommand : BaseCommand
    {
        private readonly MainViewModel _mainViewModel;

        public AboutCommand(MainViewModel mainViewModel)
        {
            _mainViewModel = mainViewModel;
        }

        public override void Execute(object? parameter)
        {
            _mainViewModel.UpdateViewCommand.Execute("About");
        }
    }
}


    public class ContactCommand : BaseCommand
    {
        private readonly MainViewModel _mainViewModel;

        public ContactCommand(MainViewModel mainViewModel)
        {
            _mainViewModel = mainViewModel;
        }

        public override void Execute(object? parameter)
        {
            _mainViewModel.UpdateViewCommand.Execute("Contact");
        }
    }

Contribution guidelines

• Contact Repo owner or admin

Who do I talk to?

• Contact Repo owner or admin
• Other community or team contact