Skip to content

Commit 7afb0be

Browse files
E-vaTRONE-vaTRON
committed
Add Tooltip and Trackball
1 parent 54b3829 commit 7afb0be

File tree

9 files changed

+1221
-23
lines changed

9 files changed

+1221
-23
lines changed

‎src/Core/MAUIsland.Core/Features/Gallery/Pages/Syncfusion/SfCartesianChart/ContentView/Tooltip/SfCartesianChartTooltip.xaml‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentView
3+
x:Class="MAUIsland.Core.SfCartesianChartTooltip"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:core="clr-namespace:MAUIsland.Core"
7+
xmlns:toolkit="http://schemas.syncfusion.com/maui/toolkit"
8+
x:Name="root">
9+
10+
<VerticalStackLayout Spacing="5">
11+
<Border StrokeShape="RoundRectangle 4" Margin="5" Padding="10">
12+
<VerticalStackLayout Spacing="10">
13+
<toolkit:SfCartesianChart HorizontalOptions="Fill" VerticalOptions="FillAndExpand"
14+
Margin="0, 0, 20, 0">
15+
<toolkit:SfCartesianChart.Legend>
16+
<toolkit:ChartLegend ToggleSeriesVisibility="True" />
17+
</toolkit:SfCartesianChart.Legend>
18+
<toolkit:SfCartesianChart.Title>
19+
<Label Text="Tooltip Column Sample Chart" Margin="0,0,0,5" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16"/>
20+
</toolkit:SfCartesianChart.Title>
21+
<toolkit:SfCartesianChart.TooltipBehavior>
22+
<toolkit:ChartTooltipBehavior Duration="500" TextColor="Aqua" FontSize="16" Background="Gray"/>
23+
</toolkit:SfCartesianChart.TooltipBehavior>
24+
<toolkit:SfCartesianChart.XAxes>
25+
<toolkit:CategoryAxis ShowMajorGridLines="False" LabelPlacement="BetweenTicks">
26+
</toolkit:CategoryAxis>
27+
</toolkit:SfCartesianChart.XAxes>
28+
<toolkit:SfCartesianChart.YAxes>
29+
<toolkit:NumericalAxis ShowMajorGridLines="True" Minimum="0">
30+
</toolkit:NumericalAxis>
31+
</toolkit:SfCartesianChart.YAxes>
32+
<toolkit:SfCartesianChart.Series>
33+
<toolkit:ColumnSeries Label="Aqua" EnableTooltip="True" EnableAnimation="True" Width="0.8" Spacing="0.2"
34+
ItemsSource="{x:Binding ComponentData, Source={x:Reference root}}"
35+
XBindingPath="Name" YBindingPath="Exp" LegendIcon="SeriesType"/>
36+
<toolkit:ColumnSeries Label="Gray" EnableTooltip="True" EnableAnimation="True" Width="0.8" Spacing="0.2"
37+
ItemsSource="{x:Binding ComponentData, Source={x:Reference root}}"
38+
XBindingPath="Name" YBindingPath="Value" LegendIcon="SeriesType"/>
39+
</toolkit:SfCartesianChart.Series>
40+
</toolkit:SfCartesianChart>
41+
42+
<core:SourceCodeExpander Code="{x:Binding TooltipCodeDescription, Source={x:Reference root}}" CodeType="Xaml"/>
43+
</VerticalStackLayout>
44+
</Border>
45+
46+
<Label Text="The SfCartesianChart provides support to customize the appearance of the tooltip by using the TooltipTemplate property."/>
47+
<Border StrokeShape="RoundRectangle 4" Margin="5" Padding="10">
48+
<Grid>
49+
<VerticalStackLayout>
50+
<HorizontalStackLayout Spacing="10">
51+
<Image x:Name="ArrowImage" Grid.Column="1" HeightRequest="20" WidthRequest="20"
52+
Source="{x:StaticResource ArrowCircleRight24Regular}" />
53+
<Label Text="Customization Tooltip" VerticalTextAlignment="Center" FontSize="16"/>
54+
</HorizontalStackLayout>
55+
<Border x:Name="Info" StrokeShape="RoundRectangle 4" Margin="10" Padding="10">
56+
<VerticalStackLayout Spacing="5">
57+
<toolkit:SfCartesianChart HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
58+
<toolkit:SfCartesianChart.Resources>
59+
<DataTemplate x:Key="TemplateColumn">
60+
<VerticalStackLayout Spacing="5">
61+
<HorizontalStackLayout VerticalOptions="Fill" HorizontalOptions="Center" Spacing="10">
62+
<Ellipse TranslationY="-1" Stroke="Aqua" StrokeThickness="2" HeightRequest="10" WidthRequest="10" />
63+
<Label Text="{x:Binding Item.Name}" HorizontalTextAlignment="Center" HorizontalOptions="Center"
64+
VerticalTextAlignment="Center" FontAttributes="Bold"
65+
FontFamily="Helvetica" Margin="0,2" FontSize="12"/>
66+
</HorizontalStackLayout>
67+
<BoxView HeightRequest="1" WidthRequest="100" Color="White" />
68+
<HorizontalStackLayout VerticalOptions="Fill" >
69+
<Label Text="{x:Binding Item.Value, StringFormat='Value: {0}M'}"
70+
VerticalTextAlignment="Center" HorizontalOptions="Start"
71+
FontFamily="Helvetica" FontSize="12" />
72+
<Label Text="{x:Binding Item.Exp, StringFormat=', Exp: {0}M'}"
73+
VerticalTextAlignment="Center" HorizontalOptions="End"
74+
FontFamily="Helvetica" FontSize="12" />
75+
</HorizontalStackLayout>
76+
</VerticalStackLayout>
77+
</DataTemplate>
78+
</toolkit:SfCartesianChart.Resources>
79+
<toolkit:SfCartesianChart.Legend>
80+
<toolkit:ChartLegend ToggleSeriesVisibility="True" />
81+
</toolkit:SfCartesianChart.Legend>
82+
<toolkit:SfCartesianChart.Title>
83+
<Label Text="Custom Tooltip Column Sample Chart" Margin="0,0,0,5" HorizontalOptions="Fill" HorizontalTextAlignment="Center" VerticalOptions="Center" FontSize="16"/>
84+
</toolkit:SfCartesianChart.Title>
85+
<toolkit:SfCartesianChart.XAxes>
86+
<toolkit:CategoryAxis ShowMajorGridLines="False" LabelPlacement="BetweenTicks">
87+
</toolkit:CategoryAxis>
88+
</toolkit:SfCartesianChart.XAxes>
89+
<toolkit:SfCartesianChart.YAxes>
90+
<toolkit:NumericalAxis ShowMajorGridLines="True" Minimum="0">
91+
</toolkit:NumericalAxis>
92+
</toolkit:SfCartesianChart.YAxes>
93+
<toolkit:SfCartesianChart.Series>
94+
<toolkit:ColumnSeries Label="Aqua" EnableAnimation="True" Width="0.8" Spacing="0.2"
95+
ItemsSource="{Binding ComponentData, Source={x:Reference root}}"
96+
XBindingPath="Name" YBindingPath="Exp" LegendIcon="SeriesType"
97+
EnableTooltip="True" TooltipTemplate="{x:StaticResource TemplateColumn}"/>
98+
<toolkit:ColumnSeries Label="Gray" EnableAnimation="True" Width="0.8" Spacing="0.2"
99+
ItemsSource="{Binding ComponentData, Source={x:Reference root}}"
100+
XBindingPath="Name" YBindingPath="Value" LegendIcon="SeriesType"
101+
EnableTooltip="True" TooltipTemplate="{x:StaticResource TemplateColumn}"/>
102+
</toolkit:SfCartesianChart.Series>
103+
</toolkit:SfCartesianChart>
104+
105+
<core:SourceCodeExpander Code="{x:Binding CustomToolTipCodeDescription, Source={x:Reference root}}" CodeType="Xaml"/>
106+
</VerticalStackLayout>
107+
</Border>
108+
</VerticalStackLayout>
109+
<Grid.GestureRecognizers>
110+
<TapGestureRecognizer Tapped="OnGridTapped" />
111+
</Grid.GestureRecognizers>
112+
</Grid>
113+
</Border>
114+
</VerticalStackLayout>
115+
</ContentView>

‎src/Core/MAUIsland.Core/Features/Gallery/Pages/Syncfusion/SfCartesianChart/ContentView/Tooltip/SfCartesianChartTooltip.xaml.cs‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
namespace MAUIsland.Core;
2+
3+
public partial class SfCartesianChartTooltip : ContentView
4+
{
5+
#region [ CTor ]
6+
public SfCartesianChartTooltip()
7+
{
8+
InitializeComponent();
9+
Info.IsVisible = false;
10+
}
11+
#endregion
12+
13+
#region [ Bindable Properties ]
14+
public static readonly BindableProperty ComponentDataProperty = BindableProperty.Create(
15+
nameof(ComponentData),
16+
typeof(ObservableCollection<SfCartesianChartModel>),
17+
typeof(SfCartesianChartTooltip),
18+
default(ObservableCollection<SfCartesianChartModel>)
19+
);
20+
21+
public static readonly BindableProperty TooltipCodeDescriptionProperty = BindableProperty.Create(
22+
nameof(TooltipCodeDescription),
23+
typeof(string),
24+
typeof(SfCartesianChartTooltip),
25+
default(string)
26+
);
27+
28+
public static readonly BindableProperty CustomToolTipCodeDescriptionProperty = BindableProperty.Create(
29+
nameof(CustomToolTipCodeDescription),
30+
typeof(string),
31+
typeof(SfCartesianChartTooltip),
32+
default(string)
33+
);
34+
#endregion
35+
36+
#region [ Properties ]
37+
public ObservableCollection<SfCartesianChartModel> ComponentData
38+
{
39+
get => (ObservableCollection<SfCartesianChartModel>)GetValue(ComponentDataProperty);
40+
set => SetValue(ComponentDataProperty, value);
41+
}
42+
43+
public string TooltipCodeDescription
44+
{
45+
get => (string)GetValue(TooltipCodeDescriptionProperty);
46+
set => SetValue(TooltipCodeDescriptionProperty, value);
47+
}
48+
49+
public string CustomToolTipCodeDescription
50+
{
51+
get => (string)GetValue(CustomToolTipCodeDescriptionProperty);
52+
set => SetValue(CustomToolTipCodeDescriptionProperty, value);
53+
}
54+
#endregion
55+
56+
#region [ Events ]
57+
private async void OnGridTapped(object sender, EventArgs e)
58+
{
59+
// Rotate the arrow image based on the expanded state
60+
if (ArrowImage.Rotation == 0)
61+
{
62+
await ArrowImage.RotateTo(90);
63+
Info.IsVisible = true;
64+
}
65+
else
66+
{
67+
await ArrowImage.RotateTo(0);
68+
Info.IsVisible = false;
69+
}
70+
}
71+
#endregion
72+
}

0 commit comments

Comments
 (0)