add Tag

HandyControl/Controls/Tag/Tag.cs

@@ -0,0 +1,89 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using HandyControl.Data;
+using HandyControl.Interactivity;
+
+namespace HandyControl.Controls
+{
+    public class Tag : ContentControl
+    {
+        public Tag()
+        {
+            CommandBindings.Add(new CommandBinding(ControlCommands.Close, (s, e) =>
+            {
+                var argsClosing = new CancelRoutedEventArgs(ClosingEvent, this);
+                RaiseEvent(argsClosing);
+                if (argsClosing.Cancel) return;
+
+                RaiseEvent(new RoutedEventArgs(ClosedEvent, this));
+            }));
+        }
+
+        public static readonly DependencyProperty ShowCloseButtonProperty = DependencyProperty.Register(
+            "ShowCloseButton", typeof(bool), typeof(Tag), new PropertyMetadata(ValueBoxes.TrueBox));
+
+        public bool ShowCloseButton
+        {
+            get => (bool) GetValue(ShowCloseButtonProperty);
+            set => SetValue(ShowCloseButtonProperty, value);
+        }
+
+        public static readonly DependencyProperty SelectableProperty = DependencyProperty.Register(
+            "Selectable", typeof(bool), typeof(Tag), new PropertyMetadata(ValueBoxes.FalseBox));
+
+        public bool Selectable
+        {
+            get => (bool) GetValue(SelectableProperty);
+            set => SetValue(SelectableProperty, value);
+        }
+
+        public static readonly DependencyProperty IsSelectedProperty = DependencyProperty.Register(
+            "IsSelected", typeof(bool), typeof(Tag), new PropertyMetadata(ValueBoxes.FalseBox, (o, args) =>
+            {
+                var ctl = (Tag) o;
+                ctl.RaiseEvent(new RoutedEventArgs(SelectedEvent, ctl));
+            }));
+
+        public bool IsSelected
+        {
+            get => (bool) GetValue(IsSelectedProperty);
+            set => SetValue(IsSelectedProperty, value);
+        }
+
+        public static readonly RoutedEvent SelectedEvent = EventManager.RegisterRoutedEvent("Selected", RoutingStrategy.Bubble, typeof(EventHandler), typeof(Tag));
+
+        public event EventHandler Selected
+        {
+            add => AddHandler(SelectedEvent, value);
+            remove => RemoveHandler(SelectedEvent, value);
+        }
+
+        public static readonly RoutedEvent ClosingEvent = EventManager.RegisterRoutedEvent("Closing", RoutingStrategy.Bubble, typeof(EventHandler), typeof(Tag));
+
+        public event EventHandler Closing
+        {
+            add => AddHandler(ClosingEvent, value);
+            remove => RemoveHandler(ClosingEvent, value);
+        }
+
+        public static readonly RoutedEvent ClosedEvent = EventManager.RegisterRoutedEvent("Closed", RoutingStrategy.Bubble, typeof(EventHandler), typeof(Tag));
+
+        public event EventHandler Closed
+        {
+            add => AddHandler(ClosedEvent, value);
+            remove => RemoveHandler(ClosedEvent, value);
+        }
+
+        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
+        {
+            base.OnMouseLeftButtonDown(e);
+
+            if (Selectable)
+            {
+                IsSelected = true;
+            }
+        }
+    }
+}

HandyControl/Controls/Tag/TagPanel.cs

@@ -0,0 +1,91 @@
+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, 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));
+    }
+}

HandyControl/Data/CancelRoutedEventArgs.cs

@@ -0,0 +1,13 @@
+using System.Windows;
+
+namespace HandyControl.Data
+{
+    public class CancelRoutedEventArgs : RoutedEventArgs
+    {
+        public CancelRoutedEventArgs(RoutedEvent routedEvent, object source) : base(routedEvent, source)
+        {
+        }
+
+        public bool Cancel { get; set; }
+    }
+}

HandyControl/Data/ResourceToken.cs

@@ -36,5 +36,7 @@
 
         public static readonly string CustomWindowStyle = nameof(CustomWindowStyle);
 
+        public static readonly string AddTagButtonStyle = nameof(AddTagButtonStyle);
+
     }
 }

HandyControl/Data/ResourceToken.tt

@@ -26,7 +26,8 @@ var styleList = new List<string>
 {
 	"ButtonCustom",
 	"PaginationButtonStyle",
-	"CustomWindowStyle"
+	"CustomWindowStyle",
+	"AddTagButtonStyle"
 };
 #>
 namespace HandyControl.Data

HandyControl/HandyControl.csproj

@@ -50,6 +50,8 @@
     <Compile Include="Controls\CirclePanel.cs" />
     <Compile Include="Controls\CircleProgressBar.cs" />
     <Compile Include="Controls\Input\SearchBar.cs" />
