Merge pull request #105 from HandyOrg/add-Card

add Card
2019-06-21 00:42:39 +08:00
commit ca236aebbb
@@ -63,6 +63,10 @@ Step 4：enjoy coding

 ## Latest examples

+### Card
+
+![Card](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Card.png)
+
 ### ButtonGroup

 ![ButtonGroup](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/ButtonGroup.png)
@@ -79,12 +83,12 @@ Step 4：enjoy coding

 ![NotifyIcon](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NotifyIcon.png)

+## History publication
+
 ### Dialog

 ![Dialog](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Dialog.png)

-## History publication
-
 ### WaveProgressBar

 ![WaveProgressBar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/WaveProgressBar.gif)
@@ -356,6 +356,9 @@
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\ButtonGroup_16x.png">
      <Link>Resources\Img\LeftMainContent\ButtonGroup_16x.png</Link>
    </Resource>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\VSO_Card_16x.png">
+      <Link>Resources\Img\LeftMainContent\VSO_Card_16x.png</Link>
+    </Resource>
  </ItemGroup>
  <ItemGroup>
    <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.en.resx">
@@ -396,6 +396,9 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\VSO_Card_16x.png">
+      <Link>Resources\Img\LeftMainContent\VSO_Card_16x.png</Link>
+    </Resource>
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\ButtonGroup_16x.png">
      <Link>Resources\Img\LeftMainContent\ButtonGroup_16x.png</Link>
    </Resource>
@@ -458,6 +458,9 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\VSO_Card_16x.png">
+      <Link>Resources\Img\LeftMainContent\VSO_Card_16x.png</Link>
+    </Resource>
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\ButtonGroup_16x.png">
      <Link>Resources\Img\LeftMainContent\ButtonGroup_16x.png</Link>
    </Resource>
@@ -100,6 +100,8 @@
 	
        public static readonly string ButtonGroupDemoCtl = nameof(ButtonGroupDemoCtl);
 	
+        public static readonly string CardDemoCtl = nameof(CardDemoCtl);
+	
        public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);

        public static readonly string RepeatButtonDemoCtl = nameof(RepeatButtonDemoCtl);
@@ -52,7 +52,8 @@ var controlList = new List<string>
 	"SideMenuDemoCtl",
 	"GridDemoCtl",
 	"RangeSliderDemoCtl",
-	"ButtonGroupDemoCtl"
+	"ButtonGroupDemoCtl",
+	"CardDemoCtl"
 };
 var styleList = new List<string>
 {
@@ -0,0 +1,11 @@
+namespace HandyControlDemo.Data
+{
+    public class CardModel
+    {
+        public string Header { get; set; }
+
+        public string Content { get; set; }
+
+        public string Footer { get; set; }
+    }
+}
@@ -16,6 +16,7 @@
    <Compile Include="$(MSBuildThisFileDirectory)Data\AppConfig.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Enum\DemoType.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\GlobalData.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\CardModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\ChatInfoModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\AvatarModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\CoverViewDemoModel.cs" />
@@ -47,6 +48,9 @@
    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\AnimationPathDemoCtl.xaml.cs">
      <DependentUpon>AnimationPathDemoCtl.xaml</DependentUpon>
    </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\CardDemoCtl.xaml.cs">
+      <DependentUpon>CardDemoCtl.xaml</DependentUpon>
+    </Compile>
    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\RangeSliderDemoCtl.xaml.cs">
      <DependentUpon>RangeSliderDemoCtl.xaml</DependentUpon>
    </Compile>
@@ -297,6 +301,7 @@
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Basic\InteractiveDialogViewModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Common\ComboBoxDemoViewModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\BadgeDemoViewModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\CardDemoViewModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\CoverViewModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\DialogDemoViewModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)ViewModel\Controls\GrowlDemoViewModel.cs" />
@@ -404,6 +409,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\CardDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\RelativePanelDemoCtl.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -204,6 +204,15 @@ namespace HandyControlDemo.Properties.Langs {
            }
        }
        
+        /// <summary>
+        ///   查找类似 卡片 的本地化字符串。
+        /// </summary>
+        public static string Card {
+            get {
+                return ResourceManager.GetString("Card", resourceCulture);
+            }
+        }
+        
        /// <summary>
        ///   查找类似 轮播 的本地化字符串。
        /// </summary>
