Skip to content

Commit 9827bd9

Browse files
MohamedHasan3644MohamedHasan3644
committed
996035-Added UG for toolbar corner radius support
### Description Added UG for toolbar corner radius support Task link- https://dev.azure.com/EssentialStudio/Mobile%20and%20Desktop/_workitems/edit/996035/
1 parent b9e7059 commit 9827bd9

File tree

3 files changed

+245
-1
lines changed

3 files changed

+245
-1
lines changed

‎MAUI/Toolbar/customization.md‎

Lines changed: 245 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1124,4 +1124,248 @@ public partial class MainPage : ContentPage
11241124

11251125
{% endtabs %}
11261126

1127-
![divider-line-customization](images/divider-customization.png)
1127+
![divider-line-customization](images/divider-customization.png)
1128+
1129+
## Corner Radius Customization
1130+
1131+
The toolbar control supports customizing its corners using the CornerRadius property, allowing rounded or sharp edges to match your design preferences.
1132+
1133+
The following code sample demonstrates how to set the corner radius of the toolbar.
1134+
1135+
{% tabs %}
1136+
1137+
{% highlight xaml %}
1138+
1139+
<Grid>
1140+
<toolbar:SfToolbar x:Name="Toolbar"
1141+
HeightRequest="56"
1142+
WidthRequest="330"
1143+
CornerRadius="30">
1144+
<toolbar:SfToolbar.Items>
1145+
<toolbar:SfToolbarItem Name="Bold"
1146+
Text="Bold"
1147+
TextPosition="Right"
1148+
ToolTipText="Bold"
1149+
Size="90,40">
1150+
<toolbar:SfToolbarItem.Icon>
1151+
<FontImageSource Glyph="&#xE770;"
1152+
FontFamily="MauiMaterialAssets"/>
1153+
</toolbar:SfToolbarItem.Icon>
1154+
</toolbar:SfToolbarItem>
1155+
<toolbar:SfToolbarItem Name="Underline"
1156+
Text="Underline"
1157+
TextPosition="Right"
1158+
ToolTipText="Underline"
1159+
Size="90,40">
1160+
<toolbar:SfToolbarItem.Icon>
1161+
<FontImageSource Glyph="&#xE762;"
1162+
FontFamily="MauiMaterialAssets"/>
1163+
</toolbar:SfToolbarItem.Icon>
1164+
</toolbar:SfToolbarItem>
1165+
<toolbar:SfToolbarItem Name="Italic"
1166+
Text="Italic"
1167+
TextPosition="Right"
1168+
ToolTipText="Italic"
1169+
Size="90,40">
1170+
<toolbar:SfToolbarItem.Icon>
1171+
<FontImageSource Glyph="&#xE771;"
1172+
FontFamily="MauiMaterialAssets"/>
1173+
</toolbar:SfToolbarItem.Icon>
1174+
</toolbar:SfToolbarItem>
1175+
</toolbar:SfToolbar.Items>
1176+
</toolbar:SfToolbar>
1177+
</Grid>
1178+
1179+
{% endhighlight %}
1180+
1181+
{% highlight c# %}
1182+
1183+
public partial class MainPage : ContentPage
1184+
{
1185+
public MainPage()
1186+
{
1187+
InitializeComponent();
1188+
var grid = new Grid();
1189+
1190+
var toolbar = new SfToolbar
1191+
{
1192+
HeightRequest = 56,
1193+
WidthRequest = 330,
1194+
CornerRadius = 30
1195+
};
1196+
1197+
toolbar.Items = new ObservableCollection<BaseToolbarItem>
1198+
{
1199+
new SfToolbarItem
1200+
{
1201+
Name = "Bold",
1202+
Text = "Bold",
1203+
TextPosition = ToolbarItemTextPosition.Right,
1204+
ToolTipText = "Bold",
1205+
Size = new Size(90, 40),
1206+
Icon = new FontImageSource
1207+
{
1208+
Glyph = "\uE770",
1209+
FontFamily = "MauiMaterialAssets"
1210+
}
1211+
},
1212+
new SfToolbarItem
1213+
{
1214+
Name = "Underline",
1215+
Text = "Underline",
1216+
TextPosition = ToolbarItemTextPosition.Right,
1217+
ToolTipText = "Underline",
1218+
Size = new Size(90, 40),
1219+
Icon = new FontImageSource
1220+
{
1221+
Glyph = "\uE762",
1222+
FontFamily = "MauiMaterialAssets"
1223+
}
1224+
},
1225+
new SfToolbarItem
1226+
{
1227+
Name = "Italic",
1228+
Text = "Italic",
1229+
TextPosition = ToolbarItemTextPosition.Right,
1230+
ToolTipText = "Italic",
1231+
Size = new Size(90, 40),
1232+
Icon = new FontImageSource
1233+
{
1234+
Glyph = "\uE771",
1235+
FontFamily = "MauiMaterialAssets"
1236+
}
1237+
}
1238+
};
1239+
1240+
grid.Children.Add(toolbar);
1241+
Content = grid;
1242+
}
1243+
}
1244+
1245+
{% endhighlight %}
1246+
1247+
{% endtabs %}
1248+
1249+
![corner-radius](images/corner-radius.png)
1250+
1251+
## Selection Corner Radius Customization
1252+
1253+
The toolbar control supports customizing corners of the selection using the SelectionCornerRadius property, allowing the corners of the selected item to be rounded or sharp based on your preference.
1254+
1255+
The following code sample demonstrates how to set the selection corner radius for toolbar items.
1256+
1257+
{% tabs %}
1258+
1259+
{% highlight xaml %}
1260+
1261+
<Grid>
1262+
<toolbar:SfToolbar x:Name="Toolbar"
1263+
HeightRequest="56"
1264+
WidthRequest="330"
1265+
SelectionCornerRadius="20">
1266+
<toolbar:SfToolbar.Items>
1267+
<toolbar:SfToolbarItem Name="Bold"
1268+
Text="Bold"
1269+
TextPosition="Right"
1270+
ToolTipText="Bold"
1271+
Size="90,40">
1272+
<toolbar:SfToolbarItem.Icon>
1273+
<FontImageSource Glyph="&#xE770;"
1274+
FontFamily="MauiMaterialAssets"/>
1275+
</toolbar:SfToolbarItem.Icon>
1276+
</toolbar:SfToolbarItem>
1277+
<toolbar:SfToolbarItem Name="Underline"
1278+
Text="Underline"
1279+
TextPosition="Right"
1280+
ToolTipText="Underline"
1281+
Size="90,40">
1282+
<toolbar:SfToolbarItem.Icon>
1283+
<FontImageSource Glyph="&#xE762;"
1284+
FontFamily="MauiMaterialAssets"/>
1285+
</toolbar:SfToolbarItem.Icon>
1286+
</toolbar:SfToolbarItem>
1287+
<toolbar:SfToolbarItem Name="Italic"
1288+
Text="Italic"
1289+
TextPosition="Right"
1290+
ToolTipText="Italic"
1291+
Size="90,40">
1292+
<toolbar:SfToolbarItem.Icon>
1293+
<FontImageSource Glyph="&#xE771;"
1294+
FontFamily="MauiMaterialAssets"/>
1295+
</toolbar:SfToolbarItem.Icon>
1296+
</toolbar:SfToolbarItem>
1297+
</toolbar:SfToolbar.Items>
1298+
</toolbar:SfToolbar>
1299+
</Grid>
1300+
1301+
{% endhighlight %}
1302+
1303+
{% highlight c# %}
1304+
1305+
public partial class MainPage : ContentPage
1306+
{
1307+
public MainPage()
1308+
{
1309+
InitializeComponent();
1310+
var grid = new Grid();
1311+
1312+
var toolbar = new SfToolbar
1313+
{
1314+
HeightRequest = 56,
1315+
WidthRequest = 330,
1316+
SelectionCornerRadius = 20
1317+
};
1318+
1319+
toolbar.Items = new ObservableCollection<BaseToolbarItem>
1320+
{
1321+
new SfToolbarItem
1322+
{
1323+
Name = "Bold",
1324+
Text = "Bold",
1325+
TextPosition = ToolbarItemTextPosition.Right,
1326+
ToolTipText = "Bold",
1327+
Size = new Size(90, 40),
1328+
Icon = new FontImageSource
1329+
{
1330+
Glyph = "\uE770",
1331+
FontFamily = "MauiMaterialAssets"
1332+
}
1333+
},
1334+
new SfToolbarItem
1335+
{
1336+
Name = "Underline",
1337+
Text = "Underline",
1338+
TextPosition = ToolbarItemTextPosition.Right,
1339+
ToolTipText = "Underline",
1340+
Size = new Size(90, 40),
1341+
Icon = new FontImageSource
1342+
{
1343+
Glyph = "\uE762",
1344+
FontFamily = "MauiMaterialAssets"
1345+
}
1346+
},
1347+
new SfToolbarItem
1348+
{
1349+
Name = "Italic",
1350+
Text = "Italic",
1351+
TextPosition = ToolbarItemTextPosition.Right,
1352+
ToolTipText = "Italic",
1353+
Size = new Size(90, 40),
1354+
Icon = new FontImageSource
1355+
{
1356+
Glyph = "\uE771",
1357+
FontFamily = "MauiMaterialAssets"
1358+
}
1359+
}
1360+
};
1361+
1362+
grid.Children.Add(toolbar);
1363+
Content = grid;
1364+
}
1365+
}
1366+
1367+
{% endhighlight %}
1368+
1369+
{% endtabs %}
1370+
1371+
![selection-corner-radius](images/selection-corner-radius.png)

‎MAUI/Toolbar/images/corner-radius.png‎

8.3 KB
Loading

‎MAUI/Toolbar/images/selection-corner-radius.png‎

9.27 KB
Loading

0 commit comments

Comments
 (0)