Сетка наложения сверху изображения внутри ScrollViewer

Question

У меня есть следующая разметка:

<ScrollViewer>
   <StackPanel Orientation=Vertical>
      <Image />
      <Grid />
      <ItemsControl />
   </StackPanel>
</ScrollViewer>

Хорошо, поэтому изображение является анимированным загрузка GIF.Когда событие завершено, программа отображает сетку и элементы управления, а также пользователь может прокручивать вверх и вниз.

Для того, чтобы сделать это в настоящее время, я просто установил изображение на Visiblity='Collapsed' иGrid и ItemsControl до Visible.Как я могу наложить их так, чтобы изображение всегда было внизу, а сетка и элементы управления находились сверху - чтобы при исчезновении сетки и элементов управления изображение появлялось внизу?

Я знаю, чтоесть опция для Z-Index, я попытался поместить Image, Grid и ItemsControl внутри холста и установить свойство Panel.ZIndex, но оно, похоже, не сработало - для одного, когда я установил непрозрачность в Grid на .5, я не могЯ не вижу изображения внизу, а также Сетка не заполняет пространство (мне нужно, чтобы оно растянулось до размера формы).

Answer 1

Это должно работать:

<ScrollViewer>
    <Grid>
        <Image/>
        <StackPanel>
            <Grid/>
            <ItemsControl/>
        </StackPanel>
    </Grid>
</ScrollViewer>