@@ -621,4 +621,7 @@
  <data name="ButtonGroup" xml:space="preserve">
    <value>ButtonGroup</value>
  </data>
+  <data name="Card" xml:space="preserve">
+    <value>Card</value>
+  </data>
 </root>
@@ -621,4 +621,7 @@
  <data name="ButtonGroup" xml:space="preserve">
    <value>按钮组</value>
  </data>
+  <data name="Card" xml:space="preserve">
+    <value>卡片</value>
+  </data>
 </root>
@@ -76,18 +76,7 @@
    </Style>

    <ItemsPanelTemplate x:Key="FluidMoveBehaviorWrapPanelItemsPanelTemplate">
-        <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-            <hc:Interaction.Behaviors>
-                <hc:FluidMoveBehavior AppliesTo="Children" Duration="0:0:.2">
-                    <hc:FluidMoveBehavior.EaseX>
-                        <PowerEase/>
-                    </hc:FluidMoveBehavior.EaseX>
-                    <hc:FluidMoveBehavior.EaseY>
-                        <PowerEase/>
-                    </hc:FluidMoveBehavior.EaseY>
-                </hc:FluidMoveBehavior>
-            </hc:Interaction.Behaviors>
-        </WrapPanel>
+        <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center" hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"/>
    </ItemsPanelTemplate>

    <Style x:Key="MessageBoxCustom" TargetType="hc:MessageBox" BasedOn="{StaticResource {x:Type hc:MessageBox}}">
@@ -145,6 +145,73 @@ namespace HandyControlDemo.Service
            };
        }

