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

Question

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

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

绘制大量系列时，这可能会导致图例低于应用程序底部，切断图例中的剩余项目。这基本上是此图表用法的一个 "excessive" 示例，我想确保它在这种用途下能够有效地发挥作用。

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

这是在 UWP 中制作的程序，目前目标是 Windows 10 1803 的最低版本，目标是 1809，使用 Visual Studio 2019。

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

最初我使用 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"

我已经尝试 adding/modifying 以下几行：

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; }
}

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

How do I add a Vertical Scrollbar to Telerik RadLegendControl within RadCartesianChart?

c#

telerik

radchart

uwp

uwp-xaml