How to customize "operations pane" in a RadSaveFileDialog?

[Steven]

I'm trying to use a RadSaveFileDialog to allow users to export files from my application, but before the export can be performed the user needs to configure a few options. I am wondering if it is possible to customize the "operations pane" area of a RadSaveFileDialog in order to add a few checkboxes/buttons/dropdowns that the user can configure before pressing the Save button?

My initial thought was to create a custom SaveFileDialogControlTemplate to add the controls in, but I'm having some trouble figuring out how to access the controls from code so I can add click handlers or modify labels at runtime. Is this kind of customization possible with RadSaveFileDialog?

[Petar Mladenov]

Hi Steven,

Please check out the Styles and Templates help article which explains in details how you can edit the default control template of the File Dialogs. Note that if you add new controls in the Template, you will need to access them in OnApplyTemplate method override of the dialog. To achieve this you will need to inherit some dialog class like OpenFileDialogControl / SaveFileDialogControl / OpenFolderDialogControl.

Another option is to use the ExplorerControl API , make changes to its template, then use it in RadWindow with additional OK / Cancel buttons and add you own handlers for them. To get started with Explorer control please visit its help article or the ExplorerControl demo in WPF Demos.

Regards,
Petar Mladenov
Progress Telerik

[Steven]

I was initially thinking the same thing, to inherit SaveFileDialogControl and override OnApplyTemplate, but:

1) SaveFileDialogControl is marked as sealed.

2) It's not clear to me how to get RadSaveFileDialog to use a custom SaveFileDialogControl, since the methods that create the SaveFileDialogControl and set dialog's Content are all marked internal.

If it's not possible to do this with the current RadSaveFileDialog then I will look into using ExplorerControl directly, but I was hoping to be able to save some time by customizing the existing dialog instead of having to essentially recreate it.

[Petar Mladenov]

Hi Steven,

Yes, I missed the fact that the SaveFileDialogControl is sealed so please accept my apologies for misleading you. What you can do is to inherit the Dialog control instead:

public class CustomSaveFileDialgoControl : RadSaveFileDialog
    {
        static CustomSaveFileDialgoControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomSaveFileDialgoControl), new FrameworkPropertyMetadata(typeof(CustomSaveFileDialgoControl)));
        }

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            Rectangle rect = this.GetTemplateChild("rectangle") as Rectangle;
        }
    }

To edit its default control template you can follow the Editing Control Templates help article.

  <ControlTemplate TargetType="fileDialogs:SaveFileDialogControl" x:Key="SaveFileDialogControlTemplate">

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>

....

    <Rectangle Width="200" Height="50" Fill="DeepSkyBlue" x:Name="rectangle" Grid.Row="2"/>

        </Grid>

    </ControlTemplate>

If you use no-xaml approach you will need additional style targetting your new type and based on setting to get the base style (BasedOn={StaticResource RadSaveFileDialogStyle}.

In the attached screenshot you can see the result from my modification. I hope this will help you proceed further.

Regards,
Petar Mladenov
Progress Telerik

[Johnathan]

Can you attach the project used to create the modified dialog?

Thanks

[Petar Mladenov]

Hi Johnathan,

I am sending you a no-xaml-binaries based project with included xaml files. Below are the changes made in Telerik.Windows.Controls.FileDialogs.xaml file:

1. Added 4th row in OperationsPane Grid:

            <Grid Grid.Row="1" x:Name="PART_OperationsPane" Margin="{TemplateBinding Padding}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>

2. Added rectangle at the very end of the Controltemplate of the SaveFileDialog

    <Rectangle Width="200" Height="50" Fill="DeepSkyBlue" x:Name="rectangle" Grid.Row="3" Grid.ColumnSpan="3"/>
            </Grid>
        </Grid>
    </ControlTemplate>

Regards,
Petar Mladenov
Progress Telerik

[Johnathan]

Petar,

The custom save dialog from your example is showing the blue rectangle, but the this.GetTemplateChild('rectangle') after the base.OnApplyTemplate() is always returning null.  Do you know what would cause this?

Thanks

[Petar Mladenov]

Hi Johnathan,

Please let me first make a small addition to the last project - it needs the following line to properly set the style for the custom control in no-xaml scenario:

    <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Themes/System.Windows.xaml"/>
                <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.xaml"/>
                <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.Input.xaml"/>
                <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
                <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.GridView.xaml"/>
                <ResourceDictionary Source="/Themes/Telerik.Windows.Controls.FileDialogs.xaml"/>
            </ResourceDictionary.MergedDictionaries>
			<Style TargetType="local:CustomSaveFileDialgoControl" BasedOn="{StaticResource RadSaveFileDialogStyle}" />

The RadOpenFileDialog, RadSaveFileDialog and RadOpenFolderDialog share common base class DialogWindowBase. The default styles for these 3 controls are actually based on a Style targeting DialogWindowBase with very little differences. The mentioned rectangle is added to the control template of a SaveFileDialogControl. SaveFileDialogControl, OpenFileDialogControl and OpenFolderDialogControl are separate controls and they are added as Content of the DialogWindowBase runtime, before open. They are not added in the ControlTemplate of the DialogWindowBase. This is the reason the rectangle located in the inner (SaveFileDialogControl) to be null when requested in OnApplyTemplate of the dialog. Here is away to access it :

    - use OnContentChanged method of the dialog, to get the moment when the save dialog control is added as content of the dialog (window)

    - use the Loaded of the SaveFileDialogControl to ensure the control template is applied and the rectangle can be successfully accessed

using System.Windows;
using System.Linq;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.FileDialogs;

namespace WpfApplication1
{
    public class CustomSaveFileDialgoControl : RadSaveFileDialog
    {
        static CustomSaveFileDialgoControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomSaveFileDialgoControl), new FrameworkPropertyMetadata(typeof(CustomSaveFileDialgoControl)));
        }

        protected override void OnContentChanged(object oldContent, object newContent)
        {
            base.OnContentChanged(oldContent, newContent);

            SaveFileDialogControl saveContentControl = newContent as SaveFileDialogControl;
            if (saveContentControl != null)
            {
                saveContentControl.Loaded += (o, e) =>
                {
                    Rectangle rect = saveContentControl.ChildrenOfType<Rectangle>().Where(x => x.Name == "rectangle").FirstOrDefault();
                };
            }
        }
    }
}

Regards,
Petar Mladenov
Progress Telerik