Windows 8 如何设置绑定&；使用帮助WinRT XAML Toolkit将动态值转换为动态折线系列图表？

更新1

我发现setter中的绑定在WinRT中不起作用。所以我从这里得到了一个助手类

所以我的装订是这样的

<charting:Chart x:Name="LineChart" Title="Line Chart" Margin="70,0">
    <charting:LineSeries
                Title="Population 1"
                IndependentValueBinding="{Binding Name}"
                DependentValueBinding="{Binding Value}"
                IsSelectionEnabled="True">
            <charting:LineSeries.DataPointStyle>
                <Style TargetType="charting:LineDataPoint">
                    <Setter Property="Width" Value="17" />
                    <Setter Property="Height" Value="17" />
                    <Setter Property="Background" Value="Lime"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="charting:LineDataPoint">
                                <Grid>
                                    <ToolTipService.ToolTip>
                                            <ContentControl>
                                                <TextBlock TextAlignment="Center">
                                                    <Run Text="{Binding SeriesName}" />
                                                    <LineBreak />
                                                    <Run Text="{Binding Value,Converter={StaticResource MyConverter},ConverterParameter=TEST}" />
                                                </TextBlock>
                                            </ContentControl>
                                    </ToolTipService.ToolTip>
                                    <Ellipse Fill="Lime" Stroke="Lime" StrokeThickness="3" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </charting:LineSeries.DataPointStyle>
        </charting:LineSeries>
</charting:Chart>

应该是工作，但不是为我工作。

<Setter Property="helper:SetterValueBindingHelper.PropertyBinding">
    <Setter.Value>
        <helper:SetterValueBindingHelper
        Type="WinRTXamlToolkit.Controls.DataVisualization.Charting.LineDataPoint, WinRTXamlToolkit.Controls.DataVisualization, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
        Property="Background"
        Binding="{Binding Color}"/>
    </Setter.Value>
</Setter>

---

我需要在WinRT XAML工具包的帮助下在图表中创建

n

线条系列。我想使用线颜色的自定义样式，自定义数据点样式和自定义工具提示。如果我有固定数量的系列，我会这样做

<charting:Chart x:Name="LineChart" Title="Line Chart" Margin="70,0">
    <charting:LineSeries
                Title="Population 1"
                IndependentValueBinding="{Binding Name}"
                DependentValueBinding="{Binding Value}"
                IsSelectionEnabled="True">
            <charting:LineSeries.DataPointStyle>
                <Style TargetType="charting:LineDataPoint">
                    <Setter Property="Width" Value="17" />
                    <Setter Property="Height" Value="17" />
                    <Setter Property="Background" Value="Lime"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="charting:LineDataPoint">
                                <Grid>
                                    <ToolTipService.ToolTip>
                                            <ContentControl>
                                                <TextBlock TextAlignment="Center">
                                                    <Run Text="{Binding SeriesName}" />
                                                    <LineBreak />
                                                    <Run Text="{Binding Value,Converter={StaticResource MyConverter},ConverterParameter=TEST}" />
                                                </TextBlock>
                                            </ContentControl>
                                    </ToolTipService.ToolTip>
                                    <Ellipse Fill="Lime" Stroke="Lime" StrokeThickness="3" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </charting:LineSeries.DataPointStyle>
        </charting:LineSeries>
</charting:Chart>

现在这里的工具提示内容和线条及数据点的颜色将是动态的，即颜色将是随机的，工具提示内容将来自绑定。现在，为了创建DynamicLineSeries，我尝试了代码隐藏方法，但在从代码隐藏绑定工具提示内容时遇到了问题。请参阅我的代码隐藏方法

<charting:Chart x:Name="LineChart" Title="Line Chart" Margin="70,0" />

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LineSeries line;
    GenerateColors(20); //suppose I need to create 20 line series, that is dynamic value.
    for (int i = 0; i < 20; i++)
    {
        line = new LineSeries();
        line.Title = string.Format("Line [{0}]", i.ToString());
        line.IndependentValueBinding = GetBinding("Name");
        line.DependentValueBinding = GetBinding("Value");
        line.ItemsSource = GetItems();
        line.DataPointStyle = GetDataPointStyle(i);
        this.LineChart.Series.Add(line);
    }
}

private List<NameValueItem> GetItems()
{
    List<NameValueItem> items = new List<NameValueItem>();
    items.Add(new NameValueItem { Name = "Test1", Value = _random.Next(10, 100) });
    items.Add(new NameValueItem { Name = "Test2", Value = _random.Next(10, 100) });
    items.Add(new NameValueItem { Name = "Test3", Value = _random.Next(10, 100) });
    items.Add(new NameValueItem { Name = "Test4", Value = _random.Next(10, 100) });
    items.Add(new NameValueItem { Name = "Test5", Value = _random.Next(10, 100) });

    return items;
}

private Style GetDataPointStyle(int ColorIndex)
{
    Style style = new Style();
    style.TargetType = typeof(LineDataPoint);

    style.Setters.Add(new Setter(LineDataPoint.WidthProperty, 17));
    style.Setters.Add(new Setter(LineDataPoint.HeightProperty, 17));
    style.Setters.Add(new Setter(LineDataPoint.BackgroundProperty, GetColorBrush(ColorIndex)));

    return style;
}

