silverlight - 如何设置图表样式以省略图表周围的多余图表区域

Question

我正在使用来自http://silverlight.codeplex.com/的 Silverlight Toolkit，并且在样式方面存在问题。根据微软的文档，我看到该图表由 4 个基本组件组成。

1. ChartAreaStyle ==> 网格
2. LegendStyle ==> Legend（类似于带有标题的 ItemsControl 的控件）
3. PlotAreaStyle ==> 网格
4. TitleStyle ==> 标题（一个内容控件）

参考http://msdn.microsoft.com/en-us/expression/dd433476.aspx

我的问题是

如何用图表本身填充图表容器，而不是有一个空的周围区域，如果可能的话省略图例？

我仍在尝试围绕 xaml 和控制模板等进行思考。我知道它可能可以使用它来完成，我只是不知道如何。

这是我要实现的目标的示例：

这是它现在的样子：

Answer 1

所以我从 Toolkit 源代码中复制了 Chart 控件的样式，并从模板中删除了多余的元素。

样式定义如下所示：

<UserControl.Resources>
    <Style x:Key="ChartWithoutPaddings" TargetType="chart:Chart">
        <Setter Property="Padding" Value="0" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ChartAreaStyle">
            <Setter.Value>
                <Style TargetType="Panel">
                    <Setter Property="MinWidth" Value="100" />
                    <Setter Property="MinHeight" Value="20" />
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chart:Chart">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                            <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                        </chartingprimitives:EdgePanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="EmptyDataPoint" TargetType="Control">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Template" Value="{x:Null}" />
    </Style>

    <Style x:Key="OnePixelLine" TargetType="Polyline">
        <Setter Property="StrokeThickness" Value="1" />
    </Style>   
</UserControl.Resources>

您还应该隐藏轴并指定图表的高度和宽度：

<chart:Chart Style="{StaticResource ChartWithoutPaddings}"
             VerticalAlignment="Center" HorizontalAlignment="Center"
             Width="200" Height="30">
    <chart:LineSeries ItemsSource="{Binding Items}" IndependentValuePath="Title" DependentValuePath="Value" 
                      DataPointStyle="{StaticResource EmptyDataPoint}" PolylineStyle="{StaticResource OnePixelLine}"  />

    <chart:Chart.Axes>
        <chart:CategoryAxis Orientation="X" Height="0" Opacity="0" />
        <chart:LinearAxis Orientation="Y" Width="0" Opacity="0" />
    </chart:Chart.Axes>
</chart:Chart>