RadLegend sometimes disappears permanently when its parent controls toggle IsVisible

[Jeremy]

I have a RadLegend in my UI situated under a couple of controls that toggle visibility, in this case for a simple styled tab layout. But when the parent toggles back to visible, sometimes the RadLegend does not reappear. In some cases, when the data for the corresponding pie chart is updated, the legend will disappear right away.

Here's my layout (this page ends up as the Detail of a MasterDetailPage):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyApp.Views"
             xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             x:Class="MyApp.Views.DowntimeDashboardPage"
             Style="{StaticResource DefaultContentPageStyle}"
             Title="{Binding Title}">

    <ContentPage.ToolbarItems>
        <ToolbarItem Command="{Binding ShowFilters}">
            <ToolbarItem.Icon>
                <OnPlatform x:TypeArguments="FileImageSource" iOS="{x:Null}" Android="ic_action_filter.png">
                </OnPlatform>
            </ToolbarItem.Icon>
            <ToolbarItem.Text>
                <OnPlatform x:TypeArguments="x:String" iOS="Filters" Android="{x:Null}" />
            </ToolbarItem.Text>
        </ToolbarItem>
    </ContentPage.ToolbarItems>

    <ContentPage.Content>
        <StackLayout Style="{StaticResource InnerPageStackLayoutStyle}" Spacing="20">

            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="0" Margin="20">
                <local:ToggleButton Text="  Top 5  " IsToggled="{Binding TopFiveIsToggled}" />
                <local:ToggleButton Text="  Trend  " IsToggled="{Binding TrendIsToggled}" />
                <local:ToggleButton Text="  Category  " IsToggled="{Binding CategoryIsToggled}" />
            </StackLayout>

            <Label Text="Nothing Found"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   IsVisible="{Binding ShowNothingFound}" />

            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                  IsVisible="{Binding ShowData}">
                <telerikChart:RadCartesianChart x:Name="topFiveChart"
                                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                                BackgroundColor="Transparent"
                                                Margin="0, 0, 0, 40"
                                                IsVisible="{Binding TopFiveIsToggled}">

                    <!--<telerikChart:RadCartesianChart.ChartBehaviors>
                    <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="None" />
                </telerikChart:RadCartesianChart.ChartBehaviors>-->

                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:CategoricalAxis LabelFitMode="MultiLine" PlotMode="BetweenTicks" MajorTickThickness="2"
                                                  LabelTextColor="White" ShowLabels="True" />
                    </telerikChart:RadCartesianChart.HorizontalAxis>

                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:NumericalAxis Minimum="0" LabelTextColor="White" />
                    </telerikChart:RadCartesianChart.VerticalAxis>

                    <telerikChart:RadCartesianChart.Grid>
                        <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" MajorLineThickness="1" />
                    </telerikChart:RadCartesianChart.Grid>

                    <telerikChart:RadCartesianChart.Series>
                        <telerikChart:BarSeries AllowSelect="True" CategoryBinding="LegendTitle" LabelBinding="Label"
                        ValueBinding="Minutes" ShowLabels="True" ItemsSource="{Binding TopFiveData}" />
                    </telerikChart:RadCartesianChart.Series>

                </telerikChart:RadCartesianChart>

                <telerikChart:RadCartesianChart x:Name="trendChart"
                                                HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                                BackgroundColor="Transparent"
                                                Margin="0, 0, 0, 40"  IsVisible="{Binding TrendIsToggled}">

                    <!--<telerikChart:RadCartesianChart.ChartBehaviors>
                    <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="None" />
                </telerikChart:RadCartesianChart.ChartBehaviors>-->

                    <telerikChart:RadCartesianChart.HorizontalAxis>
                        <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate" PlotMode="BetweenTicks" MajorTickThickness="2"
                                                         LabelFormat="MM/dd HH:mm"
                                                  LabelTextColor="White" ShowLabels="True" />
                    </telerikChart:RadCartesianChart.HorizontalAxis>

                    <telerikChart:RadCartesianChart.VerticalAxis>
                        <telerikChart:NumericalAxis Minimum="0" LabelTextColor="White" />
                    </telerikChart:RadCartesianChart.VerticalAxis>

                    <telerikChart:RadCartesianChart.Grid>
                        <telerikChart:CartesianChartGrid MajorLinesVisibility="Y" MajorLineThickness="1" />
                    </telerikChart:RadCartesianChart.Grid>

                    <telerikChart:RadCartesianChart.Series>
                        <telerikChart:SplineAreaSeries StrokeThickness="2"
                                                   Stroke="{StaticResource TrendChartLineColor}"
                                                   Fill="{StaticResource TrendChartFillColor}"
                                                   LabelBinding="Label"
                                                   ValueBinding="Minutes"
                                                   CategoryBinding="Timestamp"
                                                   ShowLabels="False"
                                                   ItemsSource="{Binding TrendData}" />
                    </telerikChart:RadCartesianChart.Series>

                </telerikChart:RadCartesianChart>

                <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="0"

                         IsVisible="{Binding CategoryIsToggled}">

                    <telerikChart:RadPieChart x:Name="categoryChart" BackgroundColor="Transparent"
                                              HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                        <!--<telerikChart:RadPieChart.ChartBehaviors>
                        <telerikChart:ChartSelectionBehavior DataPointSelectionMode="Single" SeriesSelectionMode="None" />
                    </telerikChart:RadPieChart.ChartBehaviors>-->
                        <telerikChart:RadPieChart.Series>
                            <telerikChart:PieSeries ItemsSource="{Binding CategoryData}"
                                                ShowLabels="True"
                                                AllowSelect="False"
                                                ValueBinding="Minutes"
                                                LabelBinding="Label"
                                                LegendTitleBinding="LegendTitle">
                            </telerikChart:PieSeries>
                        </telerikChart:RadPieChart.Series>
                    </telerikChart:RadPieChart>

                    <StackLayout BackgroundColor="{StaticResource PieChartLegendBackgroundColor}"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="End"
                             Margin="20"
                             Padding="20">
                        <telerikChart:RadLegend LegendProvider="{x:Reference categoryChart}" Orientation="Horizontal"
                                            HorizontalOptions="FillAndExpand"
                                            LegendItemFontColor="White">
                            <telerikChart:RadLegend.LegendItemIconSize>
                                <Size Width="40" Height="40" />
                            </telerikChart:RadLegend.LegendItemIconSize>
                        </telerikChart:RadLegend>
                    </StackLayout>
                </StackLayout>
            </Grid>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

 

I also posted a bug here:

https://feedback.telerik.com/Project/168/Feedback/Details/258089-radlegend-sometimes-disappears-when-a-parent-control-changes-visibility-with-isvi

[Didi]

Hi Jeremy,

Thank you for the provided code.

I have created a sample project based on it but I could not reproduce the issue with the RadLegend. From the provided xaml I noticed that you have a custom ToggleButton - I've replaced it with Xamarin.Forms Switch control and binded its IsToggled property in the same way.  I have tested it on Android as well as on iOS, do you reproduce it in a concrete platform? Could you please take a look at the attached project and may I ask you to modify it according your specific setup and send it back to me? Please note that you should open a support ticket and attach the project there, because in the forum only image attachments are allowed.

Looking forward to your reply.

Regards,
Didi
Progress Telerik