Skip to content

Changes in Text.md file #2344

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 Text.md file #2344

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
57 changes: 40 additions & 17 deletions wpf/Image-Editor/Text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Text of Syncfusion SfImageEditor WPF.
description: This section explains how the image can be annotated by adding the required text on it and also it can be customized.
title: Text in Syncfusion SfImageEditor WPF
description: This section explains how an image can be annotated by adding the required text on it and how the text can be customized.
platform: wpf
control: SfImageEditor
documentation: ug
Expand Down Expand Up @@ -31,9 +31,9 @@ The following properties of the added text can be customized:
* Alignment (center, left, and right)
* Text effects (bold, italic, and underline)

Upon selecting the Text icon in the toolbar, a sub toolbar will be generated below the main toolbar for providing the text customizing options.
Upon selecting the Text icon in the toolbar, a sub-toolbar will be generated below the main toolbar for providing the text customizing options.

>N Text needs to be selected to apply the customization from the sub toolbar.
> N The text needs to be selected to apply the customization from the sub-toolbar.

### Background

Expand Down Expand Up @@ -67,15 +67,26 @@ You can add text to an image using the AddText method programmatically. This met
* TextSettings - Allows customization of the text's appearance, including options for background, font family, font size, and font color. You can adjust the alignment (center, left, right) and improve the text with effects such as bold, italic, and underline.

{% tabs %}
{% highlight XAML %}
{% highlight XAML %}

<editor:SfImageEditor x:Name="editor"
Loaded="OnImageEditorLoaded">
</editor:SfImageEditor>
<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"
Loaded="OnImageEditorLoaded">
</editor:SfImageEditor>
</Grid>
</Window>

{% endhighlight %}
{% highlight C# hl_lines="5" %}

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

this.editor.Loaded += this.OnImageEditorLoaded;

private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
Expand All @@ -84,13 +95,13 @@ private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
}

{% endhighlight %}
{% endtabs %}
{% endtabs %}

## Text settings

Using the following properties in TextSettings, text can be customized.

* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_Background) - Specifies the background color of the text annotation. The default value is `Brush.Transparent.`
* [`Background`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_Background) - Specifies the background color of the text annotation. The default value is `Brush.Transparent`.
* [`FontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_FontFamily) - Changes the font family of the text.
* [`FontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_FontSize) - Changes the font size of the text.
* [`Color`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.ImageEditor.TextSettings.html#Syncfusion_UI_Xaml_ImageEditor_TextSettings_Color) - Modifies the font color of the text.
Expand All @@ -105,13 +116,25 @@ Using the following properties in TextSettings, text can be customized.
{% tabs %}
{% highlight XAML %}

<editor:SfImageEditor x:Name="editor"
Loaded="OnImageEditorLoaded">
</editor:SfImageEditor>
<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"
Loaded="OnImageEditorLoaded">
</editor:SfImageEditor>
</Grid>
</Window>

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

{% highlight C# %}

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

this.editor.Loaded += this.OnImageEditorLoaded;

private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
Expand All @@ -130,14 +153,14 @@ private void OnImageEditorLoaded(object sender, RoutedEventArgs e)
textSettings.FontFamily = new FontFamily("Bell MT");
textSettings.FontSize = 22;
textSettings.Color = new SolidColorBrush(Colors.Teal);
textSettings.TextEffects = TextEffects.Italic;
textSettings.TextEffects = TextEffects.Italic;
textSettings.Bounds = new Rect(50, 23, 30, 15);
textSettings.TextAlignment = TextAlignment.Center;
this.editor.AddText("The happiness of your \nlife depend upon the \nquality of your thoughts.", textSettings);
}

{% endhighlight %}
{% endtabs %}
{% endtabs %}

![Text-settings-in-WPF-Image-editor](Images/text-settings-in-wpf-image-editor.jpg)

Expand Down