WPF #1

// Nav bar:

Xaml:

<UserControl x:Class="BankApp.Components.NavPanel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:BankApp.Components"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">

    <Grid
        VerticalAlignment="Top"
        Height="34"
        Background="White"
        Margin="1"
    >

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!--This takes care of the buttons on the left-->
        <StackPanel
                VerticalAlignment="Top"
                Height="34"
                Background="White"
                Grid.Column="0"
                Orientation="Horizontal"
        >

            <local:NavButton
                x:Name="btnHome"
                type="HOME"
                label="Home"
            />

            <local:NavButton
                x:Name="btnTransfer"
                type="TRANSFER"
                label="Transfer"
            />

            <local:NavButton
                x:Name="btnWithdraw"
                type="WITHDRAW"
                label="Withdraw"
            />

            <local:NavButton
                x:Name="btnView"
                type="VIEW"
                label="View Statement"
            />

        </StackPanel>

        <!--This takes care of the buttons on the right-->
        <StackPanel
                VerticalAlignment="Top"
                Height="34"
                Background="White"
                Grid.Column="1"
                Orientation="Horizontal"
        >

            <local:NavButton
                x:Name="btnLogin"
                type="LOGIN"
                label="Login"
                Grid.Column="1"
            />
        </StackPanel>


    </Grid>
</UserControl>

// ============== Nav Buttons =====================
xaml:
<UserControl x:Class="BankApp.Components.NavButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:BankApp.Components"
             mc:Ignorable="d"
             x:Name ="root"
             >

    <local:BaseButton
        Content="{Binding label, ElementName=root}"

    />

</UserControl>

class:
using BankApp.Core;
using BankApp.DependancyClasses;
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 BankApp.Components
{

    public partial class NavButton : UserControl
    {
        // ------------------- Properties -------------------
        public string label
        {
            get { return (string)GetValue(mDepProp_BtnLabel); }
            set { SetValue(mDepProp_BtnLabel, value); }
        }
        public NavType type
        {
            get { return (NavType)GetValue(mDepProp_BtnType); }
            set { SetValue(mDepProp_BtnType, value); }
        }
        //public Style BtnStyle
        //{
        //    get { return (Style)GetValue(mDepProp_BtnStyle); }
        //    set { SetValue(mDepProp_BtnStyle, value); }
        //}

        public event EventHandler<NavClickedEventArgs> onClick;


        // ------------------- Dependency Properties -------------------
        public static readonly DependencyProperty mDepProp_BtnLabel =
            DependencyProperty.Register(
                "label",
                typeof(string),
                typeof(NavButton),
                new PropertyMetadata("Default Label"));


        public static readonly DependencyProperty mDepProp_BtnType =
            DependencyProperty.Register(
                "type",
                typeof(NavType),
                typeof(NavButton),
                new PropertyMetadata(NavType.HOME));



        // Using a DependencyProperty as the backing store for BtnStyle.  This enables animation, styling, binding, etc...
/*        public static readonly DependencyProperty mDepProp_BtnStyle =
            DependencyProperty.Register(
                "BtnStyle",
                typeof(Style),
                typeof(NavButton),
                new PropertyMetadata(null));*/



        public NavButton()
        {
            InitializeComponent();
        }


        // ------------------- Event Handlers -------------------
        private void OnBtnClick(object sender, RoutedEventArgs e)
        {
            var args = new NavClickedEventArgs(label, type);
            MessageBox.Show("Button Clicked");
            onClick?.Invoke(this, args);
        }
    }
}

// Base Button ===============
xaml:

<UserControl x:Class="BankApp.Components.BaseButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:BankApp.Components"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <Button
        Click="OnBtnClick"
        Content="{Binding label, ElementName=root}"
        Style="{Binding btnStyle, ElementName=root}"
        />
</UserControl>


class:
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 BankApp.Components
{
    /// <summary>
    /// Interaction logic for BaseButton.xaml
    /// </summary>
    public partial class BaseButton : UserControl
    {
        public string label
        {
            get { return (string)GetValue(mDepProp_BtnLabel); }
            set { SetValue(mDepProp_BtnLabel, value); }
        }

        public Style btnStyle
        {
            get { return (Style)GetValue(mDepProp_BtnStyle); }
            set { SetValue(mDepProp_BtnStyle, value); }
        }

        public static readonly DependencyProperty mDepProp_BtnLabel =
            DependencyProperty.Register(
                "label",
                typeof(string),
                typeof(BaseButton),
                new PropertyMetadata("Default Button"));

        public static readonly DependencyProperty mDepProp_BtnStyle =
            DependencyProperty.Register(
                "btnStyle",
                typeof(Style),
                typeof(BaseButton),
                new PropertyMetadata(null, OnStyleChanged));

        private static void OnStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is BaseButton btn && e.NewValue is Style style)
            {
                btn.btnStyle = style;
            }
        }

        public BaseButton()
        {
            InitializeComponent();
        }

        private void OnBtnClick(object sender, RoutedEventArgs e)
        {
        }
    }
}

the Style:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


    <Style x:Key="NavButtonStyle" TargetType="Button">
        <Setter Property="Content" Value="Nav"/>
        <Setter Property="Background" Value="Gray"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Margin" Value="2"/>
        <Setter Property="Padding" Value="2"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
    </Style>

</ResourceDictionary>