### Install HandyControls NuGet Package

Source: https://github.com/ghost1372/handycontrols/blob/develop/README.md

Use this command to install the HandyControls NuGet package into your project.

```powershell
Install-Package HandyControls
```

--------------------------------

### Install NexT Theme

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/themes/next/README.md

Clone the NexT theme repository into your Hexo project's themes directory to install it.

```sh
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next
```

--------------------------------

### Loading Control Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/loading/index.md

Demonstrates how to use LoadingLine and LoadingCircle controls in XAML, including styling and layout.

```xml
<StackPanel Width="600" Margin="32" VerticalAlignment="Center">
    <hc:LoadingLine/>
    <hc:LoadingLine Margin="0,30" Foreground="BlueViolet" Style="{StaticResource LoadingLineLarge}"/>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <hc:LoadingCircle/>
        <Border VerticalAlignment="Center" Margin="32,0,0,0" Background="{DynamicResource PrimaryBrush}" CornerRadius="10">
            <hc:LoadingCircle Style="{StaticResource LoadingCircleLight}" Margin="10"/>
        </Border>
    </StackPanel>
</StackPanel>
```

--------------------------------

### Basic TreeView Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/treeView/index.md

A basic example demonstrating the structure of a TreeView with nested TreeViewItems. This style is based on TreeViewBaseStyle.

```xml
<TreeView Width="200" VerticalAlignment="Center">
    <TreeViewItem Header="111">
        <TreeViewItem Header="111"/>
        <TreeViewItem Header="222"/>
        <TreeViewItem Header="333"/>
    </TreeViewItem>
    <TreeViewItem Header="222">
        <TreeViewItem Header="111"/>
        <TreeViewItem Header="222"/>
        <TreeViewItem Header="333"/>
    </TreeViewItem>
</TreeView>
```

--------------------------------

### Basic StepBar Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/stepBar/index.md

Demonstrates a basic StepBar with predefined steps. It uses data binding to control the current step and includes navigation buttons.

```xml
<Grid Margin="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <hc:StepBar Grid.ColumnSpan="2" StepIndex="{Binding StepIndex}">
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/>
    </hc:StepBar>
    <StackPanel Margin="0,32" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center">
        <Button Command="{Binding PrevCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Content="{ex:Lang Key={x:Static langs:LangKeys.Prev}}" Style="{StaticResource ButtonPrimary}"/>
        <Button Command="{Binding NextCmd}" CommandParameter="{Binding ElementName=PanelMain}" Width="180" Margin="0,16,0,0" Content="{ex:Lang Key={x:Static langs:LangKeys.Next}}" Style="{StaticResource ButtonPrimary}"/>
    </StackPanel>
    <hc:StepBar Margin="0,0,0,32" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Dock="Bottom">
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Register}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.BasicInfo}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.UploadFile}}"/>
        <hc:StepBarItem Content="{ex:Lang Key={x:Static langs:LangKeys.Complete}}"/>
    </hc:StepBar>
    <hc:StepBar Grid.Column="0" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Left">
        <hc:StepBar.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left">
                        <Run Text="{ex:Lang Key={Binding Header}}"/>
                        <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/>
                    </TextBlock>
                    <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/>
                </StackPanel>
            </DataTemplate>
        </hc:StepBar.ItemTemplate>
    </hc:StepBar>
    <hc:StepBar Grid.Column="1" Grid.Row="3" ItemsSource="{Binding DataList}" Dock="Right">
        <hc:StepBar.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock FontSize="16" FontWeight="Bold" HorizontalAlignment="Left">
                        <Run Text="{ex:Lang Key={Binding Header}}"/>
                        <Run Text="{Binding Index,RelativeSource={RelativeSource AncestorType=hc:StepBarItem}}"/>
                    </TextBlock>
                    <TextBlock Margin="0,4,0,0" Text="{ex:Lang Key={Binding Content}}"/>
                </StackPanel>
            </DataTemplate>
        </hc:StepBar.ItemTemplate>
    </hc:StepBar>
</Grid>
```

--------------------------------

### Start Screenshot Capture

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/screenshot/index.md

