wpf 如何使用 zindex 使控件在网格中正确重叠

how to get controls to overlap correctly in grid using zindex

提问by James Joshua Street

So I'm trying to make my axis plane get drawn in the ScrollViewer, and then I want to come in and draw a list of signals over the space in which the axis was drawn, so that the signals go on top of the axis. I thought the correct thing was to use ZIndex, but I must be doing something wrong.

所以我试图让我的轴平面被绘制在 中ScrollViewer，然后我想进来并在绘制轴的空间上绘制一个信号列表，以便信号在轴的顶部。我认为正确的做法是使用ZIndex，但我一定是做错了什么。

http://picpaste.com/signalgraph1-HSFHBYOG.JPG

http://picpaste.com/signalgraph1-HSFHBYOG.JPG

Basically, it looks like the axis is of the size of ScrollViewerlike I want, but then the StackPanelis being placed after the axis, instead of being placed 75 units down like I expect.

基本上，看起来轴的大小ScrollViewer和我想要的一样，但是然后StackPanel它被放置在轴之后，而不是像我期望的那样放置在 75 个单位下方。

Why is this happening? How can I get the behavior I want?

为什么会这样？我怎样才能得到我想要的行为？

            <ScrollViewer 
                x:Name="signal_scrollviewer"
                Focusable="False"
                CanContentScroll="False">
              <Grid>
                <Grid.RowDefinitions>
                  <RowDefinition Height="75" />
                  <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <wpfExp:SignalGraphAxis Grid.ZIndex="1"
                                        Grid.Row="0"
                                        Grid.RowSpan="2"
                                        x:Name="signal_axis"
                                        Height="{Binding ElementName=signal_scrollviewer, Path=ActualHeight}"
                                        signal_graph_window_width="{Binding RelativeSource = {RelativeSource AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}" 
                                        GraphHeight ="{Binding ElementName=graph_viewer, Path=GraphHeight, Mode=OneWay}"
                                        PenColor="{Binding ElementName=GraphColorPicker, Path=SelectedColor, Mode=OneWay}"
                                        PenWidth="{Binding ElementName=graph_viewer, Path=GraphPenWidth, Mode=OneWay}"
                                        X_Scale="{Binding ElementName=graph_viewer, Path=X_Scale, Mode=OneWay}"
                                        MaxTimeValue="{Binding ElementName=graph_viewer, Path=_SignalDataViewModel.MaxTimeValue, Mode=OneWay}"
                    />
                <StackPanel Background="Transparent" Grid.ZIndex="2" Grid.Row="1">
                  <ItemsPresenter />
                </StackPanel>
              </Grid>
            </ScrollViewer>

回答by Vidas Vasiliauskas

Viv is writing a good solution but you need to set Grid.RowSpan="2"to the StackPanelelement and everything will work fine.

VIV正在写一个很好的解决方案，但你需要设置Grid.RowSpan="2"的StackPanel元素，一切都将正常工作。

<ScrollViewer 
            x:Name="signal_scrollviewer"
            Focusable="False"
            CanContentScroll="False">
          <Grid>
            <wpfExp:SignalGraphAxis 
                                    x:Name="signal_axis"
                                    Height="{Binding ElementName=signal_scrollviewer, Path=ActualHeight}"
                                    signal_graph_window_width="{Binding RelativeSource = {RelativeSource AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}" 
                                    GraphHeight ="{Binding ElementName=graph_viewer, Path=GraphHeight, Mode=OneWay}"
                                    PenColor="{Binding ElementName=GraphColorPicker, Path=SelectedColor, Mode=OneWay}"
                                    PenWidth="{Binding ElementName=graph_viewer, Path=GraphPenWidth, Mode=OneWay}"
                                    X_Scale="{Binding ElementName=graph_viewer, Path=X_Scale, Mode=OneWay}"
                                    MaxTimeValue="{Binding ElementName=graph_viewer, Path=_SignalDataViewModel.MaxTimeValue, Mode=OneWay}"
                />
            <StackPanel Background="Transparent" Margin="0 75 0 0">
              <ItemsPresenter />
            </StackPanel>
          </Grid>
        </ScrollViewer>

回答by James Joshua Street

So when I changed this binding:

所以当我改变这个绑定时：

Height="{Binding ElementName=signal_scrollviewer, Path=ActualHeight}"

to bind Heightinstead of ActualHeight, it appears to be working. I'm a little confused as to how the interactions could have caused what I saw though.

绑定Height而不是ActualHeight，它似乎正在工作。我对交互如何导致我所看到的感到有些困惑。