CODEWITHSUNDEEP
c#.netwpfimagexaml
user2330678
user2330678

Reputation: 2311

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

enter image description here

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

Upvotes: 1

Views: 108

Answers (3)

nmclean
nmclean

Reputation: 7734

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.

Upvotes: 0

Chris W.
Chris W.

Reputation: 23290

Embed the image in a ViewBox and make sure its parent will restrict its size to the respective window (like a Grid)

Upvotes: 1

Guilherme
Guilherme

Reputation: 5351

Remove the width, height, VerticalAligment and HorizontalAlignment properties from the image in the xaml code.

Upvotes: 0

Related Questions