+    <Compile Include="Controls\Tag\TagPanel.cs" />
+    <Compile Include="Controls\Tag\Tag.cs" />
     <Compile Include="Controls\Time\CalendarWithClock.cs" />
     <Compile Include="Controls\Time\Clock\Clock.cs" />
     <Compile Include="Controls\Time\Clock\ClockRadioButton.cs" />
@@ -76,6 +78,7 @@
     <Compile Include="Controls\InternalCanvas.cs" />
     <Compile Include="Controls\StepBar\StepBar.cs" />
     <Compile Include="Controls\StepBar\StepBarItem.cs" />
+    <Compile Include="Data\CancelRoutedEventArgs.cs" />
     <Compile Include="Data\Enum\InfoType.cs" />
     <Compile Include="Data\Enum\ResultType.cs" />
     <Compile Include="Data\Enum\SkinType.cs" />
@@ -272,6 +275,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\Base\TagBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Themes\Styles\Base\ToolBarBaseStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -504,6 +511,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Themes\Styles\Tag.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Themes\Styles\TextBlock.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

HandyControl/Themes/Styles/Base/SearchBarBaseStyle.xaml

@@ -27,7 +27,7 @@
                                 <ColumnDefinition Width="*"/>
                                 <ColumnDefinition Width="30"/>
                             </Grid.ColumnDefinitions>
-                            <Button Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" x:Name="PART_Button"  Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
+                            <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
                             <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" Padding="5,6" Margin="0,0,0,1" x:Name="PART_TextBox" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                         </Grid>
                     </Border>
@@ -63,7 +63,7 @@
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="30"/>
                     </Grid.ColumnDefinitions>
-                    <Button Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" x:Name="PART_Button"  Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
+                    <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
                     <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
@@ -97,7 +97,7 @@
                         <ColumnDefinition Width="*"/>
                         <ColumnDefinition Width="30"/>
                     </Grid.ColumnDefinitions>
-                    <Button Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" x:Name="PART_Button"  Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
+                    <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
                     <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
@@ -155,7 +155,7 @@
                         <ColumnDefinition Width="25"/>
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Clear" Visibility="Collapsed" Name="ButtonClear" Width="16" Grid.Column="1" Style="{StaticResource ButtonIcon}" Padding="0,6" controls:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}" Foreground="{Binding BorderBrush,ElementName=templateRoot}"/>
-                    <Button Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" x:Name="PART_Button"  Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
+                    <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
                     <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
@@ -216,7 +216,7 @@
                         <ColumnDefinition Width="25"/>
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Clear" Visibility="Collapsed" Name="ButtonClear" Width="16" Grid.Column="1" Style="{StaticResource ButtonIcon}" Padding="0,6" controls:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}" Foreground="{Binding BorderBrush,ElementName=templateRoot}"/>
-                    <Button Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" x:Name="PART_Button"  Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
+                    <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
                     <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>

HandyControl/Themes/Styles/Base/TagBaseStyle.xaml

@@ -0,0 +1,67 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls"
+                    xmlns:interactivity="clr-namespace:HandyControl.Interactivity">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../../Basic/Geometries.xaml"/>
+        <ResourceDictionary Source="../../Basic/Converters.xaml"/>
+        <ResourceDictionary Source="../Button.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="TagBaseStyle" TargetType="controls:Tag">
+        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
+        <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="controls:BorderElement.CornerRadius" Value="15"/>
+        <Setter Property="Padding" Value="10,6"/>
+        <Setter Property="HorizontalContentAlignment" Value="Center"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="Height" Value="30"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Tag">
+                    <Border CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            <Button 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" controls:IconElement.Geometry="{StaticResource DeleteGeometry}" Foreground="{TemplateBinding Foreground}"/>
+                        </Grid>
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True" SourceName="ButtonClose">
+                            <Setter Property="controls:IconElement.Geometry" Value="{StaticResource DeleteFillCircleGeometry}" TargetName="ButtonClose"/>
+                            <Setter Property="Padding" Value="0,6" TargetName="ButtonClose"/>
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+        <Style.Triggers>
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Opacity" Value="0.4"/>
+            </Trigger>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Background" Value="{DynamicResource DarkMaskBrush}"/>
+            </Trigger>
+            <Trigger Property="IsSelected" Value="True">
+                <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
+                <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style x:Key="AddTagButtonStyle" TargetType="Button" BasedOn="{StaticResource ButtonIcon}">
+        <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
+        <Setter Property="controls:IconElement.Geometry" Value="{StaticResource AddGeometry}"/>
+        <Setter Property="controls:BorderElement.CornerRadius" Value="15"/>
+        <Setter Property="Padding" Value="10"/>
+        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
+    </Style>
+
+</ResourceDictionary>

HandyControl/Themes/Styles/Button.xaml

@@ -37,10 +37,11 @@
     <Style x:Key="ButtonIcon" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="BorderBrush" Value="Transparent"/>
+        <Setter Property="controls:BorderElement.CornerRadius" Value="0"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
-                    <Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
+                    <Border CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                         <ContentControl HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                             <Path Fill="{TemplateBinding Foreground}" SnapsToDevicePixels="True" Stretch="Uniform" Data="{TemplateBinding controls:IconElement.Geometry}"/>
                         </ContentControl>

HandyControl/Themes/Styles/Style.xaml

@@ -45,6 +45,7 @@
         <ResourceDictionary Source="RichTextBox.xaml"/>
         <ResourceDictionary Source="ToolBar.xaml"/>
         <ResourceDictionary Source="SearchBar.xaml"/>
+        <ResourceDictionary Source="Tag.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>

HandyControl/Themes/Styles/Tag.xaml

@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/TagBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+    
+    <Style BasedOn="{StaticResource TagBaseStyle}" TargetType="controls:Tag"/>
+
+</ResourceDictionary>

HandyControlDemo/Data/MessageToken.cs

@@ -52,6 +52,8 @@
 	
         public static readonly string SearchBarDemoCtl = nameof(SearchBarDemoCtl);
 	
+        public static readonly string TagDemoCtl = nameof(TagDemoCtl);
+	
         public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);
 
         public static readonly string ToggleButtonDemoCtl = nameof(ToggleButtonDemoCtl);

HandyControlDemo/Data/MessageToken.tt

@@ -28,7 +28,8 @@ var controlList = new List<string>
 	"DatePickerDemoCtl",
 	"DateTimePickerDemoCtl",
 	"CalendarWithClockDemoCtl",
-	"SearchBarDemoCtl"
+	"SearchBarDemoCtl",
+	"TagDemoCtl"
 };
 var styleList = new List<string>
 {

HandyControlDemo/HandyControlDemo.csproj

@@ -156,6 +156,9 @@
     <Compile Include="UserControl\Controls\StepBarDemoCtl.xaml.cs">
       <DependentUpon>StepBarDemoCtl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="UserControl\Controls\TagDemoCtl.xaml.cs">
+      <DependentUpon>TagDemoCtl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="UserControl\Controls\TextBoxDemoCtl.xaml.cs">
       <DependentUpon>TextBoxDemoCtl.xaml</DependentUpon>
     </Compile>
@@ -416,6 +419,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="UserControl\Controls\TagDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="UserControl\Controls\TextBoxDemoCtl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -592,6 +599,7 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="Resources\Img\LeftMainContent\Tag_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\Search_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\ToolBar_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\RichTextBox_16x.png" />

HandyControlDemo/Properties/Langs/Lang.Designer.cs

@@ -843,6 +843,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 标签 的本地化字符串。
+        /// </summary>
+        public static string Tag {
+            get {
+                return ResourceManager.GetString("Tag", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 正文 的本地化字符串。
         /// </summary>

HandyControlDemo/Properties/Langs/Lang.en.resx

@@ -426,4 +426,7 @@
   <data name="SearchBar" xml:space="preserve">
     <value>SearchBar</value>
   </data>
+  <data name="Tag" xml:space="preserve">
+    <value>Tag</value>
+  </data>
 </root>

HandyControlDemo/Properties/Langs/Lang.resx

@@ -406,4 +406,7 @@
   <data name="SearchBar" xml:space="preserve">
     <value>搜索栏</value>
   </data>
+  <data name="Tag" xml:space="preserve">
+    <value>标签</value>
+  </data>
 </root>

HandyControlDemo/UserControl/Controls/TagDemoCtl.xaml

@@ -0,0 +1,21 @@
+<UserControl x:Class="HandyControlDemo.UserControl.TagDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Background="{DynamicResource RegionBrush}"
+             xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
+             xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl">
+    <controls:TransitioningContentControl>
+        <controls:TagPanel AddTagButtonClick="TagPanel_OnAddTagButtonClick" Margin="32" Orientation="Horizontal" MaxWidth="400" VerticalAlignment="Center" ShowAddButton="True">
+            <controls:Tag ShowCloseButton="False" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/>
+            <controls:Tag Selectable="True" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
+            <controls:Tag ShowCloseButton="False" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+            <controls:Tag Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
+            <controls:Tag IsSelected="True" Selectable="True" ShowCloseButton="False" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+            <controls:Tag Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
+            <controls:Tag ShowCloseButton="False" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=2}"/>
+            <controls:Tag IsSelected="True" Selectable="True" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=3}"/>
+            <controls:Tag ShowCloseButton="False" Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=4}"/>
+            <controls:Tag Content="{Binding Source={x:Static langs:Lang.Text}, Converter={StaticResource StringRepeatConverter}, ConverterParameter=5}"/>
+        </controls:TagPanel>   
+    </controls:TransitioningContentControl>
+</UserControl>

HandyControlDemo/UserControl/Controls/TagDemoCtl.xaml.cs

@@ -0,0 +1,24 @@
+using System;
+using HandyControl.Controls;
+
+namespace HandyControlDemo.UserControl
+{
+    public partial class TagDemoCtl
+    {
+        public TagDemoCtl()
+        {
+            InitializeComponent();
+        }
+
+        private void TagPanel_OnAddTagButtonClick(object sender, EventArgs e)
+        {
+            if (sender is TagPanel panel)
+            {
+                panel.Children.Add(new Tag
+                {
+                    Content = Properties.Langs.Lang.SubTitle
+                });
+            }
+        }
+    }
+}

HandyControlDemo/UserControl/Main/LeftMainContent.xaml

@@ -194,6 +194,11 @@
                         <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
                     </controls:EdgeElement.LeftContent>
                 </ListBoxItem>
+                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.TagDemoCtl}" Content="{x:Static langs:Lang.Tag}">
+                    <controls:EdgeElement.LeftContent>
+                        <Image Source="../../Resources/Img/LeftMainContent/Tag_16x.png"/>
+                    </controls:EdgeElement.LeftContent>
+                </ListBoxItem>
                 <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
                     <controls:EdgeElement.LeftContent>
                         <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>

