From fda076b5e6ebe2a3a08e858643d556b12ef8d3c8 Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Wed, 19 Jan 2022 22:56:50 +0800
Subject: [PATCH] enhance: optimized ElementGroup

---
 .../HandyControl_Net_40/Themes/Theme.xaml     | 100 ++++++++++++------
 .../Controls/ElementGroupDemoCtl.xaml         |  35 ++++--
 .../Controls/Panel/ElementGroup.cs            |  79 ++++++++++----
 .../HandyControl_Shared.projitems             |   9 ++
 .../Styles/Base/ElementGroupBaseStyle.xaml    |  39 +++++++
 .../Styles/Base/ItemsPanelTemplate.xaml       |  32 ++++++
 .../Themes/Styles/Base/StepBarBaseStyle.xaml  |  16 +--
 .../Themes/Styles/Carousel.xaml               |  86 ---------------
 .../Themes/Styles/ElementGroup.xaml           |  13 +++
 .../Themes/Styles/ListBox.xaml                |  24 +----
 .../Themes/Styles/PropertyGrid.xaml           |   6 +-
 .../HandyControl_Shared/Themes/Theme.xaml     | 100 ++++++++++++------
 .../HandyControl_Shared/Themes/Theme_40.txt   |   3 +
 .../HandyControl_Shared/Themes/Theme_GE45.txt |   3 +
 14 files changed, 330 insertions(+), 215 deletions(-)
 create mode 100644 src/Shared/HandyControl_Shared/Themes/Styles/Base/ElementGroupBaseStyle.xaml
 create mode 100644 src/Shared/HandyControl_Shared/Themes/Styles/Base/ItemsPanelTemplate.xaml
 create mode 100644 src/Shared/HandyControl_Shared/Themes/Styles/ElementGroup.xaml

diff --git a/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml b/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
index d134dfb4..5eee86f4 100644
--- a/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
+++ b/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
@@ -587,6 +587,27 @@
 			<TextBlock Visibility="{Binding ShowText,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Boolean2VisibilityConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Text}" />
 		</hc:SimplePanel>
 	</ControlTemplate>
+	<ItemsPanelTemplate x:Key="UniformHorizontalItemsPanelTemplate">
+		<UniformGrid FocusVisualStyle="{x:Null}" Rows="1" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="UniformVerticalItemsPanelTemplate">
+		<UniformGrid FocusVisualStyle="{x:Null}" Columns="1" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="StackHorizontalItemsPanelTemplate">
+		<StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="StackVerticalItemsPanelTemplate">
+		<StackPanel FocusVisualStyle="{x:Null}" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="WrapHorizontalItemsPanelTemplate">
+		<WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="WrapVerticalItemsPanelTemplate">
+		<WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="DockItemsPanelTemplate">
+		<DockPanel FocusVisualStyle="{x:Null}" LastChildFill="True" />
+	</ItemsPanelTemplate>
 	<LinearGradientBrush x:Key="ResizeGripperForeground" EndPoint="1,0.75" StartPoint="0,0.25">
 		<GradientStop Color="#FFFFFF" Offset="0.3" />
 		<GradientStop Color="#BBC5D7" Offset="0.75" />
@@ -722,12 +743,6 @@
 			</DrawingGroup>
 		</DrawingBrush.Drawing>
 	</DrawingBrush>
-	<ItemsPanelTemplate x:Key="StepBarHorizontalItemsPanelTemplate">
-		<UniformGrid Rows="1" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StepBarVerticalItemsPanelTemplate">
-		<UniformGrid Columns="1" />
-	</ItemsPanelTemplate>
 	<ContextMenu x:Key="TabItemMenu" x:Shared="False">
 		<MenuItem Command="interactivity:ControlCommands.Close" Header="{x:Static langs:Lang.Close}" />
 		<MenuItem Command="interactivity:ControlCommands.CloseAll" Header="{x:Static langs:Lang.CloseAll}" />
@@ -813,21 +828,6 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
-	<ItemsPanelTemplate x:Key="WrapPanelHorizontalItemsPanelTemplate">
-		<WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="WrapPanelVerticalItemsPanelTemplate">
-		<WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StackPanelHorizontalItemsPanelTemplate">
-		<StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StackPanelVerticalItemsPanelTemplate">
-		<StackPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Stretch" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="ComboBoxCapsuleItemsPanelTemplate">
-		<UniformGrid FocusVisualStyle="{x:Null}" Rows="1" />
-	</ItemsPanelTemplate>
 	<tools:ComboBoxItemCapsuleStyleSelector x:Key="ComboBoxItemCapsuleStyleSelector" />
 	<hc:HorizontalAlignmentPathTemplateSelector x:Key="HorizontalAlignmentPathTemplateSelector" />
 	<hc:VerticalAlignmentPathTemplateSelector x:Key="VerticalAlignmentPathTemplateSelector" />
@@ -2479,6 +2479,39 @@
 			</MultiTrigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ElementGroupBaseStyle" TargetType="hc:ElementGroup">