+        internal List<CardModel> GetCardDataList()
+        {
+            return new List<CardModel>
+            {
+                new CardModel
+                {
+                    Header = "Atomic",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/1.jpg",
+                    Footer = "Stive Morgan"
+                },
+                new CardModel
+                {
+                    Header = "Zinderlong",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/2.jpg",
+                    Footer = "Zonderling"
+                },
+                new CardModel
+                {
+                    Header = "Busy Doin' Nothin'",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/3.jpg",
+                    Footer = "Ace Wilder"
+                },
+                new CardModel
+                {
+                    Header = "Wrong",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/4.jpg",
+                    Footer = "Blaxy Girls"
+                },
+                new CardModel
+                {
+                    Header = "The Lights",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/5.jpg",
+                    Footer = "Panda Eyes"
+                },
+                new CardModel
+                {
+                    Header = "EA7-50-Cent Disco",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/6.jpg",
+                    Footer = "еяхат музыка"
+                },
+                new CardModel
+                {
+                    Header = "Monsters",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/7.jpg",
+                    Footer = "Different Heaven"
+                },
+                new CardModel
+                {
+                    Header = "Gangsta Walk",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/8.jpg",
+                    Footer = "Illusionize"
+                },
+                new CardModel
+                {
+                    Header = "Won't Back Down",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/9.jpg",
+                    Footer = "Boehm / Benjamin Francis Leftwich"
+                },
+                new CardModel
+                {
+                    Header = "Katchi",
+                    Content = "/HandyControlDemo;component/Resources/Img/Album/10.jpg",
+                    Footer = "Ofenbach / Nick Waterhouse"
+                }
+            };
+        }
+
        internal List<StepBarDemoModel> GetStepBarDemoDataList()
        {
            return new List<StepBarDemoModel>
@@ -0,0 +1,34 @@
+<UserControl x:Class="HandyControlDemo.UserControl.CardDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Background="{DynamicResource RegionBrush}"
+             DataContext="{Binding CardDemo,Source={StaticResource Locator}}"
+             xmlns:hc="https://handyorg.github.io/handycontrol"
+             xmlns:data="clr-namespace:HandyControlDemo.Data">
+    <hc:TransitioningContentControl>
+        <ListBox Margin="32" BorderThickness="0" Style="{StaticResource WrapPanelHorizontalListBox}" ItemsPanel="{StaticResource FluidMoveBehaviorWrapPanelItemsPanelTemplate}" ItemsSource="{Binding DataList}">
+            <ListBox.ItemTemplate>
+                <DataTemplate DataType="data:CardModel">
+                    <hc:Card MaxWidth="240" BorderThickness="0" Effect="{StaticResource EffectShadow2}" Margin="8" Footer="{Binding Footer}">
+                        <!--<hc:Card.HeaderTemplate>
+                            <DataTemplate>
+                                <TextBlock HorizontalAlignment="Left" Style="{StaticResource TextBlockLargeBold}" Text="{Binding}" Margin="10"/>
+                            </DataTemplate>
+                        </hc:Card.HeaderTemplate>-->
+                        <Border CornerRadius="4,4,0,0" Style="{StaticResource BorderClip}">
+                            <Image Width="240" Height="240" Source="{Binding Content}" Stretch="Uniform"/>
+                        </Border>
+                        <hc:Card.FooterTemplate>
+                            <DataTemplate>
+                                <StackPanel Margin="10">
+                                    <TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Style="{StaticResource TextBlockLargeBold}" Text="{Binding DataContext.Header,RelativeSource={RelativeSource AncestorType=hc:Card}}" HorizontalAlignment="Left"/>
+                                    <TextBlock TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" Style="{StaticResource TextBlockDefault}" Text="{Binding}" Margin="0,6,0,0" HorizontalAlignment="Left"/>
+                                </StackPanel>
+                            </DataTemplate>
+                        </hc:Card.FooterTemplate>
+                    </hc:Card>
+                </DataTemplate>
+            </ListBox.ItemTemplate>
+        </ListBox>   
+    </hc:TransitioningContentControl>
+</UserControl>
@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class CardDemoCtl
+    {
+        public CardDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -225,7 +225,7 @@
                                <Image Source="../../Resources/Img/LeftMainContent/Bubble_16xLG.png"/>
                            </hc:EdgeElement.LeftContent>
                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.NotifyIconDemoCtl}" Content="{x:Static langs:Lang.NotifyIcon}">
+                        <ListBoxItem Tag="{x:Static data:MessageToken.NotifyIconDemoCtl}" Content="{x:Static langs:Lang.NotifyIcon}">
                            <hc:EdgeElement.LeftContent>
                                <Image Source="../../Resources/Img/LeftMainContent/NotificationHub_16x.png"/>
                            </hc:EdgeElement.LeftContent>
@@ -315,6 +315,11 @@
                                <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
                            </hc:EdgeElement.LeftContent>
                        </ListBoxItem>
+                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.CardDemoCtl}" Content="{x:Static langs:Lang.Card}">
+                            <hc:EdgeElement.LeftContent>
+                                <Image Source="../../Resources/Img/LeftMainContent/VSO_Card_16x.png"/>
+                            </hc:EdgeElement.LeftContent>
+                        </ListBoxItem>
                        <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
                            <hc:EdgeElement.LeftContent>
                                <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>
@@ -0,0 +1,13 @@
+using HandyControlDemo.Data;
+using HandyControlDemo.Service;
+
+namespace HandyControlDemo.ViewModel
+{
+    public class CardDemoViewModel : DemoViewModelBase<CardModel>
+    {
+        public CardDemoViewModel(DataService dataService)
+        {
+            DataList = dataService.GetCardDataList();
+        }
+    }
+}
@@ -38,6 +38,7 @@ namespace HandyControlDemo.ViewModel
            SimpleIoc.Default.Register<SideMenuDemoViewModel>();
            SimpleIoc.Default.Register<TabControlDemoViewModel>();
            SimpleIoc.Default.Register<NoUserViewModel>();
+            SimpleIoc.Default.Register<CardDemoViewModel>();
        }

        public static ViewModelLocator Instance => new Lazy<ViewModelLocator>(() =>
@@ -87,6 +88,8 @@ namespace HandyControlDemo.ViewModel

        public NoUserViewModel NoUser => ServiceLocator.Current.GetInstance<NoUserViewModel>();

+        public CardDemoViewModel CardDemo => ServiceLocator.Current.GetInstance<CardDemoViewModel>();
+
        #endregion
    }
 }
