Skip to content

Commit c381529

Browse files
MuniappanSubramanianMuniappanSubramanian
authored
Merge pull request #3539 from syncfusion-content/976335-Back-icon-customization-in-SfToolbar
976335 - Added back icon customization in toolbar control
2 parents 3609bbb + 19d5f52 commit c381529

File tree

2 files changed

+180
-1
lines changed

2 files changed

+180
-1
lines changed

‎MAUI/Toolbar/images/backicon-customization.png‎

3.8 KB
Loading

‎MAUI/Toolbar/overlay-toolbar.md‎

Lines changed: 180 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,4 +140,183 @@ namespace ToolbarSample
140140

141141
{% endtabs %}
142142

143-
![overlay-toolbar](images/overlay-toolbar.gif)
143+
![overlay-toolbar](images/overlay-toolbar.gif)
144+
145+
## Back icon customization
146+
The toolbar control support customization of back icon using properties BackIconAlignment[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfOverlayToolbar.html#Syncfusion_Maui_Toolbar_SfOverlayToolbar_BackIconAlignment], BackIconColor[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfOverlayToolbar.html#Syncfusion_Maui_Toolbar_SfOverlayToolbar_BackIconColor], BackIconToolTipText[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfOverlayToolbar.html#Syncfusion_Maui_Toolbar_SfOverlayToolbar_BackIconToolTipText], BackIconTemplate[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.SfOverlayToolbar.html#Syncfusion_Maui_Toolbar_SfOverlayToolbar_BackIconTemplate].
147+
148+
* **BackIconColor** – This property is used to define the color of the back icon displayed in the overlay toolbar.
149+
* **BackIconAlignment** – This property defines the position of the back icon within the overlay toolbar. It supports two position options: Start[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.OverlayToolbarBackIconPosition.html#Syncfusion_Maui_Toolbar_OverlayToolbarBackIconPosition_Start], which places the icon at the leading edge, and End[https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Toolbar.OverlayToolbarBackIconPosition.html#Syncfusion_Maui_Toolbar_OverlayToolbarBackIconPosition_End], which positions it at the trailing edge. By default, the back icon appears at the leading position.
150+
151+
N> For a `Horizontal` orientation, the `Start` position corresponds to the `left` side and the `End` position to the `right`. In a `Vertical` orientation, the `Start` position aligns with the `top`, while the `End` position aligns with the `bottom`.
152+
153+
* **BackIconTemplate** – This property allows customization of the back icon's appearance by enabling the use of various view elements such as buttons, checkboxes, entries, and more.
154+
* **BackIconToolTipText** – This property is used to define the tooltip text displayed when hovering over the back icon.
155+
156+
N> TooltipText is only applicable to the default back icon. When using BackIconTemplate, tooltip behavior must be handled manually.
157+
158+
{% tabs %}
159+
160+
{% highlight xaml %}
161+
162+
<Grid x:Name="layout">
163+
<toolbar:SfToolbar x:Name="Toolbar"
164+
HeightRequest="56"
165+
WidthRequest="300"
166+
Tapped="Toolbar_Tapped">
167+
<toolbar:SfToolbar.Items>
168+
<toolbar:SfToolbarItem Name="Bold"
169+
ToolTipText="Bold">
170+
<toolbar:SfToolbarItem.Icon>
171+
<FontImageSource Glyph="&#xE770;"
172+
FontFamily="MauiMaterialAssets" />
173+
</toolbar:SfToolbarItem.Icon>
174+
</toolbar:SfToolbarItem>
175+
<toolbar:SfToolbarItem Name="Underline"
176+
ToolTipText="Underline">
177+
<toolbar:SfToolbarItem.Icon>
178+
<FontImageSource Glyph="&#xE762;"
179+
FontFamily="MauiMaterialAssets" />
180+
</toolbar:SfToolbarItem.Icon>
181+
</toolbar:SfToolbarItem>
182+
<toolbar:SfToolbarItem Name="Italic"
183+
ToolTipText="Italic">
184+
<toolbar:SfToolbarItem.Icon>
185+
<FontImageSource Glyph="&#xE771;"
186+
FontFamily="MauiMaterialAssets" />
187+
</toolbar:SfToolbarItem.Icon>
188+
</toolbar:SfToolbarItem>
189+
<toolbar:SfToolbarItem Name="Alignment"
190+
Text="Alignment"
191+
ToolTipText="Tap to view the overlay toolbar"
192+
Size="70,40">
193+
<toolbar:SfToolbarItem.OverlayToolbar>
194+
<toolbar:SfOverlayToolbar x:Name="overlaytoolbar"
195+
Orientation="Horizontal"
196+
HeightRequest="56"
197+
WidthRequest="300"
198+
OverflowMode="Scroll"
199+
BackIconAlignment="End"
200+
BackIconToolTipText="Back"
201+
BackIconColor="Red">
202+
<toolbar:SfOverlayToolbar.BackIconTemplate>
203+
<DataTemplate>
204+
<ViewCell>
205+
<Grid WidthRequest="47" HeightRequest="33" HorizontalOptions="Start">
206+
<ImageButton Source="close.png" Clicked="ImageButton_Clicked" />
207+
</Grid>
208+
</ViewCell>
209+
</DataTemplate>
210+
</toolbar:SfOverlayToolbar.BackIconTemplate>
211+
<toolbar:SfOverlayToolbar.Items>
212+
<toolbar:SfToolbarItem Name="AlignLeft"
213+
ToolTipText="Align-Left">
214+
<toolbar:SfToolbarItem.Icon>
215+
<FontImageSource Glyph="&#xE751;"
216+
FontFamily="MauiMaterialAssets" />
217+
</toolbar:SfToolbarItem.Icon>
218+
</toolbar:SfToolbarItem>
219+
<toolbar:SfToolbarItem Name="AlignRight"
220+
ToolTipText="Align-Right">
221+
<toolbar:SfToolbarItem.Icon>
222+
<FontImageSource Glyph="&#xE753;"
223+
FontFamily="MauiMaterialAssets" />
224+
</toolbar:SfToolbarItem.Icon>
225+
</toolbar:SfToolbarItem>
226+
<toolbar:SfToolbarItem Name="AlignCenter"
227+
ToolTipText="Align-Center">
228+
<toolbar:SfToolbarItem.Icon>
229+
<FontImageSource Glyph="&#xE752;"
230+
FontFamily="MauiMaterialAssets" />
231+
</toolbar:SfToolbarItem.Icon>
232+
</toolbar:SfToolbarItem>
233+
<toolbar:SfToolbarItem Name="AlignJustify"
234+
ToolTipText="Align-Justify">
235+
<toolbar:SfToolbarItem.Icon>
236+
<FontImageSource Glyph="&#xE74F;"
237+
FontFamily="MauiMaterialAssets" />
238+
</toolbar:SfToolbarItem.Icon>
239+
</toolbar:SfToolbarItem>
240+
241+
<toolbar:SeparatorToolbarItem/>
242+
243+
</toolbar:SfOverlayToolbar.Items>
244+
</toolbar:SfOverlayToolbar>
245+
</toolbar:SfToolbarItem.OverlayToolbar>
246+
</toolbar:SfToolbarItem>
247+
</toolbar:SfToolbar.Items>
248+
</toolbar:SfToolbar>
249+
</Grid>
250+
251+
{% endhighlight %}
252+
253+
{% highlight c# %}
254+
255+
namespace ToolbarSample
256+
{
257+
public partial class MainPage : ContentPage
258+
{
259+
public MainPage()
260+
{
261+
InitializeComponent();
262+
var backIconTemplate = new DataTemplate(() =>
263+
{
264+
var grid = new Grid
265+
{
266+
WidthRequest = 47,
267+
HeightRequest = 33,
268+
HorizontalOptions = LayoutOptions.Start
269+
};
270+
var image = new ImageButton
271+
{
272+
Source = "close.png",
273+
Clicked = "ImageButton_Clicked",
274+
};
275+
276+
grid.Children.Add(image);
277+
278+
var viewCell = new ViewCell
279+
{
280+
View = grid
281+
};
282+
283+
return viewCell;
284+
});
285+
286+
overlaytoolbar.BackIconTemplate = backIconTemplate;
287+
overlaytoolbar.BackIconColor = Colors.Blue;
288+
overlaytoolbar.BackIconToolTipText = "Back";
289+
overlaytoolbar.BackIconAlignment = OverlayToolbarBackIconPosition.End;
290+
}
291+
292+
private async void Toolbar_Tapped(object sender, Syncfusion.Maui.Toolbar.ToolbarTappedEventArgs e)
293+
{
294+
if (e.NewToolbarItem != null)
295+
{
296+
if (e.NewToolbarItem.Name == "Alignment")
297+
{
298+
var item = e.NewToolbarItem?.OverlayToolbar;
299+
300+
if (!this.layout.Children.Contains(item))
301+
{
302+
this.layout.Children.Add(item);
303+
}
304+
305+
await Task.Delay(1000);
306+
(sender as SfToolbar)?.ClearSelection();
307+
}
308+
}
309+
}
310+
311+
private void ImageButton_Clicked(object sender, EventArgs e)
312+
{
313+
this.overlaytoolbar.IsVisible = false;
314+
}
315+
}
316+
}
317+
318+
{% endhighlight %}
319+
320+
{% endtabs %}
321+
322+
![backicon-customization](images/backicon-customization.png)

0 commit comments

Comments
 (0)