Skip to content

Commit 9eccd16

Browse files
didiyordanovadidiyordanova
authored
Update control-spacing-legend-icon-text-maui-chart.md
1 parent 07f850c commit 9eccd16

File tree

1 file changed

+110
-110
lines changed

1 file changed

+110
-110
lines changed

‎knowledge-base/control-spacing-legend-icon-text-maui-chart.md‎

Lines changed: 110 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Adjusting Spacing Between Legend Icon and Text in Telerik UI for .NET MAUI Pie Chart
2+
title: Adjusting the Spacing Between Legend Icon and Text in Telerik UI for .NET MAUI Pie Chart
33
description: Learn how to control the spacing between the legend icon and text in the Pie Chart of Telerik UI for .NET MAUI.
44
type: how-to
55
page_title: Control Spacing Between Legend Icon and Text in .NET MAUI Chart
@@ -22,142 +22,142 @@ I want to control the spacing between the legend icon and the legend text when u
2222
This knowledge base article also answers the following questions:
2323

2424
- How to customize the legend layout in Telerik UI for .NET MAUI Chart?
25-
- How to use CollectionView for controlling legend spacing in Charts?
26-
- How to adjust legend appearance in .NET MAUI Chart?
25+
- How to use CollectionView for controlling the legend spacing in Charts?
26+
- How to adjust the legend appearance in .NET MAUI Chart?
2727

2828
## Solution
2929

30-
To control the spacing between the legend icon and text, use the Telerik MAUI CollectionView and define a custom layout for the legend. Follow these steps:
30+
To control the spacing between the legend icon and text, use the Telerik UI for .NET MAUI CollectionView and define a custom layout for the legend. Follow these steps:
3131

3232
1. Add a `RadCollectionView` to your layout and configure its `ItemsLayout` with the desired spacing using `CollectionViewLinearLayout`.
3333
2. Define a custom `ItemTemplate` in the `RadCollectionView`.
3434
3. Use a `HorizontalStackLayout` with the `Spacing` property to control the distance between the legend icon and text.
3535

