Как удалить пространство между областью диаграммы WPF Toolkit и областью графика?

Я использую 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>

Область, отмеченная красной стрелкой, должна быть удалена

Ответ 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>

Это приведет к удалению прокладки, которую вы видите.

Ответ 2

Чтобы дать вам немного больше места без повторного шаблонирования элемента управления, установите для параметра Margin (как и вы) и Padding элемента управления диаграммы значение 0.

Margin="0" Padding="0"