+		<Setter Property="VerticalAlignment" Value="Top" />
+		<Setter Property="Layout" Value="Uniform" />
+		<Setter Property="FocusVisualStyle" Value="{x:Null}" />
+		<Setter Property="Focusable" Value="False" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
+		<Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource PrimaryBrush}" />
+		<Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource RegionBrush}" />
+		<Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource PrimaryBrush}" />
+		<Style.Triggers>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Uniform" />
+					<Condition Property="Orientation" Value="Vertical" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
+			</MultiTrigger>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Stack" />
+					<Condition Property="Orientation" Value="Horizontal" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}" />
+			</MultiTrigger>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Stack" />
+					<Condition Property="Orientation" Value="Vertical" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}" />
+			</MultiTrigger>
+		</Style.Triggers>
+	</Style>
 	<Style x:Key="ProgressBarBaseStyle" TargetType="ProgressBar">
 		<Setter Property="hc:VisualElement.Text">
 			<Setter.Value>
@@ -10626,23 +10659,23 @@
 		<Setter Property="Focusable" Value="False" />
 		<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalTop}" />
 		<Setter Property="Template" Value="{StaticResource StepBarHorizontalTopControlTemplate}" />
-		<Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 		<Style.Triggers>
 			<Trigger Property="Dock" Value="Left">
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}" />
 				<Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
 			</Trigger>
 			<Trigger Property="Dock" Value="Bottom">
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalBottom}" />
 				<Setter Property="Template" Value="{StaticResource StepBarHorizontalBottomControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 			</Trigger>
 			<Trigger Property="Dock" Value="Right">
 				<Setter Property="FlowDirection" Value="RightToLeft" />
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}" />
 				<Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
 			</Trigger>
 		</Style.Triggers>
 	</Style>
@@ -12137,7 +12170,6 @@
 					</ControlTemplate.Triggers>
 					<hc:SimplePanel ClipToBounds="True">
 						<StackPanel x:Name="PART_Panel" Orientation="Horizontal" />
-						<!--<ItemsPresenter x:Name="PART_ItemsControl" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Left"/>-->
 						<hc:SimplePanel x:Name="GridTop" Opacity="0">
 							<Button Command="interactivity:ControlCommands.Prev" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0" Style="{StaticResource ButtonCustom}">
 								<Border Width="50" Height="100" Background="{DynamicResource DarkOpacityBrush}" CornerRadius="4">
@@ -12472,6 +12504,12 @@
 	<Style BasedOn="{StaticResource DialogBaseStyle}" TargetType="hc:Dialog" />
 	<Style BasedOn="{StaticResource DividerBaseStyle}" TargetType="hc:Divider" />
 	<Style BasedOn="{StaticResource DrawerBaseStyle}" TargetType="hc:Drawer" />
+	<Style BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup" />
+	<Style x:Key="ElementGroupSolid" BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup">
+		<Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource TitleBrush}" />
+		<Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource TitleBrush}" />
+		<Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource TextIconBrush}" />
+	</Style>
 	<Style BasedOn="{StaticResource EmptyBaseStyle}" TargetType="hc:Empty" />
 	<Style BasedOn="{StaticResource ExpanderBaseStyle}" TargetType="Expander" />
 	<Style BasedOn="{StaticResource FlowDocumentScrollViewerBaseStyle}" TargetType="FlowDocumentScrollViewer" />
@@ -12616,16 +12654,16 @@
 		<Setter Property="HorizontalContentAlignment" Value="Stretch" />
 	</Style>
 	<Style x:Key="WrapPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource WrapPanelHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource WrapHorizontalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="WrapPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource WrapPanelVerticalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource WrapVerticalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="StackPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource StackPanelHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="StackPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource StackPanelVerticalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="ListViewBaseStyle" TargetType="ListView">
 		<Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}" />
@@ -13052,7 +13090,7 @@
 		<Setter Property="VerticalAlignment" Value="Top" />
 		<Setter Property="FocusVisualStyle" Value="{x:Null}" />
 		<Setter Property="Focusable" Value="False" />
-		<Setter Property="ItemsPanel" Value="{StaticResource ComboBoxCapsuleItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="ComboBox">
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Controls/ElementGroupDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Controls/ElementGroupDemoCtl.xaml
index bea3e62a..afe53368 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Controls/ElementGroupDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Controls/ElementGroupDemoCtl.xaml
@@ -6,8 +6,20 @@
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension">
     <hc:TransitioningContentControl>
-        <StackPanel Margin="32" VerticalAlignment="Center">
-            <hc:ElementGroup Orientation="Horizontal">
+        <hc:UniformSpacingPanel Margin="32" VerticalAlignment="Center" Orientation="Vertical" Spacing="16">
+            <hc:ElementGroup Orientation="Horizontal" Layout="Stack">
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+            </hc:ElementGroup>
+            <hc:ElementGroup Orientation="Horizontal" Width="500">
+                <ToggleButton HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.ToggleButton}}"/>
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+                <ToggleButton HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.ToggleButton}}"/>
+                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
+            </hc:ElementGroup>
+            <hc:ElementGroup Orientation="Horizontal" Layout="Stack">
                 <Border Style="{StaticResource BorderRegion}" Padding="6,0">
                     <Path Data="{StaticResource ClockGeometry}" Width="16" Height="16" Stretch="Uniform" Fill="{DynamicResource BorderBrush}"/>
                 </Border>
@@ -15,11 +27,20 @@
                 <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
                 <ToggleButton Content="{ex:Lang Key={x:Static langs:LangKeys.ToggleButton}}"/>
             </hc:ElementGroup>
