Manage Custom Resource Dictionaries

---

XamlFiddle offers a powerful feature that allows users to integrate custom styles and resources. To access this feature, navigate to the menu Manage > All Custom Resource Dictionaries:

This will open a dialog like the one below:

Create a New Style in the Default Resource Dictionary

By default, XamlFiddle provides a built-in Resource Dictionary that can be used for defining custom styles.

1. Expand the CustomResourceDictionaries folder by clicking on it:

1. Choose the Untitled_Resource_Dictionaries.xaml file by clicking on it:

1. Add the following code to the Untitled_Resource_Dictionaries.xaml to define a custom Button style:

<Style x:Key="CustomButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="#007ACC"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Padding" Value="10,5"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="BorderBrush" Value="#005A9E"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="5">
                    <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#005A9E"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#003F73"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1. Press Ctrl + S to save.

Integrate Style into XamlFiddle

1. Close the Custom Resource Dictionaries Manager dialog. You will now see the main XamlFiddle program interface:

1. Replace the Image element with the following code:

<Button Style="{StaticResource CustomButtonStyle}" Content="Test"></Button>

1. Press Ctrl + S to save the current XAML Item.

Create a New Resource Dictionary

1. Open the Custom Resource Dictionaries Manager:

1. Right-click on the CustomResourceDictionaries folder and select Create New Resource Dictionary:

1. Expand the CustomResourceDictionaries folder:

1. Select Untitled_Resource_Dictionary(1).xaml:

Delete an Existing Resource Dictionary

1. Right-click on Untitled_Resource_Dictionary(1).xaml and select Delete:

1. A deletion confirmation dialog will appear:

1. Click on Yes to confirm:

1. You will now see the updated resource dictionary list:

Rename an Existing Resource Dictionary

1. Open the Custom Resource Dictionaries Manager:

1. Right-click on the resource dictionary you wish to rename and select Rename:

1. A dialog will appear where you can enter a new name:

1. Change the name from Untitled_Resource_Dictionary to Test:

1. Press the Save button to apply the changes:

1. You will now see the renamed resource dictionary:

Upload a Resource Dictionary into XamlFiddle

1. Open the Custom Resource Dictionaries Manager:

1. Right-click on the CustomResourceDictionaries folder and select Upload:

1. A file upload dialog will appear:

1. Choose the file Test2.xaml:

1. The uploaded resource dictionary will appear:

Open the Containing Folder

1. Open the Custom Resource Dictionaries Manager:

1. Right-click on the CustomResourceDictionaries folder and select Open Containing Folder:

1. You will now see the folder containing the resource dictionaries: