> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/special-purpose-controls/siticone-copyurl/copy-button-customization.md).

# Copy Button Customization

This feature enables developers to tailor the appearance and behavior of the copy button, which is used to copy the URL to the clipboard.

## Overview

The Copy Button Customization feature provides options to adjust the visual style of the copy button through properties like fill mode, fill color, stroke color, and size. These customizations ensure that the copy button aligns with the application's design language and enhances the user experience.

***

### Key Points

<table><thead><tr><th width="171">Item</th><th>Description</th><th>Example / Notes</th></tr></thead><tbody><tr><td>IconFillMode</td><td>Determines whether the copy icon is rendered with an outline or as a filled icon.</td><td>Set to Outline or Filled; e.g., <code>copyUrlControl.IconFillMode = IconFillModeEx.Filled;</code></td></tr><tr><td>IconFillColor</td><td>Specifies the fill color of the copy icon when using the filled mode.</td><td>Example: <code>Color.White</code> or any valid Color</td></tr><tr><td>IconStrokeColor</td><td>Sets the stroke (outline) color of the copy icon, used in both filled and outline modes.</td><td>Example: <code>Color.Black</code></td></tr><tr><td>CopyButtonSize</td><td>Defines the dimensions (in pixels) of the copy button, ensuring a minimum size of 20 pixels.</td><td>Example: <code>copyUrlControl.CopyButtonSize = 24;</code></td></tr></tbody></table>

***

### Code Samples

#### Customizing the Copy Button Appearance

Below is an example demonstrating how to set up and customize the copy button properties:

```csharp
// Create an instance of the control
SiticoneCopyUrl copyUrlControl = new SiticoneCopyUrl
{
    // Set the URL to ensure the control is fully functional
    Url = "https://www.example.com",
    
    // Customize the copy button appearance
    IconFillMode = SiticoneCopyUrl.IconFillModeEx.Filled,
    IconFillColor = Color.LightGray,
    IconStrokeColor = Color.DarkGray,
    CopyButtonSize = 24
};

// Add the control to the form
this.Controls.Add(copyUrlControl);
```

#### Switching Between Outline and Filled Modes at Runtime

This example shows how to dynamically switch the icon style:

```csharp
// Assuming copyUrlControl is already added to the form
private void ToggleCopyIconStyle()
{
    if (copyUrlControl.IconFillMode == SiticoneCopyUrl.IconFillModeEx.Outline)
    {
        copyUrlControl.IconFillMode = SiticoneCopyUrl.IconFillModeEx.Filled;
        copyUrlControl.IconFillColor = Color.LightBlue;
    }
    else
    {
        copyUrlControl.IconFillMode = SiticoneCopyUrl.IconFillModeEx.Outline;
    }
}
```

#### Complete Integration Example

Integrate the control into a Windows Form application with custom copy button settings:

```csharp
public partial class MainForm : Form
{
    public MainForm()
    {
        InitializeComponent();
        InitializeCopyUrlControl();
    }

    private void InitializeCopyUrlControl()
    {
        SiticoneCopyUrl copyUrlControl = new SiticoneCopyUrl
        {
            Location = new Point(20, 20),
            Size = new Size(300, 40),
            Url = "https://www.example.com",
            // Customizing the copy button
            IconFillMode = SiticoneCopyUrl.IconFillModeEx.Filled,
            IconFillColor = Color.LightCoral,
            IconStrokeColor = Color.Maroon,
            CopyButtonSize = 24
        };

        // Optionally, subscribe to copy related events
        copyUrlControl.UrlCopied += (sender, args) =>
        {
            MessageBox.Show("Copied URL: " + args.Url);
        };

        this.Controls.Add(copyUrlControl);
    }
}
```

***

### Best Practices

| Practice                    | Description                                                                                                | Example / Notes                                                |
| --------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| Maintain Visual Consistency | Ensure the copy button's style matches the overall application theme by using complementary colors.        | Use IconFillColor and IconStrokeColor that align with your UI. |
| Adhere to Minimum Sizing    | Always enforce the minimum button size to maintain usability and touch-friendly interactions.              | CopyButtonSize should be no less than 20 pixels.               |
| Provide Visual Feedback     | Use filled mode with contrasting colors to clearly indicate when the button has been activated or hovered. | Switch between outline and filled modes based on interaction.  |

***

### Common Pitfalls

| Pitfall                    | Description                                                                                                                          | How to Avoid                                                              |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
| Inconsistent Button Sizing | Setting an excessively small copy button may make it hard to interact with, while an overly large button can disrupt layout balance. | Always test on different screen sizes and adhere to minimum values.       |
| Color Clashes              | Using colors that do not contrast well can lead to a copy button that is either too subtle or jarring.                               | Choose colors that both complement the UI and provide adequate contrast.  |
| Overriding Visual Modes    | Dynamically changing the IconFillMode without proper synchronization with the rest of the UI may lead to unexpected behavior.        | Ensure any mode changes are well tested and align with user expectations. |

