Производный пользовательский элемент управления LiveCharts с привязкой данных не отображает диаграмму - PullRequest
Новая
       42

Производный пользовательский элемент управления LiveCharts с привязкой данных не отображает диаграмму

1 голос
/ 02 мая 2019

Я создаю демонстрационное приложение WPF на основе C #, в котором есть пользовательская «карта» элемента управления (User Control), которая имеет две метки и диаграмму ( LiveCharts ).

Как правильно привязать данные к элементу управления LiveCharts внутри пользовательского элемента управления карты, чтобы отображалась диаграмма?

Я испробовал множество возможных решений, включая DataContext={Binding RelativeSource={RelativeSource Self}}.

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

Изображение: образец текущего приложения при запуске

Репозиторий

https://github.com/PWA-GouldA/C4Prog-DotNet-WPF-LiveChartDemo

Извлечение кода:

Логика взаимодействия для CardLineChart.xaml 

public partial class CardLineChart : UserControl
    {
        public CardLineChart()
        {
            InitializeComponent();
            CardGrid.DataContext = this;
        }

        #region SeriesData DP
        public SeriesCollection SeriesData
        {
            set { SetValue(DataProperty, value); }
        }
        public static readonly DependencyProperty DataProperty =
            DependencyProperty.Register("SeriesData", 
                typeof(SeriesCollection), typeof(CardLineChart), 
                new PropertyMetadata(new SeriesCollection()));
        #endregion

        #region BackgroundColour DP
        public string BackgroundColour
        {
            set { SetValue(ColourBG, value); }
        }
        public static readonly DependencyProperty ColourBG =
            DependencyProperty.Register("BackgroundColour",
                typeof(string), typeof(CardLineChart), new PropertyMetadata(""));
        #endregion

        #region BottomLabel DP
        public string BottomLabel
        {
            set { SetValue(LabelAtBottom, value); }
        }
        public static readonly DependencyProperty LabelAtBottom =
            DependencyProperty.Register("BottomLabel",
                typeof(string), typeof(CardLineChart), new PropertyMetadata(null));
        #endregion

        #region TopLabel DP
        public string TopLabel
        {
            set { SetValue(LabelAtTop, value); }
        }
        public static readonly DependencyProperty LabelAtTop =
            DependencyProperty.Register("TopLabel",
                typeof(string), typeof(CardLineChart), new PropertyMetadata(null));
        #endregion
    }

CardLineChart.xaml 

<UserControl x:Class="WPF_With_LiveCharts.CardLineChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="200"
             >
    <Grid x:Name="CardGrid" Margin="5,5,5,5" MaxHeight="200" MaxWidth="200">
        <Grid.Effect>
            <DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" Opacity=".2" ShadowDepth="2"/>
        </Grid.Effect>
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Border1}" />
        </Grid.OpacityMask>
        <Grid.Resources>
            <Style TargetType="lvc:LineSeries">
                <Setter Property="StrokeThickness" Value="1"></Setter>
                <Setter Property="Stroke" Value="White"></Setter>
                <Setter Property="Fill" Value="#00ffffff"></Setter>
                <Setter Property="PointGeometrySize" Value="0"></Setter>
                <Setter Property="LineSmoothness" Value="0.25"></Setter>
            </Style>
            <Style TargetType="lvc:Axis">
                <Setter Property="ShowLabels" Value="False"></Setter>
                <Setter Property="IsEnabled" Value="False"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="80*"></RowDefinition>
        </Grid.RowDefinitions>
        <Border x:Name="Border1" Grid.Row="0" Grid.RowSpan="3" CornerRadius="5" 
                Background="{Binding Path=BackgroundColour}" />
        <TextBlock Grid.Row="0" TextAlignment="Center" Padding="5, 5, 0, 5" 
                   Foreground="#ccFFFFFF" FontSize="12"
                   Text="{Binding Path=TopLabel}" />
        <lvc:CartesianChart Grid.Row="1" 
                            Margin="0,0,0,0" 
                            Series="{Binding Path=SeriesData}" 
                            Hoverable="False" 
                            DataTooltip="{x:Null}">
            <lvc:CartesianChart.AxisX>
                <lvc:Axis MinValue="0"></lvc:Axis>
            </lvc:CartesianChart.AxisX>
        </lvc:CartesianChart>
        <TextBlock Grid.Row="2" x:Name="ChartValue" 
                   Foreground="#ccFFFFFF" FontSize="48" 
                   VerticalAlignment="Center" TextAlignment="Center" 
                   Margin="8,0,8,6" Text="{Binding Path=BottomLabel}"/>
    </Grid>
</UserControl>

WindowMain.cs 

public partial class MainWindow : Window
    {
        public SeriesCollection theData;
        public SeriesCollection theData2;
        public string BackgroundColour;

        public MainWindow()
        {
            InitializeComponent();

            theData = new SeriesCollection
            {
                new LineSeries
                {
                    Values = new ChartValues<decimal> { 7, 3, 2, 3, 5, 7, 4 }
                }
            };

            theData2 = new SeriesCollection
            {
                new LineSeries
                {
                    Values = new ChartValues<decimal> { 100, 90, 70, 40, 10 }
                }
            };

            BackgroundColour = "#FFCE2156";

            DataContext = this;

        }

        private void ButtonLineChart_Click(object sender, RoutedEventArgs e)
        {

        }
    }

WindowMain.xaml 

<Window x:Class="WPF_With_LiveCharts.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_With_LiveCharts"
        xmlns:control = "clr-namespace:WPF_With_LiveCharts" 
        mc:Ignorable="d"
        Title="MainWindow" Height="460" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="45"/>
            <RowDefinition Height="200"/>
            <RowDefinition Height="200"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>

        <Button x:Name="ButtonLineChart" Content="Line Chart" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="ButtonLineChart_Click" Height="25"/>
        <Button x:Name="ButtonPieChart" Content="Pie Chart" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Grid.Column="2" Height="25"/>

        <control:CardLineChart
                Grid.Column="0" Grid.Row="1" 
                x:Name="TestingCardLineChart"
                SeriesData="{Binding theData}" 
                BackgroundColour="#ffc22735" 
                TopLabel="Testing"
                BottomLabel="123"
                />

        <control:CardLineChart 
            Grid.Column="1"
            Grid.Row="1"
                x:Name="TestingCardLineChart2"
                SeriesData="{Binding theData2}" 
                BackgroundColour="#FF000000" 
                TopLabel="Oh Yes!"
                BottomLabel="9999"
                />
    </Grid>
</Window>

1 Ответ

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

Привязка не работает с полями в WPF. Если вы измените коллекцию рядов на MainWindow.xaml.cs, чтобы вместо нее использовать свойства, вы сможете увидеть графики.

например 

public SeriesCollection theData { get; set; }
public SeriesCollection theData2 { get; set; }
...