Skip to content

Commit d20bf86

Browse files
vasavi-SF4854vasavi-SF4854
committed
976335 - Added back icon customization
1 parent b5951bb commit d20bf86

File tree

2 files changed

+176
-1
lines changed

2 files changed

+176
-1
lines changed

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

3.8 KB
Loading

‎MAUI/Toolbar/overlay-toolbar.md‎

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

0 commit comments

Comments
 (0)