Question

我有以下标记：

const upload = multer(
{
  dest: UPLOAD_PATH,
  fileFilter: function(req, file, cb) {
    const filetypes = /wave|wav/;
    const mimetype = filetypes.test(file.mimetype);
    const extname = filetypes.test(
        path.extname(file.originalname).toLowerCase());
    cb(null, (mimetype && extname));
  },
}
);

router.post('/', upload.single('wave'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(415).send('Only audio/wav files are supported.');
  }
  // Do some async task with file
  return res.sendStatus(200);
});

好的，因此图像是动态的加载 gif。事件完成后，程序将显示网格和项目控件，并且用户可以上下滚动。

目前，为了执行此操作，我只将图像设置为<ScrollViewer> <StackPanel Orientation=Vertical> <Image /> <Grid /> <ItemsControl /> </StackPanel> </ScrollViewer>，将Visiblity='Collapsed'和Grid设置为ItemsControl。如何对它们进行分层，以使图像始终位于下方，并且网格和项目控件位于顶部-以便在我淡出网格和项目控件时，图像位于下方？

我知道Z索引有一个选项，我尝试将Image，Grid和ItemsControl放在画布中并设置Panel.ZIndex属性，但它似乎没有用-当我在其中设置不透明度时网格为.5，我看不到下面的图像，并且网格也没有填充空间（我需要将其拉伸到窗体的大小）。

Answer 1

这应该有效：

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

在ScrollViewer内部的图像上方覆盖网格

1 个答案: