如何在RadCartesianChart中向Telerik RadLegendControl添加垂直滾動條？

Question

我正在UWP中開發一個能夠在屏幕上繪制數據圖表的程序，並且必須支持用戶可能希望在其上繪制大量系列圖的潛力。

我正在使用的圖表是Telerik的RadCartesianChart，我使用RadLegendControl來顯示圖表的圖例。 這是在具有兩列和一行的網格上布局的。 在第一列（0）中是RadLegendControl。 在第二列（1）中是RadCartesianChart。

繪制大量系列時，這可能會導致圖例下移到應用程序底部以下，從而切斷圖例中的其余項目。 這基本上是使用此圖表的“過度”示例，我想確保它在這種使用下有效運行。

有沒有辦法將滾動條添加到圖例控件，以便用戶可以滾動圖例？ 或者我應該看一個不同的方法來顯示圖例？

這是針對在UWP內制作的程序，目前使用Visual Studio 2019，目標是最低版本的Windows 10 1803，目標是1809。

我在Telerik的論壇上發帖詢問了這個問題，並且有人建議可能有一個外部組件讓圖例在屏幕外延伸到其全高度，並且他們提供了一個可能的解決方案，試圖將顯式最大高度設置為看到滾動條到達上限時出現。 因此，在XAML中我設置了MaxHeight =“300”，這比Chart的圖例所需要的要小得多，這樣我就可以很容易地看到Scrollbar是否出現了。 當我嘗試這個時，沒有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>

其中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的官方文檔制作了一個簡單的代碼示例。

我只是使用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; }
}