@@ -0,0 +1,87 @@
+using System.ComponentModel;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace HandyControl.Controls
+{
+    public class Card : ContentControl
+    {
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+            "Header", typeof(object), typeof(Card), new PropertyMetadata(default(object)));
+
+        public object Header
+        {
+            get => GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        public static readonly DependencyProperty HeaderTemplateProperty = DependencyProperty.Register(
+            "HeaderTemplate", typeof(DataTemplate), typeof(Card), new PropertyMetadata(default(DataTemplate)));
+
+        [Bindable(true), Category("Content")]
+        public DataTemplate HeaderTemplate
+        {
+            get => (DataTemplate) GetValue(HeaderTemplateProperty);
+            set => SetValue(HeaderTemplateProperty, value);
+        }
+
+        public static readonly DependencyProperty HeaderTemplateSelectorProperty = DependencyProperty.Register(
+            "HeaderTemplateSelector", typeof(DataTemplateSelector), typeof(Card), new PropertyMetadata(default(DataTemplateSelector)));
+
+        [Bindable(true), Category("Content")]
+        public DataTemplateSelector HeaderTemplateSelector
+        {
+            get => (DataTemplateSelector) GetValue(HeaderTemplateSelectorProperty);
+            set => SetValue(HeaderTemplateSelectorProperty, value);
+        }
+
+        public static readonly DependencyProperty HeaderStringFormatProperty = DependencyProperty.Register(
+            "HeaderStringFormat", typeof(string), typeof(Card), new PropertyMetadata(default(string)));
+
+        [Bindable(true), Category("Content")]
+        public string HeaderStringFormat
+        {
+            get => (string) GetValue(HeaderStringFormatProperty);
+            set => SetValue(HeaderStringFormatProperty, value);
+        }
+
+        public static readonly DependencyProperty FooterProperty = DependencyProperty.Register(
+            "Footer", typeof(object), typeof(Card), new PropertyMetadata(default(object)));
+
+        public object Footer
+        {
+            get => GetValue(FooterProperty);
+            set => SetValue(FooterProperty, value);
+        }
+
+        public static readonly DependencyProperty FooterTemplateProperty = DependencyProperty.Register(
+            "FooterTemplate", typeof(DataTemplate), typeof(Card), new PropertyMetadata(default(DataTemplate)));
+
+        [Bindable(true), Category("Content")]
+        public DataTemplate FooterTemplate
+        {
+            get => (DataTemplate) GetValue(FooterTemplateProperty);
+            set => SetValue(FooterTemplateProperty, value);
+        }
+
+        public static readonly DependencyProperty FooterTemplateSelectorProperty = DependencyProperty.Register(
+            "FooterTemplateSelector", typeof(DataTemplateSelector), typeof(Card), new PropertyMetadata(default(DataTemplateSelector)));
+
+        [Bindable(true), Category("Content")]
+        public DataTemplateSelector FooterTemplateSelector
+        {
+            get => (DataTemplateSelector) GetValue(FooterTemplateSelectorProperty);
+            set => SetValue(FooterTemplateSelectorProperty, value);
+        }
+
+        public static readonly DependencyProperty FooterStringFormatProperty = DependencyProperty.Register(
+            "FooterStringFormat", typeof(string), typeof(Card), new PropertyMetadata(default(string)));
+
+        [Bindable(true), Category("Content")]
+        public string FooterStringFormat
+        {
+            get => (string) GetValue(FooterStringFormatProperty);
+            set => SetValue(FooterStringFormatProperty, value);
+        }
+    }
+}
@@ -19,10 +19,12 @@
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\PanelElement.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\PasswordBoxAttach.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\ButtonGroup.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Card.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeTrack.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeThumb.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\TwoWayRangeBase.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Interactivity\Commands\OpenLinkCommand.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Tools\Converter\BorderCircularClipConverter.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Tools\Converter\NameReferenceConverter.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Tools\Extension\FrameworkElementExtension.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Tools\Extension\StringExtension.cs" />
@@ -342,6 +344,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\CardBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\ColorPickerBaseStyle.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -350,6 +356,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Card.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Col.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -15,6 +15,7 @@
    <converter:Boolean2StrConverter x:Key="Boolean2StrConverter"/>
    <converter:Int2StrConverter x:Key="Int2StrConverter"/>
    <converter:BorderClipConverter x:Key="BorderClipConverter"/>
+    <converter:BorderCircularClipConverter x:Key="BorderCircularClipConverter"/>
    <converter:BorderCircularConverter x:Key="BorderCircularConverter"/>
    <converter:Object2VisibilityConverter x:Key="Object2VisibilityConverter"/>

@@ -0,0 +1,40 @@
+<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">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="BaseStyle.xaml"/>
+        <ResourceDictionary Source="../../Basic/Converters.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="CardBaseStyle" BasedOn="{StaticResource BaseStyle}" TargetType="controls:Card">
+        <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="controls:BorderElement.CornerRadius" Value="4"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Card">
+                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{Binding Path=(controls:BorderElement.CornerRadius),RelativeSource={RelativeSource TemplatedParent}}">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition/>
+                                <RowDefinition Height="Auto"/>
+                            </Grid.RowDefinitions>
+                            <Border BorderThickness="0,0,0,1" Visibility="{TemplateBinding Header, Converter={StaticResource Object2VisibilityConverter}}" BorderBrush="{TemplateBinding BorderBrush}">
+                                <ContentPresenter ContentSource="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" ContentStringFormat="{TemplateBinding HeaderStringFormat}"/>
+                            </Border>
+                            <ContentPresenter Grid.Row="1"/>
+                            <Border Grid.Row="2" BorderThickness="0,1,0,0"  Visibility="{TemplateBinding Footer, Converter={StaticResource Object2VisibilityConverter}}" BorderBrush="{TemplateBinding BorderBrush}">
+                                <ContentPresenter ContentSource="Footer" ContentTemplate="{TemplateBinding FooterTemplate}" ContentTemplateSelector="{TemplateBinding FooterTemplateSelector}" ContentStringFormat="{TemplateBinding FooterStringFormat}"/>
+                            </Border>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>
@@ -109,7 +109,7 @@
                    <StackPanel>
                        <Border Style="{StaticResource BorderCircular}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Viewbox>
-                                <Border x:Name="PART_Clip" Style="{StaticResource BorderClip}" CornerRadius="100" Width="200" Height="200">
+                                <Border x:Name="PART_Clip" Style="{StaticResource BorderCircularClip}" CornerRadius="100" Width="200" Height="200">
                                    <Path x:Name="PART_Wave" Stroke="{TemplateBinding WaveStroke}" StrokeThickness="{TemplateBinding WaveThickness}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="600" Height="250" Fill="{TemplateBinding WaveFill}" Stretch="Fill" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" Margin="0,0,-400,-20">
                                        <Path.Data>
                                            <PathGeometry>
@@ -30,7 +30,7 @@
        <Setter Property="controls:BorderElement.Circular" Value="True"/>
    </Style>

-    <Style x:Key="BorderClip" BasedOn="{StaticResource BorderCircular}" TargetType="Border">
+    <Style x:Key="BorderClip" TargetType="Border">
        <Setter Property="Clip">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource BorderClipConverter}">
@@ -42,4 +42,16 @@
        </Setter>
    </Style>

+    <Style x:Key="BorderCircularClip" BasedOn="{StaticResource BorderCircular}" TargetType="Border">
+        <Setter Property="Clip">
+            <Setter.Value>
+                <MultiBinding Converter="{StaticResource BorderCircularClipConverter}">
+                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
+                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
+                    <Binding Path="CornerRadius" RelativeSource="{RelativeSource Self}"/>
+                </MultiBinding>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
 </ResourceDictionary>
@@ -0,0 +1,11 @@
+<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">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/CardBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource CardBaseStyle}" TargetType="controls:Card"/>
+
+</ResourceDictionary>
@@ -14,7 +14,7 @@
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:Gravatar">
-                    <Border Style="{StaticResource BorderClip}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
+                    <Border Style="{StaticResource BorderCircularClip}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <ContentPresenter Margin="{TemplateBinding Padding}"/>
                    </Border>
                </ControlTemplate>
@@ -26,13 +26,13 @@
        </Setter>
    </Style>

-    <Style x:Key="ListBoxCustom" TargetType="ListBox">
+    <Style x:Key="ListBoxCustom" BasedOn="{StaticResource ListBoxBaseStyle}" TargetType="ListBox">
        <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemCustom}"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>

    <ItemsPanelTemplate x:Key="WrapPanelHorizontalItemsPanelTemplate">
-        <WrapPanel FocusVisualStyle="{x:Null}"/>
+        <WrapPanel FocusVisualStyle="{x:Null}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </ItemsPanelTemplate>

    <Style x:Key="WrapPanelHorizontalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
@@ -40,7 +40,7 @@
    </Style>

    <ItemsPanelTemplate x:Key="WrapPanelVerticalItemsPanelTemplate">
-        <WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical"/>
+        <WrapPanel FocusVisualStyle="{x:Null}" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </ItemsPanelTemplate>

    <Style x:Key="WrapPanelVerticalListBox" BasedOn="{StaticResource ListBoxCustom}" TargetType="ListBox">
@@ -65,6 +65,7 @@
        <ResourceDictionary Source="SideMenu.xaml"/>
        <ResourceDictionary Source="GridSplitter.xaml"/>
        <ResourceDictionary Source="Col.xaml"/>
+        <ResourceDictionary Source="Card.xaml"/>
    </ResourceDictionary.MergedDictionaries>

 </ResourceDictionary>
@@ -178,7 +178,7 @@
                    </ControlTemplate.Resources>
                    <Viewbox>
                        <controls:SimplePanel Height="28" Width="28">
-                            <Border Name="UnCheckedElement" Style="{StaticResource BorderClip}" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
+                            <Border Name="UnCheckedElement" Style="{StaticResource BorderCircularClip}" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1"/>
@@ -186,7 +186,7 @@
                                </Border.RenderTransform>
                                <ContentPresenter Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </Border>
-                            <Border Name="CheckedElement" Style="{StaticResource BorderClip}" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
+                            <Border Name="CheckedElement" Style="{StaticResource BorderCircularClip}" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="true" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="0"/>
@@ -0,0 +1,36 @@
+//referenced from https://stackoverflow.com/a/5650367/9639378
+
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace HandyControl.Tools.Converter
+{
+    public class BorderCircularClipConverter : IMultiValueConverter
+    {
+        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (values.Length == 3 && values[0] is double width && values[1] is double height && values[2] is CornerRadius radius)
+            {
+                if (width < double.Epsilon || height < double.Epsilon)
+                {
+                    return Geometry.Empty;
+                }
+
+                var clip = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft);
+                clip.Freeze();
+
+                return clip;
+            }
+
+            return DependencyProperty.UnsetValue;
+        }
+
+        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+}
@@ -1,6 +1,4 @@
-//referenced from https://stackoverflow.com/a/5650367/9639378
-
-using System;
+using System;
 using System.Globalization;
 using System.Windows;
 using System.Windows.Data;
@@ -19,7 +17,23 @@ namespace HandyControl.Tools.Converter
                    return Geometry.Empty;
                }

-                var clip = new RectangleGeometry(new Rect(0, 0, width, height), radius.TopLeft, radius.TopLeft);
+                var clip = new PathGeometry
+                {
+                    Figures = new PathFigureCollection
+                    {
+                        new PathFigure(new Point(radius.TopLeft, 0), new PathSegment[]
+                        {
+                            new LineSegment(new Point(width - radius.TopRight, 0), false),
+                            new ArcSegment(new Point(width, radius.TopRight), new Size(radius.TopRight, radius.TopRight), 90, false, SweepDirection.Clockwise, false),
+                            new LineSegment(new Point(width, height - radius.BottomRight), false),
+                            new ArcSegment(new Point(width - radius.BottomRight, height), new Size(radius.BottomRight, radius.BottomRight), 90, false, SweepDirection.Clockwise, false),
+                            new LineSegment(new Point(radius.BottomLeft, height), false),
+                            new ArcSegment(new Point(0, height - radius.BottomLeft), new Size(radius.BottomLeft, radius.BottomLeft), 90, false, SweepDirection.Clockwise, false),
+                            new LineSegment(new Point(0, radius.TopLeft), false),
+                            new ArcSegment(new Point(radius.TopLeft, 0), new Size(radius.TopLeft, radius.TopLeft), 90, false, SweepDirection.Clockwise, false),
+                        }, false)
+                    }
+                };
                clip.Freeze();

                return clip;