***

### Usage Scenarios

| Scenario                   | Description                                                                                                                                    | Example / Notes                                                               |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| Custom Themed Applications | Use custom colors for the copy button to match a specific brand or theme, ensuring the control fits seamlessly into the overall design.        | Example: Set IconFillColor and IconStrokeColor to match a company’s branding. |
| Interactive User Feedback  | Change the button’s appearance dynamically to provide feedback when the user interacts with it, such as switching from outline to filled mode. | Implement hover or click events to trigger mode changes.                      |
| Responsive UI Designs      | Adjust the copy button size according to different screen resolutions or device types to ensure touch friendliness.                            | Dynamically set CopyButtonSize based on form size or DPI settings.            |

***

### Real Life Usage Scenarios

<table><thead><tr><th width="235">Scenario</th><th>Description</th><th>Example / Notes</th></tr></thead><tbody><tr><td>Enterprise Applications</td><td>Customize the copy button with subtle colors that fit within a corporate palette while ensuring it remains interactive and accessible.</td><td>Use muted colors and a consistent size for professional interfaces.</td></tr><tr><td>Consumer-Facing Portals</td><td>Employ bold, contrasting colors to make the copy button stand out for users who need to quickly copy URLs for sharing on social media.</td><td>Use a filled icon style with a bright IconFillColor.</td></tr><tr><td>Mobile and Touch Applications</td><td>Increase the CopyButtonSize to ensure ease of interaction on touch screens without compromising the overall layout.</td><td>Adjust CopyButtonSize dynamically based on device DPI.</td></tr></tbody></table>

***

### Troubleshooting Tips

<table><thead><tr><th width="201">Tip</th><th>Description</th><th>Example / Notes</th></tr></thead><tbody><tr><td>Verify Property Assignments</td><td>If the copy button does not appear as expected, double-check the property values for IconFillMode, IconFillColor, IconStrokeColor, and CopyButtonSize.</td><td>Use debugging tools or log outputs to confirm property states.</td></tr><tr><td>Test Across Multiple Devices</td><td>Ensure the copy button looks and functions correctly on various screen resolutions and DPI settings.</td><td>Run tests on both high-DPI monitors and standard displays.</td></tr><tr><td>Use Clear Contrast</td><td>If the copy icon is not legible, adjust the colors to ensure there is sufficient contrast between the icon and the background.</td><td>Experiment with different IconFillColor and IconStrokeColor combinations.</td></tr></tbody></table>

***

### Review

<table><thead><tr><th width="230">Aspect</th><th>Feedback</th><th>Example / Notes</th></tr></thead><tbody><tr><td>Customization Flexibility</td><td>The copy button can be easily customized to meet different design requirements with minimal code changes.</td><td>Changing from outline to filled is as simple as modifying a property.</td></tr><tr><td>Visual Feedback</td><td>A well-designed copy button provides clear visual cues on user interaction, improving the overall experience.</td><td>Use contrasting colors to indicate active states.</td></tr><tr><td>Integration Simplicity</td><td>Integration with the control is straightforward, with clear property settings and event subscriptions.</td><td>Code samples illustrate easy customization and event handling.</td></tr></tbody></table>

***

### Summary

| Summary Aspect            | Details                                                                                                                                   | Example / Notes                                                                  |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| Visual Customization      | Developers can adjust the copy button’s style (outline or filled), colors, and size to suit their application’s theme.                    | Use IconFillMode, IconFillColor, IconStrokeColor, and CopyButtonSize properties. |
| Enhanced User Interaction | The copy button provides immediate feedback and is fully integrated with events that notify the application when URLs are copied.         | Integration of UrlCopied and CopyButtonClicked events adds value.                |
| Ease of Integration       | With minimal code and clear property assignments, the copy button customization integrates seamlessly into any .NET WinForms application. | Integration examples demonstrate quick setup and customization.                  |

***

### Additional Sections

#### Integration Checklist

<table><thead><tr><th width="220">Checklist Item</th><th>Description</th><th>Example / Notes</th></tr></thead><tbody><tr><td>Set IconFillMode</td><td>Choose either Filled or Outline based on the desired visual effect.</td><td><code>copyUrlControl.IconFillMode = SiticoneCopyUrl.IconFillModeEx.Filled;</code></td></tr><tr><td>Configure IconFillColor</td><td>Set a fill color that matches the application’s overall theme.</td><td><code>copyUrlControl.IconFillColor = Color.LightGray;</code></td></tr><tr><td>Define IconStrokeColor</td><td>Set a stroke color to ensure the icon is well defined in both modes.</td><td><code>copyUrlControl.IconStrokeColor = Color.DarkGray;</code></td></tr><tr><td>Adjust CopyButtonSize</td><td>Ensure the copy button is sized appropriately for all target devices.</td><td><code>copyUrlControl.CopyButtonSize = 24;</code></td></tr></tbody></table>

#### Additional Considerations

<table><thead><tr><th width="233">Consideration</th><th>Description</th><th>Example / Notes</th></tr></thead><tbody><tr><td>Dynamic UI Adjustments</td><td>Consider dynamically updating the copy button properties in response to user interactions or theme changes.</td><td>Update properties in event handlers for theme changes or responsive design.</td></tr><tr><td>Testing for Consistency</td><td>Test the copy button across different resolutions and DPI settings to ensure a consistent appearance.</td><td>Validate on both high-DPI and standard displays.</td></tr></tbody></table>

***

### Final Notes

The Copy Button Customization feature provides robust options for developers to ensure that the copy functionality is not only visually appealing but also consistent with the overall user interface design. By leveraging the provided properties and following best practices, developers can integrate a highly customizable and responsive copy button into their .NET WinForms applications, enhancing user experience and interaction.

Use the code examples and guidelines provided to quickly integrate and fine-tune the copy button according to your specific application requirements.
Item	Description	Example / Notes
IconFillMode	Determines whether the copy icon is rendered with an outline or as a filled icon.	Set to Outline or Filled; e.g., `copyUrlControl.IconFillMode = IconFillModeEx.Filled;`
IconFillColor	Specifies the fill color of the copy icon when using the filled mode.	Example: `Color.White` or any valid Color
IconStrokeColor	Sets the stroke (outline) color of the copy icon, used in both filled and outline modes.	Example: `Color.Black`
CopyButtonSize	Defines the dimensions (in pixels) of the copy button, ensuring a minimum size of 20 pixels.	Example: `copyUrlControl.CopyButtonSize = 24;`
Scenario	Description	Example / Notes
Enterprise Applications	Customize the copy button with subtle colors that fit within a corporate palette while ensuring it remains interactive and accessible.	Use muted colors and a consistent size for professional interfaces.
Consumer-Facing Portals	Employ bold, contrasting colors to make the copy button stand out for users who need to quickly copy URLs for sharing on social media.	Use a filled icon style with a bright IconFillColor.
Mobile and Touch Applications	Increase the CopyButtonSize to ensure ease of interaction on touch screens without compromising the overall layout.	Adjust CopyButtonSize dynamically based on device DPI.
Tip	Description	Example / Notes
Verify Property Assignments	If the copy button does not appear as expected, double-check the property values for IconFillMode, IconFillColor, IconStrokeColor, and CopyButtonSize.	Use debugging tools or log outputs to confirm property states.
Test Across Multiple Devices	Ensure the copy button looks and functions correctly on various screen resolutions and DPI settings.	Run tests on both high-DPI monitors and standard displays.
Use Clear Contrast	If the copy icon is not legible, adjust the colors to ensure there is sufficient contrast between the icon and the background.	Experiment with different IconFillColor and IconStrokeColor combinations.
Aspect	Feedback	Example / Notes
Customization Flexibility	The copy button can be easily customized to meet different design requirements with minimal code changes.	Changing from outline to filled is as simple as modifying a property.
Visual Feedback	A well-designed copy button provides clear visual cues on user interaction, improving the overall experience.	Use contrasting colors to indicate active states.
Integration Simplicity	Integration with the control is straightforward, with clear property settings and event subscriptions.	Code samples illustrate easy customization and event handling.
Checklist Item	Description	Example / Notes
Set IconFillMode	Choose either Filled or Outline based on the desired visual effect.	`copyUrlControl.IconFillMode = SiticoneCopyUrl.IconFillModeEx.Filled;`
Configure IconFillColor	Set a fill color that matches the application’s overall theme.	`copyUrlControl.IconFillColor = Color.LightGray;`
Define IconStrokeColor	Set a stroke color to ensure the icon is well defined in both modes.	`copyUrlControl.IconStrokeColor = Color.DarkGray;`
Adjust CopyButtonSize	Ensure the copy button is sized appropriately for all target devices.	`copyUrlControl.CopyButtonSize = 24;`
Consideration	Description	Example / Notes
Dynamic UI Adjustments	Consider dynamically updating the copy button properties in response to user interactions or theme changes.	Update properties in event handlers for theme changes or responsive design.
Testing for Consistency	Test the copy button across different resolutions and DPI settings to ensure a consistent appearance.	Validate on both high-DPI and standard displays.