-            <hc:ElementGroup Margin="0,16,0,0">
-                <TextBox/>
-                <Button HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}"/>
-                <ToggleButton HorizontalAlignment="Stretch" Width="auto" Content="{ex:Lang Key={x:Static langs:LangKeys.ToggleButton}}"/>
+            <hc:ElementGroup>
+                <hc:ElementGroup.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition/>
+                                <ColumnDefinition Width="Auto"/>
+                            </Grid.ColumnDefinitions>
+                        </Grid>
+                    </ItemsPanelTemplate>
+                </hc:ElementGroup.ItemsPanel>
+                <TextBox HorizontalAlignment="Stretch" DockPanel.Dock="Left"/>
+                <Button Grid.Column="1" Width="100" Content="{ex:Lang Key={x:Static langs:LangKeys.Button}}" DockPanel.Dock="Right" HorizontalAlignment="Right" Style="{StaticResource ButtonPrimary}"/>
             </hc:ElementGroup>
-        </StackPanel>
+        </hc:UniformSpacingPanel>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControl_Shared/Controls/Panel/ElementGroup.cs b/src/Shared/HandyControl_Shared/Controls/Panel/ElementGroup.cs
index 58125c25..9dd90545 100644
--- a/src/Shared/HandyControl_Shared/Controls/Panel/ElementGroup.cs
+++ b/src/Shared/HandyControl_Shared/Controls/Panel/ElementGroup.cs
@@ -1,14 +1,38 @@
 using System.Collections.Generic;