README.md

@@ -6,115 +6,119 @@
 
 ## Latest examples
 
-### 1、ToolBar
+### Tag
+
+![Tag](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Tag.png)
+
+### ToolBar
 
 ![ToolBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ToolBar.png)
 
-### 2、Slider
+### Slider
 
 ![Slider](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Slider.png)
 
-### 3、CircleProgressBar
+### CircleProgressBar
 
 ![CircleProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CircleProgressBar.png)
 
-### 4、DataGrid
+### DataGrid
 
 ![DataGrid](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataGrid.png)
 
-### 5、Now you can switch to dark theme
+## History publication
+
+### Now you can switch to dark theme
 
 ![dark theme](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DarkTheme.png)
 
-## History publication
-
-### 1、ColorPicker
+### ColorPicker
 
 ![ColorPicker](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ColorPicker.gif)
 
-### 2、Loading
+### Loading
 
 ![Loading](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Loading.gif)
 
-### 3、Carousel
+### Carousel
 
 ![Carousel](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Carousel.gif)
 
-### 4、Pagination
+### Pagination
 
 ![Pagination](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Pagination.gif)
 
-### 5、Expander
+### Expander
 
 ![Expander](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Expander.gif)
 
-### 6、TimeBar
+### TimeBar
 
 ![TimeBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimeBar.gif)
 
-### 7、ImageBrowser
+### ImageBrowser
 
 ![ImageBrowser](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ImageBrowser.gif)
 
-### 8、CompareSlider
+### CompareSlider
 
 ![CompareSlider](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-h.gif)
 
 ![CompareSlider](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CompareSlider-v.gif)
 
-### 9、Growl
+### Growl
 
 ![Growl](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Growl.gif)
 
-### 10、AnimationPath
+### AnimationPath
 
 ![AnimationPath](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/AnimationPath.gif)
 
-### 11、ProgressBar
+### ProgressBar
 
 ![ProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ProgressBar.gif)
 
-### 12、TabControl
+### TabControl
 
 ![TabControl](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TabControl.gif)
 
-### 13、StepBar
+### StepBar
 
 ![StepBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/StepBar.png)
 
-### 14、Calendar
+### Calendar
 
 ![Calendar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Calendar.jpg)
 
-### 15、Clock
+### Clock
 
 ![Clock](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Clock.jpg)
 
-### 16、TextBlock
+### TextBlock
 
 ![TextBlock](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBlock.jpg)
 
-### 17、TextBox
+### TextBox
 
 ![TextBox](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TextBox.jpg)
 
-### 18、ComboBox
+### ComboBox
 
 ![ComboBox](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ComboBox.jpg)
 
-### 19、PasswordBox
+### PasswordBox
 
 ![PasswordBox](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/PasswordBox.jpg)
 
-### 20、DataPicker
+### DataPicker
 
 ![DataPicker](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/DataPicker.jpg)
 
-### 21、TimePicker
+### TimePicker
 
 ![TimePicker](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/TimePicker.jpg)
 
-### 22、CirclePanel
+### CirclePanel
 
 ![CirclePanel](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CirclePanel.jpg)