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的平均图例所要求的要小得多，这样我就可以很容易地看到Scrollbar是否出现。当我尝试此操作时，没有滚动条出现。

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

telekrikPrimitives的定义如下：

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系列的文件中，图例没有显示滚动条，并且项目在屏幕外消失。（很遗憾，我没有足够的代表来显示图片。）

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

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

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添加垂直滚动条？

1 个答案: