如果我有来自 LiveCharts 的图表,我无法将元素添加到我的 GUI
I cannot add elements to my GUI if I have a chart from LiveCharts
现在图表不能再调整大小了,我认为这与 RowDefinitions 有关 (*) 我知道需要 space 左边,但我想在我的图表下面放一些其他的东西。如果我理解正确的话,你必须按照你想要的元素顺序放置你的行和列
<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
你必须得到相对于CartesianChart
的屏幕点,否则返回的位置是相对于MainWindow
的(因为你通过了this
)。
阅读 以获得更详细的解释。
我还简化了你的代码:
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
}
例子Grid
请注意,*
的 row/column height/width 将强制 row/column 拉伸以占据最大值 space Window
增长。 *
是默认值。 Auto
的大小会强制 row/column 根据内容调整其大小。
当使用 rows/columns 时,可以通过指定 Grid.RowSpan
/Grid.ColumnSpan
.
让控件跨越多个 rows/columns
为了允许图表增长,包含图表的行的高度设置为 *
。所有其他行都设置为 Auto
.
为了让图表延伸到整个 Grid
,Grid.ColumnSpan
设置为 3(因为 Grid
包含三个列)。
以下示例基于您发布的图片:
<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>
现在图表不能再调整大小了,我认为这与 RowDefinitions 有关 (*) 我知道需要 space 左边,但我想在我的图表下面放一些其他的东西。如果我理解正确的话,你必须按照你想要的元素顺序放置你的行和列
<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
你必须得到相对于CartesianChart
的屏幕点,否则返回的位置是相对于MainWindow
的(因为你通过了this
)。
阅读
我还简化了你的代码:
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
}
例子Grid
请注意,*
的 row/column height/width 将强制 row/column 拉伸以占据最大值 space Window
增长。 *
是默认值。 Auto
的大小会强制 row/column 根据内容调整其大小。
当使用 rows/columns 时,可以通过指定 Grid.RowSpan
/Grid.ColumnSpan
.
为了允许图表增长,包含图表的行的高度设置为 *
。所有其他行都设置为 Auto
.
为了让图表延伸到整个 Grid
,Grid.ColumnSpan
设置为 3(因为 Grid
包含三个列)。
以下示例基于您发布的图片:
<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>