如何在 RadCartesianChart 中向 Telerik RadLegendControl 添加垂直滚动条？

Question

我正在 UWP 中开发一个程序，该程序能够在屏幕上绘制数据图表，并且必须支持用户可能希望在其上绘制大量系列图表的潜力。

我使用的图表是 Telerik 的 RadCartesianChart，我使用 RadLegendControl 来显示图表的图例。这是在具有两列和一行的网格上布置的。在第一列 (0) 中是 RadLegendControl。第二列 (1) 是 RadCartesianChart。

当绘制大量系列时，这可能会导致图例下降到应用底部下方，从而切断图例中剩余的项目。这基本上是该图表使用的“过度”示例，我想确保它在这种使用下能够有效地发挥作用。

有没有办法向图例控件添加滚动条，以便用户可以滚动浏览图例？还是我应该寻找一种不同的方法来显示图例？

这适用于在 UWP 中制作的程序，该程序目前使用 Visual Studio 2019 面向最低版本的 Windows 10 1803 并面向 1809。

我提出了post over on Telerik's forum 询问这个问题，有人建议可能有一个外部组件让图例在屏幕外延伸到其全高，他们提供了一个可能的解决方案来尝试设置明确的最大高度看到滚动条在达到上限时出现。因此，在 XAML 中，我设置了 MaxHeight="300"，它比 Chart 的平均图例所需的要小得多，这样我可以很容易地看到滚动条是否出现。当我尝试这个时，没有出现滚动条。

最初我使用 StackPanel 绘制 RadLegendControl 以重新排列图例以从上到下而不是从左到右显示，以便它可以与图表并排显示。我怀疑 StackPanel 的内部 ScrollViewer 可能与 RadLegendControl 的内部 ScrollViewer 冲突。我删除了 StackPanel 布局，以确保它不会发生冲突以查看是否会出现 ScrollViewer。它没有（我也测试了水平的，但没有成功）。

我尝试了其他解决方案，例如将 RadLegendControl 的 MaxHeight 属性绑定到它所在的 Grid 行的 Height 或 ActualHeight，将 VerticalScrollMode 显式设置为 Enabled 并将 VerticalScrollVisibility 设置为 Visible。

这是 XAML 中的 RadLegendControl 代码，MaxHeight 仍显式设置为 300：

<telerikPrimitives:RadLegendControl
    x:Name="LegendForChart"
    LegendProvider="{Binding ElementName=MainChart}"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    HorizontalContentAlignment="Left"
    VerticalContentAlignment="Top"
    MaxHeight="300"
    >
    <telerikPrimitives:RadLegendControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </telerikPrimitives:RadLegendControl.ItemsPanel>
</telerikPrimitives:RadLegendControl>

telerikPrimitives 的定义如下：

xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"

我已尝试添加/修改以下行：

MaxHeight="{Binding ElementName=ChartGrid, Path=Height, Mode=Oneway}"
MaxHeight="{Binding ElementName=ChartGrid, Path=ActualHeight, Mode=Oneway}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollMode="Enabled"

目前我的文件可以在我的图表上显示 ~332 系列，图例没有显示滚动条，项目在屏幕外消失。 （不幸的是，我没有足够的代表来展示图片）。

我想找到一个解决方案，如果有足够的系列显示，会出现一个垂直滚动条并允许用户向下滚动图例。

我意识到这可能看起来有些过分，但如果用户出于任何原因决定在图表上显示大量系列，我想确保我的程序能够正常运行。

Answer 1

由于您只提供了RadLegendControl XAML 代码，因此我没有看到您的整个 XAML 代码示例。我不确定你的问题是什么。

所以，我按照 Telerik 的官方document 做了一个简单的代码示例。

我只是用一个 ScrollViewer 控件来包装 RadLegendControl，然后它就可以滚动了。

请看我的代码示例：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="8*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <telerikChart:RadCartesianChart x:Name="chart" Grid.Column="1">
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:CategoricalAxis />
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:RadCartesianChart.VerticalAxis>
            <telerikChart:LinearAxis />
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:RadCartesianChart.SeriesProvider>
            <telerikChart:ChartSeriesProvider x:Name="provider">
                <telerikChart:ChartSeriesProvider.SeriesDescriptors>
                    <telerikChart:CategoricalSeriesDescriptor ItemsSourcePath="GetData" ValuePath="Value" CategoryPath="Category" LegendTitlePath="LegendTitle">
                        <telerikChart:CategoricalSeriesDescriptor.Style>
                            <Style TargetType="telerikChart:BarSeries">
                                <Setter Property="CombineMode" Value="Cluster" />
                            </Style>
                        </telerikChart:CategoricalSeriesDescriptor.Style>
                    </telerikChart:CategoricalSeriesDescriptor>
                </telerikChart:ChartSeriesProvider.SeriesDescriptors>
            </telerikChart:ChartSeriesProvider>
        </telerikChart:RadCartesianChart.SeriesProvider>
    </telerikChart:RadCartesianChart>
    <ScrollViewer>
        <telerikPrimitives:RadLegendControl x:Name="LegendForChart" LegendProvider="{Binding ElementName=chart}">
            <telerikPrimitives:RadLegendControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsStackPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </telerikPrimitives:RadLegendControl.ItemsPanel>
        </telerikPrimitives:RadLegendControl>
    </ScrollViewer>
</Grid>

private Random r = new Random();

    public List<ViewModel> GenerateCollection()
    {
        List<ViewModel> collection = new List<ViewModel>();
        for (int i = 0; i < 500; i++)
        {
            ViewModel vm = new ViewModel();
            vm.GetData = GenerateData();
            vm.LegendTitle = "ViewModel " + i;
            collection.Add(vm);
        }

        return collection;
    }

    public List<Data> GenerateData()
    {
        List<Data> data = new List<Data>();
        data.Add(new Data { Category = "Apple", Value = r.Next(1, 20) });
        data.Add(new Data { Category = "Orange", Value = r.Next(10, 30) });
        data.Add(new Data { Category = "Lemon", Value = r.Next(20, 40) });

        return data;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        this.provider.Source = GenerateCollection();
    }

public class ViewModel
{
    public List<Data> GetData { get; set; }

    public string LegendTitle { get; set; }
}

public class Data
{
    public double Value { get; set; }

    public string Category { get; set; }
}