Как добавить вертикальную полосу прокрутки в Telerik RadLegendControl в RadCartesianChart? - PullRequest
Новая
       77

Как добавить вертикальную полосу прокрутки в Telerik RadLegendControl в RadCartesianChart?

0 голосов
/ 29 мая 2019

Я разрабатываю программу в UWP, которая будет иметь возможность отображать данные на экране и должна поддерживать возможность того, что пользователь может захотеть нанести на нее большое количество серий.

ДиаграммаЯ использую RadCartesianChart от Telerik, и я использую RadLegendControl для отображения легенды для диаграммы.Это выложено на сетке с двумя столбцами и одной строкой.В первом столбце (0) находится RadLegendControl.Во втором столбце (1) находится RadCartesianChart.

Когда нарисовано большое количество серий, это может привести к тому, что легенда опустится ниже нижней части приложения, отрезав оставшиеся элементы в легенде.По сути, это «чрезмерный» пример использования этой диаграммы, и я хочу убедиться, что он может работать эффективно, если использовать его в этом виде.

Есть ли способ добавить полосу прокрутки кУправление легендой, чтобы пользователь мог просматривать легенду?Или я должен искать другой способ отображения легенды?

Это для программы, созданной в UWP, которая в настоящее время нацелена на минимальную версию Windows 10 1803 и нацелена на 1809, используя Visual Studio 2019.

Я сделал сообщение на форуме Telerik , задавая этот вопрос, и было высказано предположение, что, возможно, существует внешний компонент, позволяющий легенде расширяться до ее полной высоты за пределами экрана, и они предоставиливозможное решение в попытке установить явную максимальную высоту, чтобы увидеть полосу прокрутки, когда она достигает этой верхней границы.Таким образом, в XAML я установил MaxHeight = "300", что намного меньше, чем требовалось бы легенде средней диаграммы, чтобы я мог легко видеть, появилась ли полоса прокрутки.Когда я попробовал это, полоса прокрутки не появилась.

Первоначально у меня был нарисован RadLegendControl с использованием StackPanel для изменения порядка легенды для отображения сверху вниз, а не слева направо, чтобы она могла совмещаться рядом сДиаграмма.Я подозревал, что внутренний ScrollViewer в StackPanel мог конфликтовать с внутренним ScrollViewer в RadLegendControl.Я удалил макет StackPanel, чтобы он не мог конфликтовать, чтобы увидеть, появится ли затем ScrollViewer.Это не удалось (я также протестировал горизонтальное, но безуспешно).

Я пробовал другие решения, такие как привязка свойства MaxHeight RadLegendControl к высоте или ActualHeight строки Grid, в которой он находится., явно устанавливая VerticalScrollMode в значение Enabled и VerticalScrollVisibility в Visible.

Это код RadLegendControl в XAML, при этом для 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 Series на моей диаграмме, у легенды нет полосы прокруткипоказ, с элементами, исчезающими за кадром.(К сожалению, мне не хватает представителя для показа изображения).

Я хотел бы найти решение, при котором при наличии достаточного количества серий появится вертикальная полоса прокрутки, которая позволит пользователю прокручивать страницу вниз.Легенда.

Я понимаю, что это может показаться чрезмерным, но я хотел бы убедиться, что моя программа ведет себя должным образом, если пользователь по какой-либо причине решит отобразить большое количество серий на диаграмме.

1 Ответ

0 голосов
/ 30 мая 2019

Поскольку вы просто предоставляете 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; }
}
...