如何在WPF Toolkit图表区域和绘图区域之间去除空白？

Question

如何在WPF Toolkit图表区域和绘图区域之间去除空白？

12

我正在使用chartingToolKit:Chart控件。我想删除出现在图表和绘图区域之间的空白。附上WPF示例和需要删除的区域的图像。

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">


<Grid>
    <chartingToolkit:Chart x:Name="chart" Width="500" Height="300" Margin="0, 0, 0, 0"   LegendStyle="{StaticResource LegendStyle}"   >


        <chartingToolkit:AreaSeries ItemsSource="{Binding}"  

                                   DependentValuePath="Value"

                                   IndependentValuePath="Key"

                                   Background="Red"

                                    >


        </chartingToolkit:AreaSeries>

        <chartingToolkit:Chart.Axes>
            <chartingToolkit:LinearAxis Orientation="X" ShowGridLines="False" Visibility="Hidden">

            </chartingToolkit:LinearAxis>
            <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="False" Visibility="Hidden"/>
        </chartingToolkit:Chart.Axes>

    </chartingToolkit:Chart>
</Grid>

必须移除红色箭头所标识的区域 alt text

- user90150

2个回答

-1

如果你想要在不重新设计控件模板的情况下获得更多的空间，可以将图表控件的Margin（如你所做的）和 Padding设置为零。

Margin="0" Padding="0"

- MoMo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ColinE · Accepted Answer

为了实现这一点，您需要重新设置图表的模板。标准的图表模板如下所示：

            <ControlTemplate TargetType="charting:Chart">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <datavis:Title Content="{TemplateBinding Title}" Style="{TemplateBinding TitleStyle}" />

                        <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                        <Grid Grid.Row="1" Margin="0,15,0,15">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <datavis:Legend x:Name="Legend" Title="{TemplateBinding LegendTitle}" Style="{TemplateBinding LegendStyle}" Grid.Column="1" />
                            <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
                            </chartingprimitives:EdgePanel>
                        </Grid>
                    </Grid>
                </Border>
            </ControlTemplate>

这里详细说明了图表区域、标题、图例等的位置。它还包括一个硬编码的边距，使得您无法通过简单地设置样式来实现所需的效果。如果你只需要一个图表区域而没有其他内容，你可以使用以下代码简化图表模板：

xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"

<Grid>
  <chartingToolkit:Chart x:Name="chart" Width="500" Height="300"
                         Margin="0, 0, 0, 0" Padding="0">
    <chartingToolkit:AreaSeries ItemsSource="{Binding}"  
                                  DependentValuePath="Value"
                                  IndependentValuePath="Key"
                                  Background="Red">
    </chartingToolkit:AreaSeries>
    <chartingToolkit:Chart.Axes>
      <chartingToolkit:LinearAxis Orientation="X" ShowGridLines="False" Height="0">
      </chartingToolkit:LinearAxis>
      <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="False" Width="0"/>
    </chartingToolkit:Chart.Axes>
    <chartingToolkit:Chart.Template>
      <ControlTemplate TargetType="chartingToolkit:Chart">
        <Border Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}">
          <Grid>
            <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
              <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
              <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="1" />
            </chartingprimitives:EdgePanel>
          </Grid>
        </Border>
      </ControlTemplate>
    </chartingToolkit:Chart.Template>
  </chartingToolkit:Chart>
</Grid>

这将移除你所看到的填充。