受保护的覆盖无效OnNavigatedTo（NavigationEventArgs e）
{
系列线；
GenerateColors（20）；//假设我需要创建20行序列，即动态值。
对于（int i=0；i<20；i++）
{
line=新的LineSeries（）；
line.Title=string.Format（“line[{0}]”，i.ToString（））；
line.IndependentValueBinding=GetBinding（“名称”）；
line.DependentValueBinding=GetBinding（“值”）；
line.ItemsSource=GetItems（）；
line.DataPointStyle=GetDataPointStyle（i）；
此.LineChart.Series.Add（行）；
}
}
私有列表GetItems（）
{
列表项=新列表（）；
Add（newnameValueItem{Name=“Test1”，Value=_random.Next（10100）}）；
Add（newnameValueItem{Name=“Test2”，Value=_random.Next（10100）}）；
Add（newnameValueItem{Name=“Test3”，Value=_random.Next（10100）}）；
Add（newnameValueItem{Name=“Test4”，Value=_random.Next（10100）}）；
添加（新的NameValueItem{Name=“Test5”，Value=_random.Next（10100）}）；
退货项目；
}
私有样式GetDataPointStyle（int ColorIndex）
{
样式=新样式（）；
style.TargetType=typeof（LineDataPoint）；
添加（新的Setter（LineDataPoint.WidthProperty，17））；
添加（新的Setter（LineDataPoint.HeightProperty，17））；
添加（新的Setter（LineDataPoint.BackgroundProperty，GetColorBrush（ColorIndex））；
回归风格；
}

我还尝试用xaml和bind color创建数据点的全局样式，但当我这样做时，线没有得到颜色，只有点得到颜色。下面给出了这种方法

<Page.Resources>
    <converter:MyConverter x:Key="MyConverter" />
    <Style TargetType="charting:LineDataPoint" x:Key="MyDataPointStyle">
        <Setter Property="Width" Value="17" />
        <Setter Property="Height" Value="17" />
        <Setter Property="Background" Value="{Binding Color}"/>
        <!-- ABOVE BINDING IS NOT WORKING, IF I PASS HARD CODED VALUE IT'S GETTING -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="charting:LineDataPoint">
                    <Grid>
                        <ToolTipService.ToolTip>
                            <ContentControl>
                                <TextBlock TextAlignment="Center">
                                    <Run Text="{Binding SeriesName}" />
                                    <LineBreak />
                                    <Run Text="{Binding Value,Converter={StaticResource MyConverter},ConverterParameter=TEST}" />
                                </TextBlock>
                            </ContentControl>
                        </ToolTipService.ToolTip>
                        <Ellipse Fill="{Binding Color}" Stroke="{Binding Color}" StrokeThickness="3" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LineSeries line;
    GenerateColors(20); //suppose I need to create 20 line series, that is dynamic value.
    for (int i = 0; i < 20; i++)
    {
        line = new LineSeries();
        line.Title = string.Format("Line [{0}]", i.ToString());
        line.IndependentValueBinding = GetBinding("Name");
        line.DependentValueBinding = GetBinding("Value");
        line.ItemsSource = GetItems();
        //line.DataPointStyle = GetDataPointStyle(i);
        line.DataPointStyle = this.Resources["MyDataPointStyle"] as Style;
        this.LineChart.Series.Add(line);
    }
}

受保护的覆盖无效OnNavigatedTo（NavigationEventArgs e）
{
系列线；
GenerateColors（20）；//假设我需要创建20行序列，即动态值。
对于（int i=0；i<20；i++）
{
line=新的LineSeries（）；
line.Title=string.Format（“line[{0}]”，i.ToString（））；
line.IndependentValueBinding=GetBinding（“名称”）；
line.DependentValueBinding=GetBinding（“值”）；
line.ItemsSource=GetItems（）；
//line.DataPointStyle=GetDataPointStyle（i）；
line.DataPointStyle=this.Resources[“MyDataPointStyle”]作为样式；
此.LineChart.Series.Add（行）；
}
}

检查是否如我在注释中所述将绑定属性所有者类型更改为Control，如果不起作用-查看

LineDataPoint的模板

-它有以下部分：

<Ellipse
    Stroke="{TemplateBinding BorderBrush}"
    Fill="{TemplateBinding Background}" />

---

我会检查LineDataPoint上是否有后台属性，也许您需要将定义它的基类型上的属性作为目标-Control？我尝试了

Control

作为类型，它不起作用。没有错误，也没有输出。我已经对

{Binding Color}

完成了

eliple

的

模板绑定。它的显示已经有问题了，但是由于有太多的问题代码，它没有引起您的注意。哦，对了。现在，您可以尝试对LineSeries执行与我所说的相同的操作。如何处理
LineSeries
？抱歉，我不明白。LineSeries的样式包含需要绑定的多段线。让我更新答案：嘿，菲利普，我真的很抱歉给您带来不便，但我实际上需要问题的帮助[请阅读整个讨论]，当前问题是使用计时器解决的（superhack:D）
<Ellipse
    Stroke="{TemplateBinding BorderBrush}"
    Fill="{TemplateBinding Background}" />

<Polyline
    Points="{TemplateBinding Points}"
    Stroke="{TemplateBinding Background}"
    Style="{TemplateBinding PolylineStyle}" />