+using System.Collections.Specialized;
+using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Media;
+using HandyControl.Data;
 using HandyControl.Tools;
 
 namespace HandyControl.Controls
 {
-    public class ElementGroup : SimpleStackPanel
+    public class ElementGroup : ItemsControl
     {
         private static readonly Dictionary<Orientation, Dictionary<ChildLocation, CornerRadius>> CornerRadiusDict;
 
+        public static readonly DependencyProperty OrientationProperty =
+            StackPanel.OrientationProperty.AddOwner(typeof(ElementGroup),
+                new FrameworkPropertyMetadata(ValueBoxes.HorizontalBox, FrameworkPropertyMetadataOptions.AffectsMeasure));
+
+        public Orientation Orientation
+        {
+            get => (Orientation) GetValue(OrientationProperty);
+            set => SetValue(OrientationProperty, ValueBoxes.OrientationBox(value));
+        }
+
+        public static readonly DependencyProperty LayoutProperty = DependencyProperty.Register(
+            "Layout", typeof(LinearLayout), typeof(ElementGroup),
+            new FrameworkPropertyMetadata(LinearLayout.Uniform, FrameworkPropertyMetadataOptions.AffectsMeasure));
+
+        public LinearLayout Layout
+        {
+            get => (LinearLayout) GetValue(LayoutProperty);
+            set => SetValue(LayoutProperty, value);
+        }
+
         static ElementGroup()
         {
             var defaultCornerRadius = ResourceHelper.GetResourceInternal<CornerRadius>("DefaultCornerRadius");
@@ -40,47 +64,62 @@ namespace HandyControl.Controls
             {
                 elementAdded.GotFocus += ElementAdded_GotFocus;
                 elementAdded.LostFocus += ElementAdded_LostFocus;
+                elementAdded.IsVisibleChanged += ElementAdded_IsVisibleChanged;
             }
 
             if (visualRemoved is UIElement elementRemoved)
             {
                 elementRemoved.GotFocus -= ElementAdded_GotFocus;
                 elementRemoved.LostFocus -= ElementAdded_LostFocus;
+                elementRemoved.IsVisibleChanged -= ElementAdded_IsVisibleChanged;
             }
+        }
 
-            var childrenCount = InternalChildren.Count;
-            if (childrenCount == 0)
+        protected override void OnItemsChanged(NotifyCollectionChangedEventArgs e) => UpdateChildrenCornerRadius();
+
+        protected override void OnRender(DrawingContext drawingContext) => UpdateChildrenCornerRadius();
+
+        private void UpdateChildrenCornerRadius()
+        {
+            var visibleChildren = GetVisibleChildrenCount();
+            var count = visibleChildren.Count;
+            if (count == 0)
             {
                 return;
             }
 
             var orientation = Orientation;
 
-            if (childrenCount == 1)
+            if (count == 1)
             {
-                UpdateChildCornerRadius(InternalChildren[0], CornerRadiusDict[orientation][ChildLocation.Single]);
+                UpdateChildCornerRadius(visibleChildren[0], CornerRadiusDict[orientation][ChildLocation.Single]);
             }
             else
             {
-                UpdateChildCornerRadius(InternalChildren[0], CornerRadiusDict[orientation][ChildLocation.First]);
+                UpdateChildCornerRadius(visibleChildren[0], CornerRadiusDict[orientation][ChildLocation.First]);
 
                 var childMargin = orientation == Orientation.Horizontal
                     ? new Thickness(-1, 0, 0, 0)
                     : new Thickness(0, -1, 0, 0);
 
-                for (var childIndex = 1; childIndex < childrenCount; childIndex++)
+                for (var childIndex = 1; childIndex < count; childIndex++)
                 {
-                    var child = InternalChildren[childIndex];
+                    var child = visibleChildren[childIndex];
                     child.SetCurrentValue(MarginProperty, childMargin);
                     UpdateChildCornerRadius(child, CornerRadiusDict[orientation][ChildLocation.Middle]);
                 }
 
-                var lastChild = InternalChildren[childrenCount - 1];
+                var lastChild = visibleChildren[count - 1];
                 lastChild.SetCurrentValue(MarginProperty, childMargin);
                 UpdateChildCornerRadius(lastChild, CornerRadiusDict[orientation][ChildLocation.Last]);
             }
         }
 
+        private List<UIElement> GetVisibleChildrenCount()
+        {
+            return Items.OfType<UIElement>().Where(element => element.Visibility == Visibility.Visible).ToList();
+        }
+
         private static void UpdateChildCornerRadius(DependencyObject child, CornerRadius cornerRadius)
         {
             if (child is Border border)
@@ -93,21 +132,15 @@ namespace HandyControl.Controls
             }
         }
 
-        private void ElementAdded_LostFocus(object sender, RoutedEventArgs e)
-        {
-            if (sender is UIElement element)
-            {
-                SetZIndex(element, 0);
-            }
-        }
+        private void ElementAdded_LostFocus(object sender, RoutedEventArgs e) => ResetElementZIndex(e.OriginalSource);
 
-        private void ElementAdded_GotFocus(object sender, RoutedEventArgs e)
-        {
-            if (sender is UIElement element)
-            {
-                SetZIndex(element, int.MaxValue);
-            }
-        }
+        private void ElementAdded_GotFocus(object sender, RoutedEventArgs e) => MaximizeElementZIndex(e.OriginalSource);
+
+        private static void ResetElementZIndex(object element) => Panel.SetZIndex((UIElement) element, 0);
+
+        private static void MaximizeElementZIndex(object element) => Panel.SetZIndex((UIElement) element, int.MaxValue);
+
+        private void ElementAdded_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e) => UpdateChildrenCornerRadius();
 
         private enum ChildLocation
         {
diff --git a/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems b/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
index 094f4063..cc810bd4 100644
--- a/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
+++ b/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
@@ -429,12 +429,21 @@
     <None Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\AutoCompleteTextBoxBaseStyle.xaml">
       <SubType>Designer</SubType>
     </None>
+    <None Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\ItemsPanelTemplate.xaml">
+      <SubType>Designer</SubType>
+    </None>
+    <None Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\ElementGroupBaseStyle.xaml">
+      <SubType>Designer</SubType>
+    </None>
     <None Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\ListViewBaseStyle.xaml">
       <SubType>Designer</SubType>
     </None>
     <None Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\DataGridBaseStyle.xaml">
       <SubType>Designer</SubType>
     </None>
+    <None Include="$(MSBuildThisFileDirectory)Themes\Styles\ElementGroup.xaml">
+      <SubType>Designer</SubType>
+    </None>
     <None Include="$(MSBuildThisFileDirectory)Themes\XamlCombine.exe" />
     <Page Include="$(MSBuildThisFileDirectory)Themes\Basic\Colors\Colors.xaml">
       <SubType>Designer</SubType>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Base/ElementGroupBaseStyle.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Base/ElementGroupBaseStyle.xaml
new file mode 100644
index 00000000..f37c92cb
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Base/ElementGroupBaseStyle.xaml
@@ -0,0 +1,39 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:hc="clr-namespace:HandyControl.Controls">
+
+    <Style x:Key="ElementGroupBaseStyle" TargetType="hc:ElementGroup">
+        <Setter Property="VerticalAlignment" Value="Top"/>
+        <Setter Property="Layout" Value="Uniform"/>
+        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
+        <Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource PrimaryBrush}"/>
+        <Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource RegionBrush}"/>
+        <Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource PrimaryBrush}"/>
+        <Style.Triggers>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="Layout" Value="Uniform"/>
+                    <Condition Property="Orientation" Value="Vertical"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}"/>
+            </MultiTrigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="Layout" Value="Stack"/>
+                    <Condition Property="Orientation" Value="Horizontal"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}"/>
+            </MultiTrigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="Layout" Value="Stack"/>
+                    <Condition Property="Orientation" Value="Vertical"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}"/>
+            </MultiTrigger>
+        </Style.Triggers>
+    </Style>
+
+</ResourceDictionary>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Base/ItemsPanelTemplate.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Base/ItemsPanelTemplate.xaml
new file mode 100644
index 00000000..bada6f89
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Base/ItemsPanelTemplate.xaml
@@ -0,0 +1,32 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <ItemsPanelTemplate x:Key="UniformHorizontalItemsPanelTemplate">
+        <UniformGrid FocusVisualStyle="{x:Null}" Rows="1"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="UniformVerticalItemsPanelTemplate">
+        <UniformGrid FocusVisualStyle="{x:Null}" Columns="1"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="StackHorizontalItemsPanelTemplate">
+        <StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="StackVerticalItemsPanelTemplate">
+        <StackPanel FocusVisualStyle="{x:Null}"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="WrapHorizontalItemsPanelTemplate">
+        <WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="WrapVerticalItemsPanelTemplate">
+        <WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+    </ItemsPanelTemplate>
+
+    <ItemsPanelTemplate x:Key="DockItemsPanelTemplate">
+        <DockPanel FocusVisualStyle="{x:Null}" LastChildFill="True"/>
+    </ItemsPanelTemplate>
+
+</ResourceDictionary>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Base/StepBarBaseStyle.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Base/StepBarBaseStyle.xaml
index ff623ef1..cf59fb07 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/Base/StepBarBaseStyle.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Base/StepBarBaseStyle.xaml
@@ -66,14 +66,6 @@
         </Setter>
     </Style>
 
-    <ItemsPanelTemplate x:Key="StepBarHorizontalItemsPanelTemplate">
-        <UniformGrid Rows="1"/>
-    </ItemsPanelTemplate>
-
-    <ItemsPanelTemplate x:Key="StepBarVerticalItemsPanelTemplate">
-        <UniformGrid Columns="1"/>
-    </ItemsPanelTemplate>
-
     <ControlTemplate x:Key="StepBarHorizontalTopControlTemplate" TargetType="hc:StepBar">
         <hc:SimplePanel>
             <ProgressBar HorizontalAlignment="Center" Name="PART_ProgressBarBack" VerticalAlignment="Top" Margin="0,10,0,0" Style="{StaticResource ProgressBarFlat}" Background="{DynamicResource ThirdlyTextBrush}"/>
@@ -105,23 +97,23 @@
         <Setter Property="Focusable" Value="False"/>
         <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalTop}"/>
         <Setter Property="Template" Value="{StaticResource StepBarHorizontalTopControlTemplate}"/>
-        <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
         <Style.Triggers>
             <Trigger Property="Dock" Value="Left">
                 <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}"/>
                 <Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}"/>
-                <Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}"/>
             </Trigger>
             <Trigger Property="Dock" Value="Bottom">
                 <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalBottom}"/>
                 <Setter Property="Template" Value="{StaticResource StepBarHorizontalBottomControlTemplate}"/>
-                <Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
             </Trigger>
             <Trigger Property="Dock" Value="Right">
                 <Setter Property="FlowDirection" Value="RightToLeft"/>
                 <Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}"/>
                 <Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}"/>
-                <Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}"/>
+                <Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}"/>
             </Trigger>
         </Style.Triggers>
     </Style>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Carousel.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Carousel.xaml
index 9f5856cb..a8d595f4 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/Carousel.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Carousel.xaml
@@ -68,7 +68,6 @@
                     </ControlTemplate.Triggers>
                     <hc:SimplePanel ClipToBounds="True">
                         <StackPanel x:Name="PART_Panel" Orientation="Horizontal"/>
-                        <!--<ItemsPresenter x:Name="PART_ItemsControl" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Left"/>-->
                         <hc:SimplePanel x:Name="GridTop" Opacity="0">
                             <Button Command="interactivity:ControlCommands.Prev" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0" Style="{StaticResource ButtonCustom}">
                                 <Border Width="50" Height="100" Background="{DynamicResource DarkOpacityBrush}" CornerRadius="4">
@@ -88,89 +87,4 @@
         </Setter>
     </Style>
 
-    <!--<Style x:Key="CarouselListBoxItemStyle" BasedOn="{StaticResource ListBoxItemCustom}" TargetType="ListBoxItem">
-        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
-        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
-        <Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
-    </Style>
-
-    <ItemsPanelTemplate x:Key="CarouselListBoxItemPanelTemplate">
-        <StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal" HorizontalAlignment="Left"/>
-    </ItemsPanelTemplate>
-
-    <Style x:Key="CarouselListBox" BasedOn="{StaticResource ListBoxBaseStyle}" TargetType="ListBox">
-        <Setter Property="ItemsPanel" Value="{StaticResource CarouselListBoxItemPanelTemplate}"/>
-        <Setter Property="ItemContainerStyle" Value="{StaticResource CarouselListBoxItemStyle}"/>
-    </Style>
-
-    <Style x:Key="CarouselPateButton" BasedOn="{StaticResource BaseStyle}" TargetType="RadioButton">
-        <Setter Property="Margin" Value="5,0"/>
-        <Setter Property="Width" Value="10"/>
-        <Setter Property="Height" Value="10"/>
-        <Setter Property="Background" Value="White"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
-        <Setter Property="Padding" Value="0"/>
-        <Setter Property="BorderThickness" Value="1"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="ToggleButton">
-                    <Border CornerRadius="5" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
-                    <ControlTemplate.Triggers>
-                        <Trigger Property="IsMouseOver" Value="True">
-                            <Setter Property="Opacity" Value=".9"/>
-                        </Trigger>
-                        <Trigger Property="IsPressed" Value="True">
-                            <Setter Property="Opacity" Value=".6"/>
-                        </Trigger>
-                        <Trigger Property="IsChecked" Value="True">
-                            <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
-                        </Trigger>
-                    </ControlTemplate.Triggers>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <Style TargetType="hc:Carousel" BasedOn="{StaticResource CarouselListBox}">
-        <Setter Property="PageButtonStyle" Value="{StaticResource CarouselPateButton}"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="hc:Carousel">
-                    <ControlTemplate.Triggers>
-                        <EventTrigger RoutedEvent="FrameworkElement.MouseEnter">
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetName="GridTop" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:.1"/>
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </EventTrigger>
-                        <EventTrigger RoutedEvent="FrameworkElement.MouseLeave">
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetName="GridTop" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:.1"/>
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </EventTrigger>
-                    </ControlTemplate.Triggers>
-                    <hc:SimplePanel ClipToBounds="True">
-                        <ItemsPresenter x:Name="PART_ItemsControl" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Left"/>
-                        <hc:SimplePanel x:Name="GridTop" Opacity="0">
-                            <Button Command="interactivity:ControlCommands.Prev" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0" Style="{StaticResource ButtonCustom}">
-                                <Border Width="50" Height="100" Background="{DynamicResource DarkOpacityBrush}" CornerRadius="4">
-                                    <Path Margin="16" Fill="White" Style="{StaticResource LeftPathStyle}"/>
-                                </Border>
-                            </Button>
-                            <Button Command="interactivity:ControlCommands.Next" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,30,0" Style="{StaticResource ButtonCustom}">
-                                <Border Width="50" Height="100" Background="{DynamicResource DarkOpacityBrush}" CornerRadius="4">
-                                    <Path Margin="16" Fill="White" Style="{StaticResource RightPathStyle}"/>
-                                </Border>
-                            </Button>
-                        </hc:SimplePanel>
-                        <StackPanel Name="PART_PanelPage" Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,20"/>
-                    </hc:SimplePanel>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>-->
-
 </ResourceDictionary>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/ElementGroup.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/ElementGroup.xaml
new file mode 100644
index 00000000..feb31095
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/ElementGroup.xaml
@@ -0,0 +1,13 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:hc="clr-namespace:HandyControl.Controls">
+
+    <Style BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup"/>
+
+    <Style x:Key="ElementGroupSolid" BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup">
+        <Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource TitleBrush}"/>
+        <Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource TitleBrush}"/>
+        <Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource TextIconBrush}"/>
+    </Style>
+
+</ResourceDictionary>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/ListBox.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/ListBox.xaml
index 69620440..d8940a9a 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/ListBox.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/ListBox.xaml
@@ -36,36 +36,20 @@
         <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
     </Style>
 
-    <ItemsPanelTemplate x:Key="WrapPanelHorizontalItemsPanelTemplate">
-        <WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-    </ItemsPanelTemplate>
-
     <Style x:Key="WrapPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-        <Setter Property="ItemsPanel" Value="{StaticResource WrapPanelHorizontalItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource WrapHorizontalItemsPanelTemplate}"/>
     </Style>
 
-    <ItemsPanelTemplate x:Key="WrapPanelVerticalItemsPanelTemplate">
-        <WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-    </ItemsPanelTemplate>
-
     <Style x:Key="WrapPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-        <Setter Property="ItemsPanel" Value="{StaticResource WrapPanelVerticalItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource WrapVerticalItemsPanelTemplate}"/>
     </Style>
 
-    <ItemsPanelTemplate x:Key="StackPanelHorizontalItemsPanelTemplate">
-        <StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal"/>
-    </ItemsPanelTemplate>
-
     <Style x:Key="StackPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-        <Setter Property="ItemsPanel" Value="{StaticResource StackPanelHorizontalItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}"/>
     </Style>
 
-    <ItemsPanelTemplate x:Key="StackPanelVerticalItemsPanelTemplate">
-        <StackPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Stretch"/>
-    </ItemsPanelTemplate>
-
     <Style x:Key="StackPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-        <Setter Property="ItemsPanel" Value="{StaticResource StackPanelVerticalItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}"/>
     </Style>
 
 </ResourceDictionary>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/PropertyGrid.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/PropertyGrid.xaml
index 7906c69d..91dcc0b3 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/PropertyGrid.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/PropertyGrid.xaml
@@ -67,10 +67,6 @@
         <Setter Property="hc:BorderElement.CornerRadius" Value="0,0,4,4"/>
     </Style>
 
-    <ItemsPanelTemplate x:Key="ComboBoxCapsuleItemsPanelTemplate">
-        <UniformGrid FocusVisualStyle="{x:Null}" Rows="1"/>
-    </ItemsPanelTemplate>
-
     <tools:ComboBoxItemCapsuleStyleSelector x:Key="ComboBoxItemCapsuleStyleSelector"/>
 
     <Style x:Key="ComboBoxCapsule" BasedOn="{x:Null}" TargetType="ComboBox">
@@ -78,7 +74,7 @@
         <Setter Property="VerticalAlignment" Value="Top"/>
         <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
         <Setter Property="Focusable" Value="False"/>
-        <Setter Property="ItemsPanel" Value="{StaticResource ComboBoxCapsuleItemsPanelTemplate}"/>
+        <Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ComboBox">
diff --git a/src/Shared/HandyControl_Shared/Themes/Theme.xaml b/src/Shared/HandyControl_Shared/Themes/Theme.xaml
index 5e78b866..c72999a7 100644
--- a/src/Shared/HandyControl_Shared/Themes/Theme.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Theme.xaml
@@ -587,6 +587,27 @@
 			<TextBlock Visibility="{Binding ShowText,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Boolean2VisibilityConverter}}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Text}" />
 		</hc:SimplePanel>
 	</ControlTemplate>
+	<ItemsPanelTemplate x:Key="UniformHorizontalItemsPanelTemplate">
+		<UniformGrid FocusVisualStyle="{x:Null}" Rows="1" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="UniformVerticalItemsPanelTemplate">
+		<UniformGrid FocusVisualStyle="{x:Null}" Columns="1" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="StackHorizontalItemsPanelTemplate">
+		<StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="StackVerticalItemsPanelTemplate">
+		<StackPanel FocusVisualStyle="{x:Null}" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="WrapHorizontalItemsPanelTemplate">
+		<WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="WrapVerticalItemsPanelTemplate">
+		<WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" />
+	</ItemsPanelTemplate>
+	<ItemsPanelTemplate x:Key="DockItemsPanelTemplate">
+		<DockPanel FocusVisualStyle="{x:Null}" LastChildFill="True" />
+	</ItemsPanelTemplate>
 	<LinearGradientBrush x:Key="ResizeGripperForeground" EndPoint="1,0.75" StartPoint="0,0.25">
 		<GradientStop Color="#FFFFFF" Offset="0.3" />
 		<GradientStop Color="#BBC5D7" Offset="0.75" />
@@ -722,12 +743,6 @@
 			</DrawingGroup>
 		</DrawingBrush.Drawing>
 	</DrawingBrush>
-	<ItemsPanelTemplate x:Key="StepBarHorizontalItemsPanelTemplate">
-		<UniformGrid Rows="1" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StepBarVerticalItemsPanelTemplate">
-		<UniformGrid Columns="1" />
-	</ItemsPanelTemplate>
 	<ContextMenu x:Key="TabItemMenu" x:Shared="False">
 		<MenuItem Command="interactivity:ControlCommands.Close" Header="{x:Static langs:Lang.Close}" />
 		<MenuItem Command="interactivity:ControlCommands.CloseAll" Header="{x:Static langs:Lang.CloseAll}" />
@@ -813,21 +828,6 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
-	<ItemsPanelTemplate x:Key="WrapPanelHorizontalItemsPanelTemplate">
-		<WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="WrapPanelVerticalItemsPanelTemplate">
-		<WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StackPanelHorizontalItemsPanelTemplate">
-		<StackPanel FocusVisualStyle="{x:Null}" Orientation="Horizontal" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="StackPanelVerticalItemsPanelTemplate">
-		<StackPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Stretch" />
-	</ItemsPanelTemplate>
-	<ItemsPanelTemplate x:Key="ComboBoxCapsuleItemsPanelTemplate">
-		<UniformGrid FocusVisualStyle="{x:Null}" Rows="1" />
-	</ItemsPanelTemplate>
 	<tools:ComboBoxItemCapsuleStyleSelector x:Key="ComboBoxItemCapsuleStyleSelector" />
 	<hc:HorizontalAlignmentPathTemplateSelector x:Key="HorizontalAlignmentPathTemplateSelector" />
 	<hc:VerticalAlignmentPathTemplateSelector x:Key="VerticalAlignmentPathTemplateSelector" />
@@ -2479,6 +2479,39 @@
 			</MultiTrigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ElementGroupBaseStyle" TargetType="hc:ElementGroup">
+		<Setter Property="VerticalAlignment" Value="Top" />
+		<Setter Property="Layout" Value="Uniform" />
+		<Setter Property="FocusVisualStyle" Value="{x:Null}" />
+		<Setter Property="Focusable" Value="False" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
+		<Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource PrimaryBrush}" />
+		<Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource RegionBrush}" />
+		<Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource PrimaryBrush}" />
+		<Style.Triggers>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Uniform" />
+					<Condition Property="Orientation" Value="Vertical" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
+			</MultiTrigger>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Stack" />
+					<Condition Property="Orientation" Value="Horizontal" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}" />
+			</MultiTrigger>
+			<MultiTrigger>
+				<MultiTrigger.Conditions>
+					<Condition Property="Layout" Value="Stack" />
+					<Condition Property="Orientation" Value="Vertical" />
+				</MultiTrigger.Conditions>
+				<Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}" />
+			</MultiTrigger>
+		</Style.Triggers>
+	</Style>
 	<Style x:Key="ProgressBarBaseStyle" TargetType="ProgressBar">
 		<Setter Property="hc:VisualElement.Text">
 			<Setter.Value>
@@ -10744,23 +10777,23 @@
 		<Setter Property="Focusable" Value="False" />
 		<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalTop}" />
 		<Setter Property="Template" Value="{StaticResource StepBarHorizontalTopControlTemplate}" />
-		<Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 		<Style.Triggers>
 			<Trigger Property="Dock" Value="Left">
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}" />
 				<Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
 			</Trigger>
 			<Trigger Property="Dock" Value="Bottom">
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemHorizontalBottom}" />
 				<Setter Property="Template" Value="{StaticResource StepBarHorizontalBottomControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 			</Trigger>
 			<Trigger Property="Dock" Value="Right">
 				<Setter Property="FlowDirection" Value="RightToLeft" />
 				<Setter Property="ItemContainerStyle" Value="{StaticResource StepBarItemVerticalLeft}" />
 				<Setter Property="Template" Value="{StaticResource StepBarVerticalLeftControlTemplate}" />
-				<Setter Property="ItemsPanel" Value="{StaticResource StepBarVerticalItemsPanelTemplate}" />
+				<Setter Property="ItemsPanel" Value="{StaticResource UniformVerticalItemsPanelTemplate}" />
 			</Trigger>
 		</Style.Triggers>
 	</Style>
@@ -12270,7 +12303,6 @@
 					</ControlTemplate.Triggers>
 					<hc:SimplePanel ClipToBounds="True">
 						<StackPanel x:Name="PART_Panel" Orientation="Horizontal" />
-						<!--<ItemsPresenter x:Name="PART_ItemsControl" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Left"/>-->
 						<hc:SimplePanel x:Name="GridTop" Opacity="0">
 							<Button Command="interactivity:ControlCommands.Prev" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0" Style="{StaticResource ButtonCustom}">
 								<Border Width="50" Height="100" Background="{DynamicResource DarkOpacityBrush}" CornerRadius="4">
@@ -12614,6 +12646,12 @@
 	<Style BasedOn="{StaticResource DialogBaseStyle}" TargetType="hc:Dialog" />
 	<Style BasedOn="{StaticResource DividerBaseStyle}" TargetType="hc:Divider" />
 	<Style BasedOn="{StaticResource DrawerBaseStyle}" TargetType="hc:Drawer" />
+	<Style BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup" />
+	<Style x:Key="ElementGroupSolid" BasedOn="{StaticResource ElementGroupBaseStyle}" TargetType="hc:ElementGroup">
+		<Setter Property="hc:VisualElement.HighlightBorderBrush" Value="{DynamicResource TitleBrush}" />
+		<Setter Property="hc:VisualElement.HighlightBackground" Value="{DynamicResource TitleBrush}" />
+		<Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource TextIconBrush}" />
+	</Style>
 	<Style BasedOn="{StaticResource EmptyBaseStyle}" TargetType="hc:Empty" />
 	<Style BasedOn="{StaticResource ExpanderBaseStyle}" TargetType="Expander" />
 	<Style BasedOn="{StaticResource FlowDocumentScrollViewerBaseStyle}" TargetType="FlowDocumentScrollViewer" />
@@ -12758,16 +12796,16 @@
 		<Setter Property="HorizontalContentAlignment" Value="Stretch" />
 	</Style>
 	<Style x:Key="WrapPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource WrapPanelHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource WrapHorizontalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="WrapPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource WrapPanelVerticalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource WrapVerticalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="StackPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource StackPanelHorizontalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource StackHorizontalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="StackPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
-		<Setter Property="ItemsPanel" Value="{StaticResource StackPanelVerticalItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource StackVerticalItemsPanelTemplate}" />
 	</Style>
 	<Style x:Key="ListViewBaseStyle" TargetType="ListView">
 		<Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}" />
@@ -13203,7 +13241,7 @@
 		<Setter Property="VerticalAlignment" Value="Top" />
 		<Setter Property="FocusVisualStyle" Value="{x:Null}" />
 		<Setter Property="Focusable" Value="False" />
-		<Setter Property="ItemsPanel" Value="{StaticResource ComboBoxCapsuleItemsPanelTemplate}" />
+		<Setter Property="ItemsPanel" Value="{StaticResource UniformHorizontalItemsPanelTemplate}" />
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="ComboBox">
diff --git a/src/Shared/HandyControl_Shared/Themes/Theme_40.txt b/src/Shared/HandyControl_Shared/Themes/Theme_40.txt
index d1158b1a..80e81bb0 100644
--- a/src/Shared/HandyControl_Shared/Themes/Theme_40.txt
+++ b/src/Shared/HandyControl_Shared/Themes/Theme_40.txt
@@ -37,9 +37,11 @@ Styles\Base\RepeatButtonBaseStyle.xaml
 Styles\Base\ToggleBlockBaseStyle.xaml
 Styles\Base\GroupBoxBaseStyle.xaml
 Styles\Base\ButtonGroupBaseStyle.xaml
+Styles\Base\ElementGroupBaseStyle.xaml
 Styles\Base\ProgressBarBaseStyle.xaml
 Styles\Base\CheckBoxBaseStyle.xaml
 Styles\Base\RadioButtonBaseStyle.xaml
+Styles\Base\ItemsPanelTemplate.xaml
 # --------------------------------------
 Styles\Button.xaml
 Styles\TextBlock.xaml
@@ -138,6 +140,7 @@ Styles\DateTimePicker.xaml
 Styles\Dialog.xaml
 Styles\Divider.xaml
 Styles\Drawer.xaml
+Styles\ElementGroup.xaml
 Styles\Empty.xaml
 Styles\Expander.xaml
 Styles\FlipClock.xaml
diff --git a/src/Shared/HandyControl_Shared/Themes/Theme_GE45.txt b/src/Shared/HandyControl_Shared/Themes/Theme_GE45.txt
index e42ae089..0020c54a 100644
--- a/src/Shared/HandyControl_Shared/Themes/Theme_GE45.txt
+++ b/src/Shared/HandyControl_Shared/Themes/Theme_GE45.txt
@@ -37,9 +37,11 @@ Styles\Base\RepeatButtonBaseStyle.xaml
 Styles\Base\ToggleBlockBaseStyle.xaml
 Styles\Base\GroupBoxBaseStyle.xaml
 Styles\Base\ButtonGroupBaseStyle.xaml
+Styles\Base\ElementGroupBaseStyle.xaml
 Styles\Base\ProgressBarBaseStyle.xaml
 Styles\Base\CheckBoxBaseStyle.xaml
 Styles\Base\RadioButtonBaseStyle.xaml
+Styles\Base\ItemsPanelTemplate.xaml
 # --------------------------------------
 Styles\Button.xaml
 Styles\TextBlock.xaml
@@ -138,6 +140,7 @@ Styles\DateTimePicker.xaml
 Styles\Dialog.xaml
 Styles\Divider.xaml
 Styles\Drawer.xaml
+Styles\ElementGroup.xaml
 Styles\Empty.xaml
 Styles\Expander.xaml
 Styles\FlipClock.xaml