36-
```xaml
37-
<ContentPage.Resources>
38-
<ResourceDictionary>
39-
<Style TargetType="telerik:RadCollectionViewItemView">
40-
<Setter Property="BorderThickness" Value="0" />
41-
<Setter Property="BorderColor" Value="Transparent" />
42-
</Style>
43-
</ResourceDictionary>
44-
</ContentPage.Resources>
45-
46-
<Grid RowDefinitions="400,100">
47-
<telerik:RadPieChart x:Name="chartTest" Loaded="ChartTest_OnLoaded">
48-
<telerik:RadPieChart.Palette>
49-
<telerik:ChartPalette>
50-
<telerik:ChartPalette.Entries>
51-
<telerik:PaletteEntry FillColor="#4FB6E7" StrokeColor="#4FB6E7" />
52-
<telerik:PaletteEntry FillColor="#A666CE" StrokeColor="#A666CE" />
53-
<telerik:PaletteEntry FillColor="#9DCC00" StrokeColor="#9DCC00" />
54-
</telerik:ChartPalette.Entries>
55-
</telerik:ChartPalette>
56-
</telerik:RadPieChart.Palette>
57-
<telerik:RadPieChart.Series>
58-
<telerik:PieSeries ShowLabels="True" RadiusFactor="0.8" ValueBinding="Value" ItemsSource="{Binding Data}" />
59-
</telerik:RadPieChart.Series>
60-
</telerik:RadPieChart>
61-
62-
<telerik:RadCollectionView SelectionMode="None" x:Name="LegendItemsControl" Grid.Row="1">
63-
<telerik:RadCollectionView.ItemsLayout>
64-
<telerik:CollectionViewLinearLayout Orientation="Horizontal" ItemSpacing="15" />
65-
</telerik:RadCollectionView.ItemsLayout>
66-
<telerik:RadCollectionView.ItemTemplate>
67-
<DataTemplate x:DataType="local:LegendItem">
68-
<HorizontalStackLayout Spacing="15">
69-
<telerik:RadBorder BackgroundColor="{Binding SeriesPaletteEntry.FillColor}" WidthRequest="40" HeightRequest="40" />
70-
<Label Text="{Binding SeriesDisplayName}" FontSize="12" VerticalOptions="Center" FontAttributes="Bold" />
71-
</HorizontalStackLayout>
72-
</DataTemplate>
73-
</telerik:RadCollectionView.ItemTemplate>
74-
</telerik:RadCollectionView>
75-
</Grid>
76-
```
36+
```xaml
37+
<ContentPage.Resources>
38+
<ResourceDictionary>
39+
<Style TargetType="telerik:RadCollectionViewItemView">
40+
<Setter Property="BorderThickness" Value="0" />
41+
<Setter Property="BorderColor" Value="Transparent" />
42+
</Style>
43+
</ResourceDictionary>
44+
</ContentPage.Resources>
45+
46+
<Grid RowDefinitions="400,100">
47+
<telerik:RadPieChart x:Name="chartTest" Loaded="ChartTest_OnLoaded">
48+
<telerik:RadPieChart.Palette>
49+
<telerik:ChartPalette>
50+
<telerik:ChartPalette.Entries>
51+
<telerik:PaletteEntry FillColor="#4FB6E7" StrokeColor="#4FB6E7" />
52+
<telerik:PaletteEntry FillColor="#A666CE" StrokeColor="#A666CE" />
53+
<telerik:PaletteEntry FillColor="#9DCC00" StrokeColor="#9DCC00" />
54+
</telerik:ChartPalette.Entries>
55+
</telerik:ChartPalette>
56+
</telerik:RadPieChart.Palette>
57+
<telerik:RadPieChart.Series>
58+
<telerik:PieSeries ShowLabels="True" RadiusFactor="0.8" ValueBinding="Value" ItemsSource="{Binding Data}" />
59+
</telerik:RadPieChart.Series>
60+
</telerik:RadPieChart>
61+
62+
<telerik:RadCollectionView SelectionMode="None" x:Name="LegendItemsControl" Grid.Row="1">
63+
<telerik:RadCollectionView.ItemsLayout>
64+
<telerik:CollectionViewLinearLayout Orientation="Horizontal" ItemSpacing="15" />
65+
</telerik:RadCollectionView.ItemsLayout>
66+
<telerik:RadCollectionView.ItemTemplate>
67+
<DataTemplate x:DataType="local:LegendItem">
68+
<HorizontalStackLayout Spacing="15">
69+
<telerik:RadBorder BackgroundColor="{Binding SeriesPaletteEntry.FillColor}" WidthRequest="40" HeightRequest="40" />
70+
<Label Text="{Binding SeriesDisplayName}" FontSize="12" VerticalOptions="Center" FontAttributes="Bold" />
71+
</HorizontalStackLayout>
72+
</DataTemplate>
73+
</telerik:RadCollectionView.ItemTemplate>
74+
</telerik:RadCollectionView>
75+
</Grid>
76+
```
7777

7878
4. Bind the legend items to the `RadCollectionView` in the code-behind.
7979

80-
```csharp
81-
public partial class MainPage : ContentPage
82-
{
83-
private readonly ObservableCollection<LegendItem> legendItems = new();
84-
85-
public MainPage()
86-
{
87-
InitializeComponent();
88-
this.BindingContext = new ViewModel();
89-
this.LegendItemsControl.ItemsSource = legendItems;
90-
}
91-
92-
private void ChartTest_OnLoaded(object sender, EventArgs e)
80+
```csharp
81+
public partial class MainPage : ContentPage
9382
{
94-
foreach (var series in chartTest.Series)
83+
private readonly ObservableCollection<LegendItem> legendItems = new();
84+
85+
public MainPage()
86+
{
87+
InitializeComponent();
88+
this.BindingContext = new ViewModel();
89+
this.LegendItemsControl.ItemsSource = legendItems;
90+
}
91+
92+
private void ChartTest_OnLoaded(object sender, EventArgs e)
9593
{
96-
var source = (ObservableCollection<CategoricalData>)series.ItemsSource;
97-
foreach (var item in source)
94+
foreach (var series in chartTest.Series)
9895
{
99-
var displayName = item.Category;
100-
var colorIndex = source.IndexOf(item) % chartTest.Palette.Entries.Count;
101-
this.legendItems.Add(new LegendItem
96+
var source = (ObservableCollection<CategoricalData>)series.ItemsSource;
97+
foreach (var item in source)
10298
{
103-
SeriesPaletteEntry = chartTest.Palette.Entries[colorIndex],
104-
SeriesDisplayName = displayName.ToString(),
105-
});
99+
var displayName = item.Category;
100+
var colorIndex = source.IndexOf(item) % chartTest.Palette.Entries.Count;
101+
this.legendItems.Add(new LegendItem
102+
{
103+
SeriesPaletteEntry = chartTest.Palette.Entries[colorIndex],
104+
SeriesDisplayName = displayName.ToString(),
105+
});
106+
}
106107
}
107108
}
108109
}
109-
}
110-
```
111-
112-
5. Add a sample `ViewModel`, `DataItem` and `LegendItem`:
110+
```
113111

