Merge pull request #510 from HandyOrg/add-TagContainer

Add tag container

src/Shared/HandyControlDemo_Code/HandyControlDemo_Code.csproj

@@ -876,6 +876,9 @@
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\ViewModel\Controls\TabControlDemoViewModel.cs">
       <Link>ViewModel\TabControlDemoViewModel.cs</Link>
     </Resource>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\ViewModel\Controls\TagDemoViewModel.cs">
+      <Link>ViewModel\TagDemoViewModel.cs</Link>
+    </Resource>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\ViewModel\Controls\WindowDemoViewModel.cs">
       <Link>ViewModel\WindowDemoViewModel.cs</Link>
     </Resource>

src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems

@@ -419,6 +419,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\SpriteDemoViewModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\StepBarDemoViewModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\TabControlDemoViewModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\TagDemoViewModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\WindowDemoViewModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\DemoViewModelBase!1.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Main\ItemsDisplayViewModel.cs" />

src/Shared/HandyControlDemo_Shared/Service/Data/DataService.cs

@@ -80,7 +80,7 @@ namespace HandyControlDemo.Service
             return list;
         }
 
-        public List<DemoDataModel> GetDemoDataList(int count)
+        internal List<DemoDataModel> GetDemoDataList(int count)
         {
             var list = new List<DemoDataModel>();
             for (var i = 1; i <= count; i++)

src/Shared/HandyControlDemo_Shared/UserControl/Controls/TagDemoCtl.xaml

@@ -4,19 +4,42 @@
              Background="{DynamicResource RegionBrush}"
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
-             xmlns:hc="https://handyorg.github.io/handycontrol">
+             xmlns:hc="https://handyorg.github.io/handycontrol"
+             DataContext="{Binding TagDemo,Source={StaticResource Locator}}">
+    <UserControl.Resources>
+        <Style x:Key="TagCustomStyle" BasedOn="{StaticResource TagBaseStyle}" TargetType="hc:Tag">
+            <Setter Property="Content" Value="{Binding Name}"/>
+            <Setter Property="Margin" Value="5"/>
+            <Setter Property="IsSelected" Value="{Binding IsSelected}"/>
+        </Style>
+    </UserControl.Resources>
     <hc:TransitioningContentControl>
-        <hc:TagPanel AddTagButtonClick="TagPanel_OnAddTagButtonClick" Margin="32" Orientation="Horizontal" MaxWidth="400" VerticalAlignment="Center" ShowAddButton="True">
-            <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/>
-            <hc:Tag Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
-            <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
-            <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
-            <hc:Tag IsSelected="True" Selectable="True" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
-            <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
-            <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/>
-            <hc:Tag IsSelected="True" Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
-            <hc:Tag ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
-            <hc:Tag Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
-        </hc:TagPanel>   
+        <StackPanel Margin="11">
+            <hc:TagContainer Name="Container1" Margin="11" Width="420" Padding="5">
+                <hc:Tag Header="H" hc:TitleElement.Background="{DynamicResource PrimaryBrush}" Margin="5" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/>
+                <hc:Tag Margin="5" Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
+                <hc:Tag Margin="5" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+                <hc:Tag Margin="5" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
+                <hc:Tag Margin="5" IsSelected="True" Selectable="True" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+                <hc:Tag Margin="5" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
+                <hc:Tag Margin="5" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}">
+                    <hc:Tag.Header>
+                        <Image Source="/Resources/Img/Album/1.jpg"/>
+                    </hc:Tag.Header>
+                </hc:Tag>
+                <hc:Tag Margin="5" IsSelected="True" Selectable="True" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}">
+                    <hc:Tag.Header>
+                        <Image Source="/Resources/Img/Avatar/avatar2.png"/>
+                    </hc:Tag.Header>
+                </hc:Tag>
+                <hc:Tag Margin="5" ShowCloseButton="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+                <hc:Tag Margin="5" Content="{ex:Lang Key={x:Static langs:LangKeys.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
+            </hc:TagContainer>
+            <hc:TagContainer ItemContainerStyle="{StaticResource TagCustomStyle}" Margin="11" Width="420" Padding="5" ItemsSource="{Binding DataList}"/>
+            <DockPanel LastChildFill="True" Margin="11,0,11,11">
+                <Button Command="{Binding AddItemCmd}" Margin="10,0,0,0" DockPanel.Dock="Right" Content="{ex:Lang Key={x:Static langs:LangKeys.AddItem}}"/>
+                <TextBox Text="{Binding TagName}"/>
+            </DockPanel>
+        </StackPanel>
     </hc:TransitioningContentControl>
 </UserControl>

src/Shared/HandyControlDemo_Shared/UserControl/Controls/TagDemoCtl.xaml.cs

@@ -1,8 +1,4 @@
-using System;
-using HandyControl.Controls;
-using HandyControlDemo.Properties.Langs;
-
-namespace HandyControlDemo.UserControl
+namespace HandyControlDemo.UserControl
 {
     public partial class TagDemoCtl
     {
@@ -10,15 +6,5 @@ namespace HandyControlDemo.UserControl
         {
             InitializeComponent();
         }
-
-        private void TagPanel_OnAddTagButtonClick(object sender, EventArgs e)
-        {
-            if (sender is TagPanel panel)
-            {
-                var tag = new Tag();
-                LangProvider.SetLang(tag, ContentProperty, LangKeys.SubTitle);
-                panel.Children.Add(tag);
-            }
-        }
     }
 }

src/Shared/HandyControlDemo_Shared/ViewModel/Controls/TagDemoViewModel.cs

@@ -0,0 +1,50 @@
+using System;
+using System.Collections.ObjectModel;
+using GalaSoft.MvvmLight;
+using GalaSoft.MvvmLight.Command;
+using HandyControl.Controls;
+using HandyControlDemo.Data;
+using HandyControlDemo.Properties.Langs;
+using HandyControlDemo.Service;
+
+namespace HandyControlDemo.ViewModel
+{
+    public class TagDemoViewModel : ViewModelBase
+    {
+        public TagDemoViewModel(DataService dataService)
+        {
+            DataList = new ObservableCollection<DemoDataModel>(dataService.GetDemoDataList(10));
+        }
+
+        public ObservableCollection<DemoDataModel> DataList { get; set; }
+
+        private string _tagName;
+
+        public string TagName
+        {
+            get => _tagName;
+#if NET40
+            set => Set(nameof(TagName), ref _tagName, value);
+#else
+            set => Set(ref _tagName, value);
+#endif
+        }
+
+        public RelayCommand AddItemCmd => new Lazy<RelayCommand>(() =>
+            new RelayCommand(() =>
+            {
+                if (string.IsNullOrEmpty(TagName))
+                {
+                    Growl.Warning(Lang.PlsEnterContent);
+                    return;
+                }
+
+                DataList.Insert(0, new DemoDataModel
+                {
+                    IsSelected = DataList.Count % 2 == 0,
+                    Name = TagName
+                });
+                TagName = string.Empty;
+            })).Value;
+    }
+}

src/Shared/HandyControlDemo_Shared/ViewModel/ViewModelLocator.cs

@@ -38,6 +38,7 @@ namespace HandyControlDemo.ViewModel
             SimpleIoc.Default.Register<SpriteDemoViewModel>();
             SimpleIoc.Default.Register<NotificationDemoViewModel>();
             SimpleIoc.Default.Register<SplitButtonDemoViewModel>();
+            SimpleIoc.Default.Register<TagDemoViewModel>();
         }
 
         public static ViewModelLocator Instance => new Lazy<ViewModelLocator>(() =>
@@ -97,6 +98,8 @@ namespace HandyControlDemo.ViewModel
 
         public SplitButtonDemoViewModel SplitButtonDemo => SimpleIoc.Default.GetInstance<SplitButtonDemoViewModel>();
 
+        public TagDemoViewModel TagDemo => new TagDemoViewModel(SimpleIoc.Default.GetInstance<DataService>());
+
         #endregion
     }
 }

src/Shared/HandyControl_Shared/Controls/Tag/Tag.cs

@@ -1,4 +1,5 @@
 using System;
+using System.ComponentModel;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
@@ -52,6 +53,64 @@ namespace HandyControl.Controls
             set => SetValue(IsSelectedProperty, ValueBoxes.BooleanBox(value));
         }
 
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+            "Header", typeof(object), typeof(Tag), new PropertyMetadata(default, OnHeaderChanged));
+
+        private static void OnHeaderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var ctrl = (Tag)d;
+
+            ctrl.SetValue(HasHeaderPropertyKey, e.NewValue != null ? ValueBoxes.TrueBox : ValueBoxes.FalseBox);
+            ctrl.OnHeaderChanged(e.OldValue, e.NewValue);
+        }
+
+        protected virtual void OnHeaderChanged(object oldHeader, object newHeader)
+        {
+            RemoveLogicalChild(oldHeader);
+            AddLogicalChild(newHeader);
+        }
+
+        public object Header
+        {
+            get => GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        internal static readonly DependencyPropertyKey HasHeaderPropertyKey = DependencyProperty.RegisterReadOnly(
+            "HasHeader", typeof(bool), typeof(Tag), new PropertyMetadata(ValueBoxes.FalseBox));
+
+        public static readonly DependencyProperty HasHeaderProperty = HasHeaderPropertyKey.DependencyProperty;
+
+        [Bindable(false), Browsable(false)]
+        public bool HasHeader => (bool) GetValue(HasHeaderProperty);
+
+        public static readonly DependencyProperty HeaderStringFormatProperty = DependencyProperty.Register(
+            "HeaderStringFormat", typeof(string), typeof(Tag), new PropertyMetadata(default(string)));
+
+        public string HeaderStringFormat
+        {
+            get => (string) GetValue(HeaderStringFormatProperty);
+            set => SetValue(HeaderStringFormatProperty, value);
+        }
+
+        public static readonly DependencyProperty HeaderTemplateSelectorProperty = DependencyProperty.Register(
+            "HeaderTemplateSelector", typeof(DataTemplateSelector), typeof(Tag), new PropertyMetadata(default(DataTemplateSelector)));
+
+        public DataTemplateSelector HeaderTemplateSelector
+        {
+            get => (DataTemplateSelector) GetValue(HeaderTemplateSelectorProperty);
+            set => SetValue(HeaderTemplateSelectorProperty, value);
+        }
+
+        public static readonly DependencyProperty HeaderTemplateProperty = DependencyProperty.Register(
+            "HeaderTemplate", typeof(DataTemplate), typeof(Tag), new PropertyMetadata(default(DataTemplate)));
+
+        public DataTemplate HeaderTemplate
+        {
+            get => (DataTemplate) GetValue(HeaderTemplateProperty);
+            set => SetValue(HeaderTemplateProperty, value);
+        }
+
         public static readonly RoutedEvent SelectedEvent = EventManager.RegisterRoutedEvent("Selected", RoutingStrategy.Bubble, typeof(EventHandler), typeof(Tag));
 
         public event EventHandler Selected

src/Shared/HandyControl_Shared/Controls/Tag/TagContainer.cs

@@ -0,0 +1,53 @@
+using System.Collections;
+using System.Windows;
+using System.Windows.Controls;
+using HandyControl.Tools.Extension;
+
+namespace HandyControl.Controls
+{
+    public class TagContainer : ItemsControl
+    {
+        public TagContainer()
+        {
+            AddHandler(Controls.Tag.ClosedEvent, new RoutedEventHandler(Tag_OnClosed));
+        }
+
+        private void Tag_OnClosed(object sender, RoutedEventArgs e)
+        {
+            if (e.OriginalSource is Tag tag)
+            {
+                tag.Hide();
+
+                if (ItemsSource == null)
+                {
+                    Items.Remove(tag);
+                }
+                else
+                {
+                    var item = ItemContainerGenerator.ItemFromContainer(tag);
+                    GetActualList()?.Remove(item);
+                    Items.Refresh();
+                }
+            }
+        }
+
+        internal IList GetActualList()
+        {
+            IList list;
+            if (ItemsSource != null)
+            {
+                list = ItemsSource as IList;
+            }
+            else
+            {
+                list = Items;
+            }
+
+            return list;
+        }
+
+        protected override DependencyObject GetContainerForItemOverride() => new Tag();
+
+        protected override bool IsItemItsOwnContainerOverride(object item) => item is Tag;
+    }
+}

src/Shared/HandyControl_Shared/Controls/Tag/TagPanel.cs

@@ -1,91 +0,0 @@
-using System;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Media.Animation;
-using HandyControl.Data;
-using HandyControl.Interactivity;
-using HandyControl.Tools;
-
-namespace HandyControl.Controls
-{
-    public class TagPanel : WrapPanel
-    {
-        private Button _addTagButton;
-
-        private bool _isInternalAction;
-
-        public TagPanel()
-        {
-            var behavior = new FluidMoveBehavior
-            {
-                AppliesTo = FluidMoveScope.Children,
-                Duration = new Duration(TimeSpan.FromMilliseconds(200)),
-                EaseY = new PowerEase(),
-                EaseX = new PowerEase()
-            };
-            var collection = Interaction.GetBehaviors(this);
-            collection.Add(behavior);
-
-            AddHandler(Controls.Tag.ClosedEvent, new RoutedEventHandler(Tag_OnClosed));
-        }
-
-        private void Tag_OnClosed(object sender, RoutedEventArgs e) => Children.Remove(e.OriginalSource as Tag);
-
-        public static readonly RoutedEvent AddTagButtonClickEvent = EventManager.RegisterRoutedEvent("AddTagButtonClick", RoutingStrategy.Bubble, typeof(EventHandler), typeof(TagPanel));
-
-        public event EventHandler AddTagButtonClick
-        {
-            add => AddHandler(AddTagButtonClickEvent, value);
-            remove => RemoveHandler(AddTagButtonClickEvent, value);
-        }
-
-        public static readonly DependencyProperty ShowAddButtonProperty = DependencyProperty.Register(
-            "ShowAddButton", typeof(bool), typeof(TagPanel), new PropertyMetadata(ValueBoxes.FalseBox));
-
-        public bool ShowAddButton
-        {
-            get => (bool) GetValue(ShowAddButtonProperty);
-            set => SetValue(ShowAddButtonProperty, ValueBoxes.BooleanBox(value));
-        }
-
-        public static readonly DependencyProperty TagMarginProperty = DependencyProperty.Register(
-            "TagMargin", typeof(Thickness), typeof(TagPanel), new PropertyMetadata(new Thickness(5)));
-
-        public Thickness TagMargin
-        {
-            get => (Thickness) GetValue(TagMarginProperty);
-            set => SetValue(TagMarginProperty, value);
-        }
-
-        protected override void OnVisualChildrenChanged(DependencyObject visualAdded, DependencyObject visualRemoved)
-        {
-            if (!(visualAdded is Tag tag)) return;
-            base.OnVisualChildrenChanged(visualAdded, visualRemoved);
-
-            tag.Margin = TagMargin;
-            if (_isInternalAction) return;
-            if (ShowAddButton)
-            {
-                _isInternalAction = true;
-                if (!Children.Contains(_addTagButton))
-                {
-                    _addTagButton = new Button
-                    {
-                        Style = ResourceHelper.GetResource<Style>(ResourceToken.AddTagButtonStyle),
-                        Margin = TagMargin
-                    };
-                    _addTagButton.Click += AddTagButton_Click;
-                    Children.Add(_addTagButton);
-                }
-                else
-                {
-                    Children.Remove(_addTagButton);
-                    Children.Add(_addTagButton);
-                }
-                _isInternalAction = false;
-            }
-        }
-
-        private void AddTagButton_Click(object sender, RoutedEventArgs e) => RaiseEvent(new RoutedEventArgs(AddTagButtonClickEvent, this));
-    }
-}

src/Shared/HandyControl_Shared/HandyControl_Shared.projitems

@@ -72,6 +72,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeThumb.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\TwoWayRangeBase.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Block\RunningBlock\RunningBlock.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Tag\TagContainer.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Text\SimpleText.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Window\GlowWindow.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Collections\DateTimeRangeComparer.cs" />
@@ -214,7 +215,6 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\TabControl\TabPanel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Text\OutlineText.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Tag\Tag.cs" />
-    <Compile Include="$(MSBuildThisFileDirectory)Controls\Tag\TagPanel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\CalendarWithClock.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\Clock\Clock.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Time\Clock\ListClock.cs" />

src/Shared/HandyControl_Shared/Themes/Styles/Base/TagBaseStyle.xaml

@@ -7,6 +7,7 @@
     <ResourceDictionary.MergedDictionaries>
         <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Basic/Geometries.xaml"/>
         <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Basic/Converters.xaml"/>
+        <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Basic/Behaviors.xaml"/>
         <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Styles/Button.xaml"/>
         <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Styles/Border.xaml"/>
         <themes:SharedResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Styles/Rectangle.xaml"/>
@@ -21,6 +22,7 @@
         <Setter Property="HorizontalAlignment" Value="Center"/>
         <Setter Property="VerticalAlignment" Value="Center"/>
         <Setter Property="Height" Value="{StaticResource DefaultControlHeight}"/>
+        <Setter Property="hc:TitleElement.Foreground" Value="{DynamicResource TextIconBrush}"/>
         <Setter Property="FocusVisualStyle">
             <Setter.Value>
                 <Style>
@@ -37,14 +39,18 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="hc:Tag">
-                    <Border Style="{StaticResource BorderCircular}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
+                    <Border Style="{StaticResource BorderCircular}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                         <Grid>
                             <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition/>
                                 <ColumnDefinition Width="Auto"/>
                             </Grid.ColumnDefinitions>
-                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
-                            <Button Focusable="False" Name="ButtonClose" Visibility="{TemplateBinding ShowCloseButton,Converter={StaticResource Boolean2VisibilityConverter}}" Command="interactivity:ControlCommands.Close" Margin="10,0,0,0" Width="16" Grid.Column="1" Style="{StaticResource ButtonIcon}" Padding="0,11" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Foreground="{TemplateBinding Foreground}"/>
+                            <Border Visibility="{Binding HasHeader,RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Boolean2VisibilityConverter}}" Width="{Binding ActualHeight,RelativeSource={RelativeSource Self}}" Style="{StaticResource BorderCircularClip}" BorderBrush="{Binding Path=(hc:TitleElement.BorderBrush),RelativeSource={RelativeSource TemplatedParent}}" Background="{Binding Path=(hc:TitleElement.Background),RelativeSource={RelativeSource TemplatedParent}}">
+                                <ContentPresenter TextElement.Foreground="{Binding Path=(hc:TitleElement.Foreground),RelativeSource={RelativeSource TemplatedParent}}" ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                            </Border>
+                            <ContentPresenter Margin="{TemplateBinding Padding}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            <Button Focusable="False" Name="ButtonClose" Visibility="{TemplateBinding ShowCloseButton,Converter={StaticResource Boolean2VisibilityConverter}}" Command="interactivity:ControlCommands.Close" Margin="0,0,6,0" Width="16" Grid.Column="2" Style="{StaticResource ButtonIcon}" Padding="0,11" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Foreground="{TemplateBinding Foreground}"/>
                         </Grid>
                     </Border>
                     <ControlTemplate.Triggers>
@@ -70,11 +76,30 @@
         </Style.Triggers>
     </Style>
 
-    <Style x:Key="AddTagButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonIconCircular}">
-        <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
-        <Setter Property="hc:IconElement.Geometry" Value="{StaticResource AddGeometry}"/>
-        <Setter Property="Padding" Value="10"/>
-        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
+    <Style x:Key="TagContainerBaseStyle" TargetType="hc:TagContainer" BasedOn="{StaticResource BaseStyle}">
+        <Setter Property="hc:BorderElement.CornerRadius" Value="{StaticResource DefaultCornerRadius}"/>
+        <Setter Property="ItemContainerStyle" Value="{StaticResource TagBaseStyle}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <WrapPanel hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"/>
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="hc:TagContainer">
+                    <Border CornerRadius="{Binding Path=(hc:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <hc:ScrollViewer Focusable="false">
+                            <ItemsPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
+                        </hc:ScrollViewer>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+        
     </Style>
 
 </ResourceDictionary>

src/Shared/HandyControl_Shared/Themes/Styles/Tag.xaml

@@ -8,4 +8,6 @@
     
     <Style BasedOn="{StaticResource TagBaseStyle}" TargetType="hc:Tag"/>
 
+    <Style BasedOn="{StaticResource TagContainerBaseStyle}" TargetType="hc:TagContainer"/>
+
 </ResourceDictionary>