使用 MVVM 绑定 telerik:LegendItem 的 MarkerFill 和 Title

Question

我使用 telerik 创建图表。现在我要给它添加图例。该示例位于 here.

xaml是：

<telerik:RadLegend HorizontalAlignment="Center" UseLayoutRounding="True">
<telerik:RadLegend.ItemTemplate>
    <DataTemplate>
        <Border Background="{Binding MarkerFill}" BorderThickness="1" BorderBrush="{Binding MarkerStroke}">
            <Grid>
                <TextBlock Text="{Binding Title}" Foreground="White" Margin="15 0 0 0" />
                <Path Width="12" 
                      Height="12" 
                      Fill="White" 
                      HorizontalAlignment="Left">
                    <Path.Data>
                        <Binding Path="ActualMarkerGeometry"
                             RelativeSource="{RelativeSource AncestorType=telerik:LegendItemControl}">
                        </Binding>
                    </Path.Data>
                </Path>
            </Grid>
        </Border>
    </DataTemplate>
</telerik:RadLegend.ItemTemplate>
<telerik:RadLegend.Items>
    <telerik:LegendItemCollection>
        <telerik:LegendItem MarkerFill="#FF55AA33" MarkerStroke="Black" Title="Legend item 1" />
        <telerik:LegendItem MarkerFill="#FFCC3399" MarkerStroke="Black" Title="Legend item 2" />
        <telerik:LegendItem MarkerFill="#FF5511BB" MarkerStroke="Black" Title="Legend item 3" />
    </telerik:LegendItemCollection>
</telerik:RadLegend.Items>

但是它是硬编码的。我想将它与 MVVM 绑定。不起诉如何绑定MarkerFill和MarkerStroke。我不认为它是一个字符串属性.

ViewModel 中的它是什么类型？

编辑：

 ObservableCollection<ChartData> data = new ObservableCollection<ChartData>();
        data.Add(new ChartData() { Category = "Red", Title = "one" });
        data.Add(new ChartData() { Category = "Green", Title = "two" });
        data.Add(new ChartData() { Category = "Blue", Title = "three" });
        data.Add(new ChartData() { Category = "Aqua", Title = "four" });

Answer 1

我没有要验证的 Telerik 库，但你能试试这样吗？:

查看

<telerik:RadLegend HorizontalAlignment="Center" UseLayoutRounding="True" Items={Binding LegendItems}>
    <telerik:RadLegend.ItemTemplate>
        <DataTemplate>
            <Border Background="{Binding Category, Converter={StaticResource ColorToBrushConverter}" BorderThickness="1" BorderBrush="Black">
                <Grid>
                    <TextBlock Text="{Binding Title}" Foreground="White" Margin="15 0 0 0" />
                    <Path Width="12" 
                          Height="12" 
                          Fill="White" 
                          HorizontalAlignment="Left" Data="{Binding Data}" />
                </Grid>
            </Border>
        </DataTemplate>
    </telerik:RadLegend.ItemTemplate>
</telerik.RadLegend>

ViewModel

public class ViewModel : BindableBase // Or whatever your base is
{
    public ObservableCollection<ChartData> LegendItems 
    {
        get;
    } = new ObservableCollection<ChartData>();

    public ViewModel()
    {
        data.Add(new ChartData() { Title="Legend Item 1", Category = "Red", Title = "one", Data=".." });
        data.Add(new ChartData() { Title="Legend Item 2", Category = "Green", Title = "two", Data=".." });
        data.Add(new ChartData() { Title="Legend Item 3", Category = "Blue", Title = "three", Data=".." });
        data.Add(new ChartData() { Title="Legend Item 4", Category = "Aqua", Title = "four", Data=".." });
    }
}

转换器

public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return new BrushConverter().ConvertFromString(value?.ToString()) as Brush;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

使用 MVVM 绑定 telerik:LegendItem 的 MarkerFill 和 Title

Using MVVM to bind MarkerFill and Title of telerik:LegendItem

wpf

xaml

telerik

mvvm