C4IT-F4SD-Client/FasdDesktopUi/Basics/UserControls/SelectionPill.xaml

<UserControl x:Class="FasdDesktopUi.Basics.UserControls.SelectionPill"
             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:FasdDesktopUi.Basics.UserControls"
             xmlns:ico="clr-namespace:FasdDesktopUi.Basics.UserControls.AdaptableIcon;assembly=F4SD-AdaptableIcon"
             mc:Ignorable="d"
             d:DesignHeight="450"
             d:DesignWidth="800"
             d:Background="White"
             x:Name="SelectionPillUc">
    <Grid>
        <Grid.Resources>
            <Style x:Key="PillBorder"
                   TargetType="Border">
                <Setter Property="Opacity"
                        Value="1" />
                <Setter Property="HorizontalAlignment"
                        Value="Left" />
                <Setter Property="VerticalAlignment"
                        Value="Top" />
                <Setter Property="Margin"
                        Value="0 0 7.5 7.5" />
                <Setter Property="Padding"
                        Value="10 5" />
                <Setter Property="CornerRadius"
                        Value="15" />
                <Setter Property="BorderThickness"
                        Value="3" />
                <Setter Property="Background"
                        Value="#01010101" />
                <Setter Property="BorderBrush"
                        Value="{DynamicResource Color.FunctionMarker}" />
                <Setter Property="Cursor"
                        Value="Hand" />

                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter Property="Opacity"
                                Value="1" />
                    </Trigger>

                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter Property="Opacity"
                                Value="0.85" />
                        <Setter Property="Background"
                                Value="{DynamicResource Color.FunctionMarker}" />
                        <Setter Property="BorderThickness"
                                Value="0" />
                        <Setter Property="Padding"
                                Value="13 8" />
                    </Trigger>

                    <DataTrigger Binding="{Binding ElementName=SelectionPillUc, Path=IsSelected}"
                                 Value="true">
                        <Setter Property="Background"
                                Value="{DynamicResource Color.FunctionMarker}" />
                        <Setter Property="BorderThickness"
                                Value="0" />
                        <Setter Property="Padding"
                                Value="13 8" />
                    </DataTrigger>
                </Style.Triggers>

                <Style.Resources>
                    <Style TargetType="ico:AdaptableIcon">
                        <Setter Property="PrimaryIconColor"
                                Value="{DynamicResource Color.Menu.Icon}" />
                        <Setter Property="BorderBrush"
                                Value="Transparent" />
                        <Setter Property="BorderThickness"
                                Value="0" />
                        <Setter Property="Margin"
                                Value="0 0 7.5 0" />
                        <Setter Property="BorderPadding"
                                Value="0" />
                        <Setter Property="IconHeight"
                                Value="15" />
                        <Setter Property="IconWidth"
                                Value="15" />

                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType=Border}, Path=IsMouseOver}"
                                         Value="True">
                                <Setter Property="PrimaryIconColor"
                                        Value="{DynamicResource Color.AppBackground}" />
                            </DataTrigger>

                            <DataTrigger Binding="{Binding ElementName=SelectionPillUc, Path=IsSelected}"
                                         Value="true">
                                <Setter Property="PrimaryIconColor"
                                        Value="{DynamicResource Color.AppBackground}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>

                    <Style TargetType="TextBlock">
                        <Setter Property="FontSize"
                                Value="10" />
                        <Setter Property="Foreground"
                                Value="{DynamicResource Color.Menu.Icon}" />
                        <Setter Property="VerticalAlignment"
                                Value="Center" />

                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType=Border}, Path=IsMouseOver}"
                                         Value="True">
                                <Setter Property="Foreground"
                                        Value="{DynamicResource Color.AppBackground}" />
                            </DataTrigger>

                            <DataTrigger Binding="{Binding ElementName=SelectionPillUc, Path=IsSelected}"
                                         Value="true">
                                <Setter Property="Foreground"
                                        Value="{DynamicResource Color.AppBackground}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Style.Resources>
            </Style>
        </Grid.Resources>

        <Border x:Name="PillBorder"
                Style="{DynamicResource PillBorder}"
                MouseLeftButtonUp="PillBorder_MouseLeftButtonUp"
                TouchDown="PillBorder_TouchDown">
            <StackPanel Orientation="Horizontal">
                <ico:AdaptableIcon x:Name="PillIcon"
                                   Visibility="Collapsed"
                                   SelectedInternIcon="{Binding ElementName=SelectionPillUc, Path=SelectedInternIcon}"
                                   SelectedMaterialIcon="{Binding ElementName=SelectionPillUc, Path=SelectedMaterialIcon}"
                                   SelectedInternGif="{Binding ElementName=SelectionPillUc, Path=SelectedGif}" />
                <TextBlock x:Name="PillTextBlock"
                           Text="{Binding ElementName=SelectionPillUc, Path=PillText}" />
            </StackPanel>
        </Border>

    </Grid>
</UserControl>