File Manager Part-3 - CardButtons Custom Control

XAML:

<UserControl x:Class="FileManagerUI.Custom_Controls.CardButtons"
             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:FileManagerUI.Custom_Controls"
             mc:Ignorable="d" x:Name="_cardButton"
             d:DesignHeight="150" d:DesignWidth="250" MinHeight="150" MinWidth="250">
    <UserControl.Resources>
        <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderBrush" Value="#FF707070"/>
            <Setter Property="Foreground" Value="DarkSlateGray"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="20" SnapsToDevicePixels="True">
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="True">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#3BA2EA"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF3C7FB1"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#3BA2EA"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter Property="Background" TargetName="border" Value="#3BA2EA"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="border" Value="lightslategray"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                                <Setter Property="Foreground" Value="#FF838383"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="buttonIconBackground" TargetType="Border">
            <Setter Property="Background" Value="{Binding ElementName=_cardButton, Path=IconBackground}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                    <Setter Property="Background" Value="{Binding ElementName=_cardButton, Path=IconBackgroundMouseOver}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="TextStyle1" TargetType="TextBlock">
            <Setter Property="Margin" Value="25,0,0,0"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Foreground" Value="DarkSlateGray"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="true">
                    <Setter Property="Foreground" Value="White"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="TextStyle2" TargetType="TextBlock">
            <Setter Property="Margin" Value="25,0,0,0"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="LightSlateGray"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="true">
                    <Setter Property="Foreground" Value="White"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="ProgressBarStyle" TargetType="local:CircularProgressBar">
            <Setter Property="Margin" Value="0,0,0,22"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Height" Value="54"/>
            <Setter Property="Width" Value="54"/>
            <Setter Property="Value" Value="{Binding ElementName=_cardButton, Path=Progress}"/>
            <Setter Property="FontSize" Value="{Binding ElementName=_cardButton, Path=FontSize}"/>
            <Setter Property="ArcThickness" Value="{Binding ElementName=_cardButton, Path=ProgressBarThickness}"/>
            <Setter Property="BackgroundBrush" Value="{Binding ElementName=_cardButton, Path=ProgressBackgroundBrush}"/>
            <Setter Property="IndicatorBrush" Value="{Binding ElementName=_cardButton, Path=ProgressIndicatorBrush}"/>
            <Setter Property="PFontColor" Value="{Binding ElementName=_cardButton,Path=ProgressTextColor}"/>
            <Setter Property="PFontWeight" Value="{Binding ElementName=_cardButton,Path=ProgressTextWeight}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button, Mode=FindAncestor}}" Value="True">
                    <Setter Property="BackgroundBrush" Value="{Binding ElementName=_cardButton, Path=ProgressBackgroundBrushMouseOver}"/>
                    <Setter Property="IndicatorBrush" Value="{Binding ElementName=_cardButton, Path=ProgressIndicatorBrushMouseOver}"/>
                    <Setter Property="PFontColor" Value="{Binding ElementName=_cardButton,Path=ProgressTextColorMouseOver}"/>
                    <Setter Property="PFontWeight" Value="{Binding ElementName=_cardButton,Path=ProgressTextWeightMouseOver}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button Style="{DynamicResource ButtonStyle}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Border Grid.Column="0" Grid.Row="0" CornerRadius="10" HorizontalAlignment="Left" Margin="25,5,0,0" VerticalAlignment="Center" Height="35" Width="35" Style="{StaticResource buttonIconBackground}">
                    <Image Width="20" Stretch="Uniform" Source="{Binding ElementName=_cardButton, Path=imageSource, TargetNullValue={x:Null}}"/>
                </Border>
                <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Vertical" VerticalAlignment="Stretch">
                    <TextBlock Text="{Binding ElementName=_cardButton, Path=text1}" Style="{StaticResource TextStyle1}"/>
                    <TextBlock Text="{Binding ElementName=_cardButton, Path=text2}" Style="{StaticResource TextStyle2}"/>
                </StackPanel>
                <local:CircularProgressBar Grid.Column="1" Grid.RowSpan="2"  Style="{StaticResource ProgressBarStyle}"/>
            </Grid>
        </Button>
    </Grid>
</UserControl>

///Code Behind (.cs)

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace FileManagerUI.Custom_Controls
{
    /// <summary>
    /// Interaction logic for CardButtons.xaml
    /// </summary>
    public partial class CardButtons : UserControl
    {
        public CardButtons()
        {
            InitializeComponent();
        }


        public Uri imageSource
        {
            get { return (Uri)GetValue(imageSourceProperty); }
            set { SetValue(imageSourceProperty, value); }
        }

        // Using a DependencyProperty as the backing store for imageSource.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty imageSourceProperty =
            DependencyProperty.Register("imageSource", typeof(Uri), typeof(CardButtons));



        public string text1
        {
            get { return (string)GetValue(text1Property); }
            set { SetValue(text1Property, value); }
        }

        // Using a DependencyProperty as the backing store for text1.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty text1Property =
            DependencyProperty.Register("text1", typeof(string), typeof(CardButtons));



        public string text2
        {
            get { return (string)GetValue(text2Property); }
            set { SetValue(text2Property, value); }
        }

        // Using a DependencyProperty as the backing store for text2.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty text2Property =
            DependencyProperty.Register("text2", typeof(string), typeof(CardButtons));

        public SolidColorBrush IconBackground
        {
            get { return (SolidColorBrush)GetValue(IconBackgroundProperty); }
            set { SetValue(IconBackgroundProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackgroundBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IconBackgroundProperty =
            DependencyProperty.Register("IconBackground", typeof(SolidColorBrush), typeof(CardButtons));

        public SolidColorBrush IconBackgroundMouseOver
        {
            get { return (SolidColorBrush)GetValue(IconBackgroundMouseOverProperty); }
            set { SetValue(IconBackgroundMouseOverProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IconBackgroundMouseOverProperty =
            DependencyProperty.Register("IconBackgroundMouseOver", typeof(SolidColorBrush), typeof(CardButtons));

        public Brush ProgressTextColor
        {
            get { return (Brush)GetValue(ProgressTextProperty); }
            set { SetValue(ProgressTextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressTextProperty =
            DependencyProperty.Register("ProgressTextColor", typeof(Brush), typeof(CardButtons));

        public FontWeight ProgressTextWeight
        {
            get { return (FontWeight)GetValue(ProgressTextWeightProperty); }
            set { SetValue(ProgressTextWeightProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackgroundBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressTextWeightProperty =
            DependencyProperty.Register("ProgressTextWeight", typeof(FontWeight), typeof(CardButtons));

        public Brush ProgressTextColorMouseOver
        {
            get { return (Brush)GetValue(ProgressTextColorMouseOverProperty); }
            set { SetValue(ProgressTextColorMouseOverProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressTextColorMouseOverProperty =
            DependencyProperty.Register("ProgressTextColorMouseOver", typeof(Brush), typeof(CardButtons));

        public FontWeight ProgressTextWeightMouseOver
        {
            get { return (FontWeight)GetValue(ProgressTextWeightMouseOverProperty); }
            set { SetValue(ProgressTextWeightMouseOverProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackgroundBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressTextWeightMouseOverProperty =
            DependencyProperty.Register("ProgressTextWeightMouseOver", typeof(FontWeight), typeof(CardButtons));


        public int Progress
        {
            get { return (int)GetValue(ProgressProperty); }
            set { SetValue(ProgressProperty, value); }
        }
        public int ProgressBarThickness
        {
            get { return (int)GetValue(ProgressBarThicknessProperty); }
            set { SetValue(ProgressBarThicknessProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ArcThickness.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressBarThicknessProperty =
            DependencyProperty.Register("ProgressBarThickness", typeof(int), typeof(CardButtons));

        // Using a DependencyProperty as the backing store for Progress.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressProperty =
            DependencyProperty.Register("Progress", typeof(int), typeof(CardButtons));

        public Brush ProgressIndicatorBrush
        {
            get { return (Brush)GetValue(ProgressIndicatorBrushProperty); }
            set { SetValue(ProgressIndicatorBrushProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressIndicatorBrushProperty =
            DependencyProperty.Register("ProgressIndicatorBrush", typeof(Brush), typeof(CardButtons));

        public Brush ProgressBackgroundBrush
        {
            get { return (Brush)GetValue(ProgressBackgroundBrushProperty); }
            set { SetValue(ProgressBackgroundBrushProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackgroundBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressBackgroundBrushProperty =
            DependencyProperty.Register("ProgressBackgroundBrush", typeof(Brush), typeof(CardButtons));

        public Brush ProgressIndicatorBrushMouseOver
        {
            get { return (Brush)GetValue(ProgressIndicatorBrushMouseOverProperty); }
            set { SetValue(ProgressIndicatorBrushMouseOverProperty, value); }
        }

        // Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressIndicatorBrushMouseOverProperty =
            DependencyProperty.Register("ProgressIndicatorBrushMouseOver", typeof(Brush), typeof(CardButtons));

        public Brush ProgressBackgroundBrushMouseOver
        {
            get { return (Brush)GetValue(ProgressBackgroundBrushMouseOverProperty); }
            set { SetValue(ProgressBackgroundBrushMouseOverProperty, value); }
        }

        // Using a DependencyProperty as the backing store for BackgroundBrush.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ProgressBackgroundBrushMouseOverProperty =
            DependencyProperty.Register("ProgressBackgroundBrushMouseOver", typeof(Brush), typeof(CardButtons));

    }
}