Initiates the screenshot capture process. This is the primary method to call for taking a screenshot.

```cs
new Screenshot().Start();
```

--------------------------------

### TransitioningContentControl Examples

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/transitioningContentControl/index.md

Demonstrates the use of TransitioningContentControl with various built-in transition modes and custom storyboards. A ToggleButton controls the visibility of the content grid.

```xml
<Grid Margin="32">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <ToggleButton Margin="0,0,0,32" IsChecked="True" Name="ButtonVisibilitySwitch" Style="{StaticResource ToggleButtonSwitch}"/>
    <UniformGrid Visibility="{Binding IsChecked,ElementName=ButtonVisibilitySwitch,Converter={StaticResource Boolean2VisibilityConverter}}" Grid.Row="1" Rows="4" Columns="3">
        <hc:TransitioningContentControl>
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2Left}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Left2Right">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Left2Right}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Bottom2Top">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Bottom2Top}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Top2Bottom">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Top2Bottom}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Right2LeftWithFade">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2LeftWithFade}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Left2RightWithFade">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Left2RightWithFade}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Bottom2TopWithFade">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Bottom2TopWithFade}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Top2BottomWithFade">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Top2BottomWithFade}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionMode="Right2LeftWithFade">
            <Label HorizontalAlignment="Stretch" Content="{x:Static hc:TransitionMode.Right2LeftWithFade}" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom1Transition}">
            <Label HorizontalAlignment="Stretch" Content="Custom1" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom2Transition}">
            <Label HorizontalAlignment="Stretch" Content="Custom2" Margin="32"/>
        </hc:TransitioningContentControl>
        <hc:TransitioningContentControl TransitionStoryboard="{StaticResource Custom3Transition}">
            <Label HorizontalAlignment="Stretch" Content="Custom3" Margin="32"/>
        </hc:TransitioningContentControl>
    </UniformGrid>
</Grid>
```

--------------------------------

### Configure Fancybox Plugin

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/themes/next/README.md

Enable the fancybox plugin in NexT config and refer to its dependency repository for installation instructions.

```yaml
fancybox: false
```

--------------------------------

### CoverView Basic Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/coverView/index.md

Demonstrates the basic usage of CoverView with item templates and data binding. Ensure the String2BrushConverter is available and DataList is bound to a collection of items with ImgPath and BackgroundToken properties.

```xml
<hc:CoverView Margin="27" Width="880" Height="432" ItemWidth="160" ItemHeight="160" ItemsSource="{Binding DataList}">
    <hc:CoverView.ItemHeaderTemplate>
        <DataTemplate>
            <Image Source="{Binding ImgPath}"/>
        </DataTemplate>
    </hc:CoverView.ItemHeaderTemplate>
    <hc:CoverView.ItemTemplate>
        <DataTemplate>
            <Border Margin="10" Height="300" Background="{Binding BackgroundToken,Converter={StaticResource String2BrushConverter}}">
                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
            </Border>
        </DataTemplate>
    </hc:CoverView.ItemTemplate>
</hc:CoverView>
```

--------------------------------

### Basic RichTextBox Implementation

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/richTextBox/index.md

A basic example of how to implement a RichTextBox control in XAML. This snippet shows the minimal configuration required to display the control.

```xml
<RichTextBox Margin="10,10" VerticalAlignment="Center" HorizontalAlignment="Center"></RichTextBox>
```

--------------------------------

### TabControl Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/tabControl/index.md

Demonstrates the usage of the TabControl with various properties enabled, including animation, close buttons, draggable tabs, and fill enabled.

