如何刪除WPF Toolkit圖表區域和繪圖區域之間的空間？

Question

我正在使用chartingToolKit：圖表控件。 我想刪除圖表和繪圖區域之間出現的空白區域。 附上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>

必須刪除標有紅色箭頭的區域

Answer 1

為了實現這一點，您需要重新模板圖表。 標准圖表模板如下：

            <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>

這將刪除您看到的填充。

Answer 2

為了給你一點空間而不重新模板化控件，設置邊距（如你所做） 和圖表控件的填充為零。

Margin="0" Padding="0"