I cannot add elements to my GUI if I have a chart from LiveCharts

Question

Now the chart can not resize anymore I think is has to do with the RowDefinitions (*) I understand that takes the space left, but I want to put some other stuff below my chart. If I understood correctly you have to put your rows and columns in the order you want your elements

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Row="0" Grid.Column="0"
          Orientation="Horizontal"
          Margin="0,0,12,0">
        <StackPanel>
            <TextBlock Text="ComboBox1 Label" />
            <ComboBox />
        </StackPanel>
        <StackPanel>
            <TextBlock Text="ComboBox2 Label" />
            <ComboBox />
        </StackPanel>
    </StackPanel>

    <StackPanel Grid.Row="0" Grid.Column="1"
          Orientation="Horizontal"
          VerticalAlignment="Bottom"
          Margin="0,0,12,0">
        <RadioButton Content="Text" />
        <RadioButton Content="Text" />
        <RadioButton Content="Text" />
    </StackPanel>

    <StackPanel Grid.Row="1" Grid.Column="2"
          HorizontalAlignment="Left">
        <TextBlock Text="Button Label" />
        <Button Content="Text" />
    </StackPanel>

    <!--CartesianChart Grid.Row="2" 
              Grid.Column="0" 
              Grid.ColumnSpan="3" /-->

    <StackPanel Grid.Row="3" Grid.Column="0">
        <TextBlock Text="Button Label" />
        <Button Content="Text" />
    </StackPanel>

    <lvc:CartesianChart Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Left" Height="100" Margin="129,136.2,0,0" VerticalAlignment="Top" Width="100"/>
</Grid>

I wanted something like this

Answer 1

You must get the screen point relative to the CartesianChart otherwise the position returned is relative to the MainWindow(because you passed this).
Read this for a little more detailed explanation.

I also simplified your code:

public ObservablePoint MovingPoint { get; set; }

private void ChartOnDataClick(object sender, ChartPoint p) //click on point
{
  var observablePointIndex = this.diagram.Series[0].Values
    .GetPoints(this.diagram.Series[0].Model.View)
    .ToList()
    .IndexOf(p);
  this.MovingPoint = this.diagram.Series[0].Values[observablePointIndex] as ObservablePoint;
}

private void ChartOnMouseMove(object sender, MouseEventArgs e)
{
  if (this.MovingPoint == null
      || e.LeftButton != MouseButtonState.Pressed)
    return;

  Point newPoint = this.diagram.ConvertToChartValues(e.GetPosition(this.diagram));
  this.MovingPoint.X = newPoint.X;
  this.MovingPoint.Y = newPoint.Y;
}

private void ChartOnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  this.MovingPoint = null; // deactivate point moving
}

---

Example Grid

Note that a row/column height/width of * will force the row/column to stretch to occupy max space when the parent e.g. a Window grows. * is the default value. A size of Auto forces the row/column to adjust its size to the content.

When using rows/columns it is possible to let a control stretch across multiple rows/columns by specifying Grid.RowSpan/Grid.ColumnSpan.

To allow the chart to grow, the row's height that contains the chart is set to *. All other rows are set to Auto.

To allow the chart to stretch across the full Grid, the Grid.ColumnSpan is set to 3 (because the Grid contains three columns).

The following example is based on your posted image:

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>

  <StackPanel Grid.Row="0" Grid.Column="0"
              Orientation="Horizontal"
              Margin="0,0,12,0">
    <StackPanel>
      <TextBlock Text="ComboBox1 Label" />
      <ComboBox />
    </StackPanel>
    <StackPanel>
      <TextBlock Text="ComboBox2 Label" />
      <ComboBox />
    </StackPanel>
  </StackPanel>

  <StackPanel Grid.Row="0" Grid.Column="1"
              Orientation="Horizontal"
              VerticalAlignment="Bottom"
              Margin="0,0,12,0">
    <RadioButton Content="Text" />
    <RadioButton Content="Text" />
    <RadioButton Content="Text" />
  </StackPanel>

  <StackPanel Grid.Row="1" Grid.Column="2"
              HorizontalAlignment="Left">
    <TextBlock Text="Button Label" />
    <Button Content="Text" />
  </StackPanel>

  <CartesianChart Grid.Row="2" 
                  Grid.Column="0" 
                  Grid.ColumnSpan="3" />

  <StackPanel Grid.Row="3" Grid.Column="0">
    <TextBlock Text="Button Label" />
    <Button Content="Text" />
  </StackPanel>
</Grid>