```xml
<hc:TabControl IsAnimationEnabled="True" ShowCloseButton="True" IsDraggable="True" IsTabFillEnabled="True" Width="800" Height="300">
    <hc:TabItem Header="TabItem1">
        <hc:SimplePanel Background="{DynamicResource RegionBrush}"/>
    </hc:TabItem>
    <hc:TabItem IsSelected="True" Header="TabItem2">
        <hc:SimplePanel Background="#FFE8563F"/>
    </hc:TabItem>
    <hc:TabItem Header="TabItem3">
        <hc:SimplePanel Background="#FF3F4EE8"/>
    </hc:TabItem>
    <hc:TabItem Header="TabItem4">
        <hc:SimplePanel Background="#FFE83F6D"/>
    </hc:TabItem>
    <hc:TabItem Header="TabItem5">
        <hc:SimplePanel Background="#FFB23FE8"/>
    </hc:TabItem>
    <hc:TabItem Header="TabItem6">
        <hc:SimplePanel Background="#FF3FE8E8"/>
    </hc:TabItem>
    <hc:TabItem Header="TabItem7">
        <hc:SimplePanel Background="#FFE8E03F"/>
    </hc:TabItem>
</hc:TabControl>
```

--------------------------------

### GlowWindow XAML Implementation

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/glowWindow/index.md

Example of how to implement GlowWindow in XAML. This includes setting window properties, glow colors, and background. It demonstrates the usage of custom attached properties and dynamic resources.

```xml
<hc:GlowWindow x:Class="HandyControlDemo.Window.GlowWindow"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:hc="https://handyorg.github.io/handycontrol"
               xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
               xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
               mc:Ignorable="d"
               Style="{StaticResource WindowGlow}"
               Background="{DynamicResource MainContentBackgroundBrush}"
               WindowStartupLocation="CenterScreen"
               Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}"
               ActiveGlowColor="{DynamicResource PrimaryColor}"
               Height="450" 
               Width="800" 
               Icon="/HandyControlDemo;component/Resources/Img/icon.ico">
    <Border Background="{DynamicResource MainContentForegroundDrawingBrush}"/>
</hc:GlowWindow>
```

--------------------------------

### PinBox Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/pinBox/index.md

Demonstrates how to use the PinBox control in XAML, configuring its length, initial password, and password masking character. The 'Completed' event is also shown.

```xml
<StackPanel Margin="32" VerticalAlignment="Center" hc:PinBox.Completed="PinBox_OnCompleted">
    <hc:PinBox Length="4" Password="1234"/>
    <hc:PinBox Length="6" Password="123456" Margin="0,16,0,0" PasswordChar="❤"/>
</StackPanel>
```

--------------------------------

### Pagination Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/pagination/index.md

Demonstrates how to use the Pagination control in XAML with custom properties for maximum page count, current page index, and jump enabled.

```xml
<hc:Pagination MaxPageCount="10" PageIndex="5" IsJumpEnabled="True"/>
```

--------------------------------

### Info Button Style

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/button/index.md

Demonstrates the ButtonInfo style for informational buttons, with examples of corner radius and icon usage.

```XAML
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮"/>
    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>
```

--------------------------------

### ContextMenu Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/contextMenu/index.md

This XAML snippet shows how to use the ContextMenu by binding its ItemsSource to a data list and defining a HierarchicalDataTemplate for the items. It's an example of how to apply the default context menu styling.

```xaml
<ContextMenu ItemsSource="{Binding DataList}">
    <ContextMenu.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding DataList}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>
    </ContextMenu.ItemTemplate>
</ContextMenu>
```

--------------------------------

### ProgressButton Usage Examples

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/progressButton/index.md

Demonstrates various ways to use the ProgressButton in XAML, including binding to IsUploading and Progress properties, and applying different styles for visual feedback.

```xml
<StackPanel>
    <hc:ProgressButton IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
    <hc:ProgressButton Style="{StaticResource ProgressButtonPrimary}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
    <hc:ProgressButton Style="{StaticResource ProgressButtonSuccess}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
    <hc:ProgressButton Style="{StaticResource ProgressButtonInfo}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
    <hc:ProgressButton Style="{StaticResource ProgressButtonWarning}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
    <hc:ProgressButton Style="{StaticResource ProgressButtonDanger}" IsChecked="{Binding IsUploading,Mode=TwoWay}" Progress="{Binding Progress}" Content="{Binding IsChecked,RelativeSource={RelativeSource Self},Converter={StaticResource Boolean2StringConverter},ConverterParameter={x:Static langs:Lang.UploadStr}}" Width="180" Margin="5"/>
</StackPanel>
```

--------------------------------

### Using Tokens for Specific StackPanel Containers

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/growl/index.md

Guide on how to use tokens to direct Growl notifications to specific StackPanel containers.

```APIDOC
## Displaying Information Notifications in Any StackPanel Container

### Description

This method allows you to direct Growl notifications to a specific `StackPanel` container by assigning it a unique token. This is useful when you have multiple notification areas or want to categorize notifications.

### Step 1: Assign a Token to the StackPanel

Use the `controls:Growl.Token` attached property to assign a unique identifier (token) to your `StackPanel`.

```xml
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Right">
    <StackPanel controls:Growl.Token="SuccessMsg" VerticalAlignment="Top" Margin="0,10,10,10"/>
</ScrollViewer>
```

### Step 2: Display Message Using the Token

When calling Growl methods, provide the token as the second argument to direct the message to the corresponding `StackPanel`.

```csharp
Growl.Success("文件保存成功！", "SuccessMsg");
```

**Note:** The message "文件保存成功！" will now only be sent to the `StackPanel` container that has the "SuccessMsg" token.
```

--------------------------------

### Icon Button Style

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/button/index.md

Demonstrates the ButtonIcon style, recommended for buttons that only display a geometry, with examples of styling and corner radius.

```XAML
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonIcon}" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
    <Button Style="{StaticResource ButtonIcon}" Background="Black" Foreground="White" controls:BorderElement.CornerRadius="15" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
    <Button Style="{StaticResource ButtonIcon}" BorderThickness="1" BorderBrush="Black" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
</StackPanel>
```

--------------------------------

### Boolean to Visibility Converter Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/basic_xaml/converters/index.md

Demonstrates how to use the Boolean2VisibilityConverter to bind a boolean property to a UI element's visibility.

```xaml
Visibility="{Binding ShowButton,Converter={StaticResource Boolean2VisibilityConverter}}"
```

--------------------------------

### BlurWindow XAML Integration

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/blurWindow/index.md

Example of how to integrate the BlurWindow control in XAML. It sets basic window properties and applies a specific style.

```xml
<hc:BlurWindow x:Class="HandyControlDemo.Window.BlurWindow"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:hc="https://handyorg.github.io/handycontrol"
               xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
               xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
               mc:Ignorable="d"
               Style="{StaticResource WindowBlur}"
               WindowStartupLocation="CenterScreen"
               Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}"
               Height="450" 
               Width="800" 
               Icon="/HandyControlDemo;component/Resources/Img/icon.ico">
</hc:BlurWindow>
```

--------------------------------

### Ask Method Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/growl/index.md

The Ask method uses a Func<bool, bool> callback to handle user confirmation. Returning true closes the notification, while false keeps it open.

```csharp
Growl.Ask(Properties.Langs.Lang.GrowlAsk, isConfirmed =>
{
    Growl.Info(isConfirmed.ToString());
    return true;
});
```

--------------------------------

### TextBlock Styles Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/textBlock/index.md

Demonstrates the usage of various predefined TextBlock styles such as TextBlockLargeBold, TextBlockLarge, TextBlockHeaderBold, and others. These styles are applied using the Style property within a StackPanel.

```XML
<StackPanel>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockLargeBold" Style="{StaticResource TextBlockLargeBold}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockLarge" Style="{StaticResource TextBlockLarge}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockHeaderBold" Style="{StaticResource TextBlockTitleBold}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockHeader" Style="{StaticResource TextBlockTitle}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockSubHeaderBold" Style="{StaticResource TextBlockSubTitleBold}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockSubHeader" Style="{StaticResource TextBlockSubTitle}"/>

    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultBold" Style="{StaticResource TextBlockDefaultBold}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefault" Style="{StaticResource TextBlockDefault}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultAccent" Style="{StaticResource TextBlockDefaultAccent}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultSecLight" Style="{StaticResource TextBlockDefaultSecLight}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultThiLight" Style="{StaticResource TextBlockDefaultThiLight}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultPrimary" Style="{StaticResource TextBlockDefaultPrimary}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultDanger" Style="{StaticResource TextBlockDefaultDanger}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultWarning" Style="{StaticResource TextBlockDefaultWarning}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultInfo" Style="{StaticResource TextBlockDefaultInfo}"/>
    <TextBlock HorizontalAlignment="Left" Margin="5" Text="TextBlockDefaultSuccess" Style="{StaticResource TextBlockDefaultSuccess}"/>
</StackPanel>
```

--------------------------------

### RangeSlider Examples

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/rangeSlider/index.md

Demonstrates various configurations of the RangeSlider control, including horizontal and vertical orientations, snapping to ticks, disabled states, and tooltip customization.

```XML
<StackPanel Margin="32" Orientation="Horizontal">
    <StackPanel>
        <hc:RangeSlider Width="400" IsSnapToTickEnabled="True" ValueStart="2" ValueEnd="8"/>
        <hc:RangeSlider Width="400" IsSnapToTickEnabled="True" ValueEnd="3" Margin="0,32,0,0" IsEnabled="False"/>
        <hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Top" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" TickPlacement="BottomRight" Margin="0,32,0,0"/>
        <hc:RangeSlider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Bottom" hc:TipElement.StringFormat="#0.00" ValueEnd="5" TickPlacement="Both" Margin="0,32,0,0"/>
    </StackPanel>
    <StackPanel Margin="32,0,0,0" Orientation="Horizontal">
        <hc:RangeSlider Height="400" IsSnapToTickEnabled="True" ValueEnd="8" Orientation="Vertical"/>
        <hc:RangeSlider Height="400" IsSnapToTickEnabled="True" ValueEnd="3" Margin="32,0,0,0" IsEnabled="False" Orientation="Vertical"/>
        <hc:RangeSlider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Left" IsSnapToTickEnabled="True" Maximum="100" ValueEnd="60" TickFrequency="10" TickPlacement="BottomRight" Margin="32,0,0,0" Orientation="Vertical"/>
        <hc:RangeSlider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Right" hc:TipElement.StringFormat="#0.00" ValueEnd="5" TickPlacement="Both" Margin="32,0" Orientation="Vertical"/>
    </StackPanel>
</StackPanel>
```

--------------------------------

### CircleProgressBar Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/circleProgressBar/index.md

Demonstrates how to use CircleProgressBar with different configurations for size, text visibility, arc thickness, and styles. It binds the Value property to a Slider.

```xml
<StackPanel Orientation="Horizontal" Margin="0,32,0,0">
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}"/>
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="30" Margin="16,0,0,0"/>
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="20" Height="20" ArcThickness="2" Style="{StaticResource ProgressBarSuccessCircle}"/>
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="30" Height="30" ArcThickness="6" Style="{StaticResource ProgressBarInfoCircle}"/>
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="40" Height="40" ArcThickness="10" Style="{StaticResource ProgressBarWarningCircle}"/>
    <hc:CircleProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" Width="50" Height="50" Style="{StaticResource ProgressBarDangerCircle}"/>
</StackPanel>
```

--------------------------------

### ImageSelector Usage Examples

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/imageSelector/index.md

Demonstrates various configurations of the ImageSelector control within a UniformGrid, showcasing different border styles, corner radii, and stroke properties.

```xml
<UniformGrid Columns="3" Margin="16">
    <hc:ImageSelector Width="100" Height="100" Margin="16"/>
    <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50"/>
    <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5"/>
    <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" BorderBrush="{DynamicResource SuccessBrush}"/>
    <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5,10" BorderBrush="{DynamicResource DangerBrush}"/>
    <hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="10" StrokeThickness="2" BorderThickness="2" BorderBrush="{DynamicResource PrimaryBrush}"/>
</UniformGrid>
```

--------------------------------

### Troubleshoot 'hexo-util' Module Error

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/themes/next/README.md

For NPM versions greater than 3, remove node_modules and reinstall. For versions less than 3, explicitly install hexo-util.

```sh
npm install --save-dev hexo-util
```

--------------------------------

### ToolBar Base Style Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/toolBar/index.md

Demonstrates the basic structure and usage of the ToolBar control with various child elements like Buttons, ToggleButtons, and CheckBoxes. This style is intended to be inherited.

```xml
<ToolBar Padding="10,6" Header="Demo" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button Content="Demo" Margin="10,0,0,0"/>
    <ToggleButton Content="Demo" Margin="10,0,0,0"/>
    <CheckBox Content="Demo" Margin="10,0,0,0"/>
</ToolBar>
```

--------------------------------

### CirclePanel Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/circlePanel/index.md

Demonstrates how to use the CirclePanel to arrange multiple buttons in a circular layout. The Diameter property controls the size of the circle.

```xml
<hc:CirclePanel Margin="64" Diameter="170">
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
    <Button Style="{StaticResource CirclePanelButton}"/>
</hc:CirclePanel>
```

--------------------------------

### Rate Control XAML Examples

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/rate/index.md

Demonstrates various configurations of the Rate control in XAML, including setting values, counts, read-only mode, allowing half selections, clearing, custom icons, and showing text.

```xml
<StackPanel Width="170">
    <hc:Rate Value="2"/>
    <hc:Rate Value="5" Count="6" Margin="0,16,0,0" Foreground="{DynamicResource SuccessBrush}"/>
    <hc:Rate DefaultValue="3" IsReadOnly="True" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource WarningBrush}"/>
    <hc:Rate DefaultValue="1" AllowClear="False" AllowHalf="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/>
    <hc:Rate Value="4.5" AllowHalf="True" ShowText="True" Margin="0,16,0,0" Foreground="{DynamicResource DangerBrush}" Icon="{StaticResource LoveGeometry}"/>
</StackPanel>
```

--------------------------------

### ImageBlock Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/imageBlock/index.md

Demonstrates how to use the ImageBlock control in XAML to display an animated sequence from a sprite sheet. Configure properties like Source, Interval, Columns, Rows, and playback range.

```xml
<UniformGrid Rows="3" Columns="4" Margin="32">
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="0" EndColumn="7" EndRow="0" Width="110" Height="128" IsPlaying="True"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="1" EndColumn="7" EndRow="1" Width="110" Height="128" IsPlaying="True"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="2" EndColumn="7" EndRow="2" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="3" EndColumn="7" EndRow="3" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.1" Columns="8" Rows="10" StartColumn="0" StartRow="4" EndColumn="7" EndRow="4" Width="110" Height="128" IsPlaying="True"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="5" EndColumn="7" EndRow="5" Width="110" Height="128" IsPlaying="True"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="6" EndColumn="7" EndRow="6" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.1" Columns="8" Rows="10" StartColumn="0" StartRow="7" EndColumn="7" EndRow="7" Width="110" Height="128" IsPlaying="True"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="8" EndColumn="7" EndRow="8" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/>
    <hc:ImageBlock Source="/HandyControlDemo;component/Resources/Img/Dance.png" Interval="0:0:0.125" Columns="8" Rows="10" StartColumn="0" StartRow="9" EndColumn="7" EndRow="9" Width="110" Height="128" IsPlaying="{Binding IsMouseOver,RelativeSource={RelativeSource Self}}"/>
</UniformGrid>
```

--------------------------------

### Card ViewModel for Data Binding

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/card/index.md

Provides a ViewModel with a collection of CardModel objects for use in data binding scenarios. This example is for demonstration purposes and not a strict MVVM implementation.

```csharp
    public class CardDemoViewModel
    {
        private IList<CardModel> _dataList;
        public CardDemoViewModel()
        {
            DataList = GetCardDataList();
        }

        internal ObservableCollection<CardModel> GetCardDataList()
        {
            return new ObservableCollection<CardModel>
            {
                new CardModel
                {
                    Header = "Atomic",
                    Content = "1.jpg",
                    Footer = "Stive Morgan"
                },
                new CardModel
                {
                    Header = "Zinderlong",
                    Content = "2.jpg",
                    Footer = "Zonderling"
                },
                new CardModel
                {
                    Header = "Busy Doin' Nothin'",
                    Content = "3.jpg",
                    Footer = "Ace Wilder"
                },
                new CardModel
                {
                    Header = "Wrong",
                    Content = "4.jpg",
                    Footer = "Blaxy Girls"
                },
                new CardModel
                {
                    Header = "The Lights",
                    Content = "5.jpg",
                    Footer = "Panda Eyes"
                },
                new CardModel
                {
                    Header = "EA7-50-Cent Disco",
                    Content = "6.jpg",
                    Footer = "еяхат музыка"
                },
                new CardModel
                {
                    Header = "Monsters",
                    Content = "7.jpg",
                    Footer = "Different Heaven"
                },
                new CardModel
                {
                    Header = "Gangsta Walk",
                    Content = "8.jpg",
                    Footer = "Illusionize"
                },
                new CardModel
                {
                    Header = "Won't Back Down",
                    Content = "9.jpg",
                    Footer = "Boehm"
                },
                new CardModel
                {
                    Header = "Katchi",
                    Content = "10.jpg",
                    Footer = "Ofenbach"
                }
            };
        }
        public IList<CardModel> DataList { get => _dataList; set => _dataList = value; }
    }
```

--------------------------------

### Create a TimePicker Instance

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/timePicker/index.md

Demonstrates how to create a basic TimePicker control in XAML and C#.

```XML
<hc:TimePicker />
```

```C#
var timePicker = new TimePicker();
```

--------------------------------

### Create PasswordBox Instance

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/passwordBox/index.md

Demonstrates how to create an instance of the PasswordBox control using XAML and C#.

```XML
<hc:PasswordBox />
```

```C#
var passwordBox = new PasswordBox();
```

--------------------------------

### Basic TimeBar Usage

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/timeBar/index.md

Demonstrates the basic instantiation of a TimeBar control in XAML.

```xml
<hc:TimeBar BorderThickness="0" Width="600"/>
```

--------------------------------

### Danger Button Style

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/button/index.md

Illustrates the ButtonDanger style for dangerous operations, with examples of corner radius and icon customization.

```XAML
<StackPanel Orientation="Horizontal">
    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮"/>
    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
</StackPanel>
```

--------------------------------

### Set Initial Password

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/passwordBox/index.md

Shows how to set an initial password for the PasswordBox either in XAML or through C# code.

```XML
<hc:PasswordBox Password="123456"/>
```

```C#
passwordBox.Password = "123456";
```

--------------------------------

### Basic Image Usage

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/image/index.md

Demonstrates how to display images using the Image control with different sources and rendering options.

```XAML
    <StackPanel Background="LightGray">
        <Image Source="Resources/Images/Image_basestyle.png" Margin="0,10"></Image>
        <Image Source="Resources/Images/Image_basestyle.png" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Uniform"></Image>
    </StackPanel>
```

--------------------------------

### Create DatePicker Instance

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/datePicker/index.md

Demonstrates how to create a new instance of the DatePicker control in XAML and C#.

```XML
<hc:DatePicker />
```

```C#
var datePicker = new DatePicker();
```

--------------------------------

### Set Title and Placeholder

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/passwordBox/index.md

Illustrates how to set a title and placeholder text for the PasswordBox using attached properties.

```XML
<hc:PasswordBox hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}"
               hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr2}"
```

--------------------------------

### Basic ImageViewer Usage

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/imageViewer/index.md

Demonstrates how to use the ImageViewer control in XAML, setting its background, dimensions, and image source.

```xml
<hc:ImageViewer Background="{DynamicResource SecondaryRegionBrush}" Width="600" Height="330" ImageSource="/HandyControlDemo;component/Resources/Img/1.jpg"/>
```

--------------------------------

### GlowWindow Class Definition

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/glowWindow/index.md

The basic class definition for GlowWindow, inheriting from Window. This snippet shows the starting point for the custom window control.

```cs
public class GlowWindow : Window
```

--------------------------------

### StackPanelVerticalListBox Usage Example

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/native_controls/listBox/index.md

Demonstrates how to use the StackPanelVerticalListBox style with a ListBox. It shows binding to an ItemsSource and defining a custom ItemTemplate with a Border, DockPanel, Path, and TextBlock.

```XAML
<ListBox Margin="10" ItemsSource="{Binding Datas}"  
             Style="{DynamicResource StackPanelVerticalListBox}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" BorderBrush="Black" Margin="0,1">
                    <DockPanel LastChildFill="True">
                        <Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
                        <TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
```

--------------------------------

### Basic WaveProgressBar Usage

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/waveProgressBar/index.md

Demonstrates how to use the WaveProgressBar with basic customization. It binds the Value property to a slider.

```xml
<StackPanel Orientation="Horizontal" Margin="0,32,0,0">
    <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}"/>
    <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" FontSize="20" Margin="16,0,0,0" WaveThickness="4" WaveStroke="#FFFF0080">
        <hc:WaveProgressBar.WaveFill>
            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                <GradientStop Color="#66FF0080" Offset="0"/>
                <GradientStop Color="#FFFF0080" Offset="1"/>
            </LinearGradientBrush>
        </hc:WaveProgressBar.WaveFill>
    </hc:WaveProgressBar>
    <hc:WaveProgressBar Value="{Binding Value,ElementName=SliderDemo}" Margin="16,0,0,0" ShowText="False" Width="50" Height="50" Style="{StaticResource ProgressBarWarningWave}"/>
</StackPanel>
```

--------------------------------

### Display Growl Messages

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/growl/index.md

Call static methods on the Growl class to display different types of notifications. For example, use Growl.Success() to show a success message.

```csharp
Growl.Success("文件保存成功！");
```

--------------------------------

### Basic Card Usage in XAML

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/card/index.md

Demonstrates how to use the Card control in XAML, including setting properties like MaxWidth, BorderThickness, Effect, and Margin. The content and footer sections are also shown.

```xml
    <hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8">
        <!--Card 的内容部分-->
        <Border CornerRadius="4,4,0,0" Width="160" Height="160">
            <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="测试"/>
        </Border>
        <!--Card 的尾部部分-->
        <hc:Card.Footer>
            <StackPanel Margin="10" Width="160">
                <!--Card 的一级内容-->
                <TextBlock TextWrapping="NoWrap"  Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis" 
                                           Text="大标题" 
                                           HorizontalAlignment="Left"/>
                <!--Card 的二级内容-->
                <TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis" 
                                           Text="描述信息" Margin="0,6,0,0"
                                           HorizontalAlignment="Left"/>
            </StackPanel>
        </hc:Card.Footer>
    </hc:Card>
```

--------------------------------

### Create DateTimePicker Instance

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/dateTimePicker/index.md

Shows how to create a new instance of the DateTimePicker control in XAML and C#.

```XML
<hc:DateTimePicker />
```

```C#
var dateTimePicker = new DateTimePicker();
```

--------------------------------

### Adding and Jumping in CoverFlow

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/coverFlow/index.md

Demonstrates how to add multiple image resources to the CoverFlow control using URIs and then jump to a specific page index.

```csharp
CoverFlowMain.AddRange(new []
{
    new Uri(@"pack://application:,,,/Resources/Img/Album/1.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/2.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/3.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/4.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/5.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/6.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/7.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/8.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/9.jpg"),
    new Uri(@"pack://application:,,,/Resources/Img/Album/10.jpg")
});
CoverFlowMain.JumpTo(2);
```

--------------------------------

### Growl Control Usage

Source: https://github.com/ghost1372/handycontrols/blob/develop/doc/source/handycontrol/extend_controls/growl/index.md

Demonstrates how to set up a StackPanel as a Growl container and display success messages.

```APIDOC
## Basic Usage

### Description

This section explains how to designate a `StackPanel` as a container for Growl notifications and how to display success messages using the `Growl.Success` method.

### Step 1: Set StackPanel as Growl Container

Add the `controls:Growl.GrowlParent="True"` attached property to your `StackPanel` within a `ScrollViewer`.

```xml
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalAlignment="Right">
    <StackPanel controls:Growl.GrowlParent="True" VerticalAlignment="Top" Margin="0,10,10,10"/>
</ScrollViewer>
```

### Step 2: Display Success Message

Call the `Growl.Success` method with the message content.

```csharp
Growl.Success("文件保存成功！");
```
```