RadLegend sometimes disappears permanently when its parent controls toggle IsVisible

2 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    9 posts
    Member since:
    Sep 2018

    Posted 16 Oct 2018 Link to this post

    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" ?>
                 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

  2. Didi
    Admin
    Didi avatar
    384 posts

    Posted 18 Oct 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top