如何获得与窗口大小成比例显示的图像？

Question

I have a 333x 344 pixel image that I am displaying in WPF and it always displays the same size irrespective of the size of the window. Image is inside a dockpanel but changing dockpanel to grid didn't help.

How can I get it in proportion to the size of the window?

<Window>
<ScrollViewer>
<ItemSontrol>
<Usercontrol>
<Grid>
<DockPanel>
<Image/>
</DockPanel>
</Grid>
</Usercontrol>
</ItemSontrol>
</ScrollViewer>
</Window>

or

<ItemSontrol>
<Usercontrol>
<Grid>
<Grid>
<Image/>
</Grid>
</Grid>
</Usercontrol>
</ItemSontrol>

Edit: Below didn't fix the size. DockPanel/Grid surrounding the image can be replaced with any other layout panels. Others cannot be changed.

img.Stretch = Stretch.None 

Answer 1

将图像嵌入到ViewBox中 ，并确保其父级将其大小限制为相应的窗口（例如Grid ）

Answer 2

从xaml代码中的图像中删除宽度，高度，VerticalAligment和Horizo​​ntalAlignment属性。

Answer 3

The default ItemsPanel for ItemsControl is a StackPanel , which restricts the space used by items in the direction of the "stack" (vertical by default). If you set the Stretch to Fill you would probably see it stretch to fill the horizontal space. A solution would be to change the panel template to a grid:

<ItemsControl>
    <ItemsControl.ItemsPanelTemplate>
        <ItemsPanelTemplate>
            <Grid />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanelTemplate>

    <UserControl>
        ...
    </UserControl>
</ItemsControl>

But in this case it wouldn't make sense to use an ItemsControl at all because you are filling the whole area with a single item. The UserControl is now the first item in the items collection and any additional items will be stacked on top it in a grid (unless you add row/column definitions to the panel template grid and define Grid.Row and Grid.Column on the items). Are you trying to create a background or container for list items? In that case you should probably be defining the ItemsControl 's ControlTemplate instead.