MVVMを使用してMarkerFillとTitleのバインドを行う：LegendItem

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のどのタイプですか？

EDIT：

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(); 
    } 
}