Skip to content

Changes in Toolbar-Customization.md file #2345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SanjaySF4372 wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Changes in Toolbar-Customization.md file #2345

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 98 additions & 50 deletions wpf/Image-Editor/Toolbar-Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Toolbar customization in syncfusion SfImageEditor WPF.
description: This section describes how to customize the toolbar and toolbar item selected event in SfImageEditor control for WPF platform.
title: Toolbar Customization in Syncfusion SfImageEditor WPF
description: This section describes how to customize the toolbar and handle the toolbar item selected event in the SfImageEditor control for the WPF platform.
platform: wpf
control: SfImageEditor
documentation: ug
Expand All @@ -17,95 +17,137 @@ Toolbar can be made visible or hidden using the `IsToolbarVisiblity` property in

{% tabs %}

{% highlight xaml %}
{% highlight xaml %}

<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisiblity="True" />
</editor:SfImageEditor.ToolbarSettings>
<Window x:Class="SfImageEditorSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
Title="SfImageEditor Sample" Height="600" Width="800">
<Grid>
<editor:SfImageEditor x:Name="editor">
<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisiblity="True" />
</editor:SfImageEditor.ToolbarSettings>
</editor:SfImageEditor>
</Grid>
</Window>

{% endhighlight %}

{% highlight C# %}
{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;

editor.ToolbarSettings.IsToolbarVisibility = true;
editor.ToolbarSettings.IsToolbarVisiblity = true;

{% endhighlight %}

{% endtabs %}
{% endtabs %}

### Add a item
### Add an item

You can add additional items to the toolbar and can perform your own operation. To add an additional item, specify the toolbar item, and add it in the ToolbarItems collection as demonstrated in following code snippet. You can specify your own template using the `IconTemplate` property in `ToolbarItem`.
You can add additional items to the toolbar and perform your own operation. To add an additional item, specify the toolbar item, and add it to the `ToolbarItems` collection as demonstrated in the following code snippet. You can specify your own template using the `IconTemplate` property in `ToolbarItem`.

{% tabs %}

{% highlight xaml %}

<Grid.Resources>
<DataTemplate x:Key="template">
<TextBlock Text="New Item"></TextBlock>
</DataTemplate>
</Grid.Resources>
{% highlight xaml %}

<Window x:Class="SfImageEditorSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
Title="SfImageEditor Sample" Height="600" Width="800">
<Window.Resources>
<DataTemplate x:Key="template">
<TextBlock Text="New Item" />
</DataTemplate>
</Window.Resources>
<Grid x:Name="grid">
<editor:SfImageEditor x:Name="editor">
<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings x:Name="toolbarSettings" />
</editor:SfImageEditor.ToolbarSettings>
</editor:SfImageEditor>
</Grid>
</Window>

{% endhighlight %}

{% highlight C# %}
{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;
using System.Windows;

editor.ToolbarSettings.ToolbarItems.Add(new ToolbarItem() { IconTemplate = grid.Resources["template"] as DataTemplate });

{% endhighlight %}

{% endtabs %}
{% endtabs %}

### Customization

You can change the [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_Background) and [`BorderColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_BorderColor) of the toolbar. Also, you can change the height of the main toolbar using the [`HeaderToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_HeaderToolbarHeight) property, and the height of the sub toolbar can be changed using the [`SubItemToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_SubItemToolbarHeight) property, and the footer toolbar height can be changed using the [`FooterToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_FooterToolbarHeight).
You can change the [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_Background) and [`BorderColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_BorderColor) of the toolbar. Also, you can change the height of the main toolbar using the [`HeaderToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_HeaderToolbarHeight) property, the height of the sub-toolbar can be changed using the [`SubItemToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_SubItemToolbarHeight) property, and the footer toolbar height can be changed using the [`FooterToolbarHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.ToolbarSettings.html#Syncfusion_UI_Xaml_ImageEditor_ToolbarSettings_FooterToolbarHeight) property.

This can be done as in the following code snippet.

{% tabs %}

{% highlight xaml %}
{% highlight xaml %}

<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisibility="True" HeaderToolbarHeight="36"
FooterToolbarHeight="36" Background="#DEDEDE" BorderColor="Black"
/>
</editor:SfImageEditor.ToolbarSettings>
<Window x:Class="SfImageEditorSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
Title="SfImageEditor Sample" Height="600" Width="800">
<Grid>
<editor:SfImageEditor x:Name="editor">
<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisiblity="True" HeaderToolbarHeight="36"
FooterToolbarHeight="36" Background="#DEDEDE" BorderColor="Black" />
</editor:SfImageEditor.ToolbarSettings>
</editor:SfImageEditor>
</Grid>
</Window>

{% endhighlight %}

{% highlight C# %}
{% highlight C# %}

using Syncfusion.UI.Xaml.ImageEditor;
using System.Windows.Media;

editor.ToolbarSettings.Background= (SolidColorBrush)new BrushConverter().ConvertFromString("#DEDEDE");
editor.ToolbarSettings.BorderColor = new SolidColorBrush(Colors.Black);
editor.ToolbarSettings.HeaderToolbarHeight = 36;
editor.ToolbarSettings.FooterToolbarHeight = 36;
editor.ToolbarSettings.IsToolbarVisibility = true;
editor.ToolbarSettings.Background = (SolidColorBrush)new BrushConverter().ConvertFromString("#DEDEDE");
editor.ToolbarSettings.BorderColor = new SolidColorBrush(Colors.Black);
editor.ToolbarSettings.HeaderToolbarHeight = 36;
editor.ToolbarSettings.FooterToolbarHeight = 36;
editor.ToolbarSettings.IsToolbarVisiblity = true;
{% endhighlight %}

{% endtabs %}
{% endtabs %}

![Custom Item](Images/ToolbarCustomization.png)

## Events

### ToolbarItemSelected

This event occurs when an item in the toolbar is selected. `ToolbarItemSelectedEventArgs` is the parameter. You can control the selected item operation by setting the Cancel property to true. You can also get the information about the ToolbarItem.
This event occurs when an item in the toolbar is selected. `ToolbarItemSelectedEventArgs` is the parameter. You can control the selected item operation by setting the `Cancel` property to `true`. You can also get the information about the `ToolbarItem`.

{% tabs %}

{% highlight C# %}
{% highlight C# %}

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
{
e.Cancel = true;
}
using Syncfusion.UI.Xaml.ImageEditor;

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
{
e.Cancel = true;
}

{% endhighlight %}

{% endtabs %}
{% endtabs %}

![Custom Item](Images/ToolbarCustomItem.png)

Expand All @@ -117,7 +159,7 @@ You can browse images in a local folder and load them in the Image Editor using

## Commands

Invoke commands from the custom toolbar to customize toolbar items of the image editor. Must set the `CommandTarget` while using the Command.
Invoke commands from the custom toolbar to perform toolbar item operations of the image editor. The `CommandTarget` must be set when using the `Command`.

<table>
<tr>
Expand Down Expand Up @@ -170,23 +212,29 @@ This can be done as in the below code snippet.

{% tabs %}

{% highlight xaml %}
{% highlight xaml %}

<Window x:Class="SfImageEditorSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:editor="clr-namespace:Syncfusion.UI.Xaml.ImageEditor;assembly=Syncfusion.SfImageEditor.WPF"
Title="SfImageEditor Sample" Height="600" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<editor:SfImageEditor Grid.Column="0" x:Name="imageEditor" ImageSource="Assets\RoadView.jpeg">
<editor:SfImageEditor.ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisiblity="False"></editor:ToolbarSettings>
<editor:ToolbarSettings IsToolbarVisiblity="False" />
</editor:SfImageEditor.ToolbarSettings>
</editor:SfImageEditor>
<Button Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White"
Width="Auto" CommandTarget="{Binding ElementName=imageEditor}"
Content="Save" Command="{x:Static editor:ImageEditorCommands.Save}"></Button>

<Button Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White"
Width="Auto" CommandTarget="{Binding ElementName=imageEditor}"
Content="Save" Command="{x:Static editor:ImageEditorCommands.Save}" />
</Grid>
</Window>
{% endhighlight %}

{% endtabs %}
Expand Down