114-
```csharp
115-
public class ViewModel
116-
{
117-
public ObservableCollection<CategoricalData> Data { get; set; }
118-
119-
public ViewModel()
120-
{
121-
this.Data = GetCategoricalData();
122-
}
112+
5. Add a sample `ViewModel`, `DataItem` and `LegendItem`.
123113

124-
private static ObservableCollection<CategoricalData> GetCategoricalData()
114+
```csharp
115+
public class ViewModel
125116
{
126-
return new ObservableCollection<CategoricalData>
117+
public ObservableCollection<CategoricalData> Data { get; set; }
118+
119+
public ViewModel()
127120
{
128-
new CategoricalData { Category = "Greenings", Value = 52 },
129-
new CategoricalData { Category = "Perfecto", Value = 19 },
130-
new CategoricalData { Category = "NearBy", Value = 82 },
131-
new CategoricalData { Category = "Family", Value = 23 },
132-
new CategoricalData { Category = "Fresh", Value = 56 },
133-
};
121+
this.Data = GetCategoricalData();
122+
}
123+
124+
private static ObservableCollection<CategoricalData> GetCategoricalData()
125+
{
126+
return new ObservableCollection<CategoricalData>
127+
{
128+
new CategoricalData { Category = "Greenings", Value = 52 },
129+
new CategoricalData { Category = "Perfecto", Value = 19 },
130+
new CategoricalData { Category = "NearBy", Value = 82 },
131+
new CategoricalData { Category = "Family", Value = 23 },
132+
new CategoricalData { Category = "Fresh", Value = 56 },
133+
};
134+
}
134135
}
135-
}
136-
137-
public class CategoricalData
138-
{
139-
public object Category { get; set; }
140-
public double Value { get; set; }
141-
}
142-
143-
public class LegendItem : NotifyPropertyChangedBase
144-
{
145-
private string seriesDisplayName;
146-
private PaletteEntry seriesPaletteEntry;
147-
148-
public PaletteEntry SeriesPaletteEntry
136+
137+
public class CategoricalData
149138
{
150-
get => seriesPaletteEntry;
151-
set => UpdateValue(ref seriesPaletteEntry, value);
139+
public object Category { get; set; }
140+
public double Value { get; set; }
152141
}
153-
154-
public string SeriesDisplayName
142+
143+
public class LegendItem : NotifyPropertyChangedBase
155144
{
156-
get => seriesDisplayName;
157-
set => UpdateValue(ref seriesDisplayName, value);
145+
private string seriesDisplayName;
146+
private PaletteEntry seriesPaletteEntry;
147+
148+
public PaletteEntry SeriesPaletteEntry
149+
{
150+
get => seriesPaletteEntry;
151+
set => UpdateValue(ref seriesPaletteEntry, value);
152+
}
153+
154+
public string SeriesDisplayName
155+
{
156+
get => seriesDisplayName;
157+
set => UpdateValue(ref seriesDisplayName, value);
158+
}
158159
}
159-
}
160-
```
160+
```
161161

162162
## See Also
163163

0 commit comments

Comments
 (0)