Buttons on Legend and custom icons

[Sean Schellinger]

Hi,

I would like to change my chart legend to have the "ToggleSeriesVisibility" functionality, but I would like them to appear like ToggleButtons to make it more clear that they can be pressed. I would also like to use custom icons, but only for some of the items. I was able to change the icon for all of them, but I wasn't sure how I could keep the default icon for some, but use my own image for others. Thanks!

[Muneesh Kumar G]

Hi Sean Schellinger, 

Thanks for using Syncfusion Products. 

We can achieve your requirement by setting ItemTemplate in legend  as follows: 

Code snippet [XAML]: 

 <Grid.Resources> 

            <local:IconConverter x:Key="iconConv"/> 

        </Grid.Resources> 

….    

<chartbar:SfChart.Legend > 

                <chartbar:ChartLegend ToggleSeriesVisibility="True"> 

                    <chartbar:ChartLegend.ItemTemplate> 

                        <DataTemplate> 

                            <StackPanel Orientation="Horizontal" Visibility="{Binding VisibilityOnLegend}" Opacity="{Binding Opacity}" Margin="{Binding ItemMargin}"> 

                                <CheckBox IsChecked="{Binding IsSeriesVisible,Mode=TwoWay}" VerticalAlignment="Center" Margin="0" 

                                  Visibility="{Binding CheckBoxVisibility}" RenderTransformOrigin=".5,.5" > 

                                    <CheckBox.RenderTransform> 

                                        <ScaleTransform ScaleX=".75" ScaleY=".75" /> 

                                    </CheckBox.RenderTransform> 

                                </CheckBox> 

                                <Grid> 

                                    <ContentControl Width="{Binding IconWidth}" Height="{Binding IconHeight}" 

                                                     Content="{Binding Converter={StaticResource iconConv}}" 

                                              Visibility="{Binding IconVisibility}" Margin="2"> 

                                    </ContentControl> 

                                </Grid> 

                                <TextBlock Text="{Binding Label}" Margin="2,2,8,2" VerticalAlignment="Center"/> 

                            </StackPanel> 

                        </DataTemplate> 

                    </chartbar:ChartLegend.ItemTemplate> 

                </chartbar:ChartLegend> 

            </chartbar:SfChart.Legend> 

 

Code snippet [C#]: 

  

public class IconConverter : IValueConverter 

    { 

         

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            LegendItem item = value as LegendItem; 

 

            if(item.Label=="Series 1") 

            { 

                Button bt = new Button(); 

                bt.Tag = value; 

                bt.Click += Bt_Click; 

                return bt; 

            } 

            else 

            { 

                ContentPresenter content = new ContentPresenter(); 

 

                Binding binding = new Binding(); 

                binding.Source = value; 

                BindingOperations.SetBinding(content, ContentPresenter.ContentProperty, binding); 

 

                binding = new Binding(); 

                binding.Source = value; 

                binding.Path = new PropertyPath("LegendIconTemplate"); 

                BindingOperations.SetBinding(content, ContentPresenter.ContentTemplateProperty, binding); 

 

                return content; 

            } 

            

        } 

 

        private void Bt_Click(object sender, RoutedEventArgs e) 

        { 

            Button bt = sender as Button; 

 

            LegendItem item = bt.Tag as LegendItem; 

 

            item.IsSeriesVisible = !item.IsSeriesVisible; 

 

        } 

 

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value; 

        }    } 

 

We have prepared a sample based on this and you can find the sample under the following location: 

Sample : http://www.syncfusion.com/downloads/support/forum/136173/ze/LegendItemTemplate1798956752 

Please let us know if you have any queries. 

Regards, 

Muneesh Kumar G. 

 

[Sean Schellinger]

Perfect thanks!

[Divya Venkatesan]

Hi Sean Schellinger,

Thanks for the update.

We are glad to know that the given solution works.

Please let us know if you need any further assistance.

Regards,
Divya Venkatesan