CODEWITHSUNDEEP
c#wpfimage
Krusty40k
Krusty40k

Reputation: 87

How do I limit the Image size to its parent container

I am doing my first WPF-Project with the MVVM-Model. I have got two views that i want to look like that:

Thats what it should look like

But sadly the images do not shrink to parent size, they stay in original size:

Thats what it does look like

Views.PictureList

<UserControl x:Class="BIF.Views.PictureList"
         xmlns:view="clr-namespace:BIF.Views"
         d:DesignHeight="120" d:DesignWidth="300">

    <ListBox ItemsSource="{Binding List}" <!-- List<PictureViewModel> -->
        ScrollViewer.VerticalScrollBarVisibility="Hidden" 
        SelectedItem="{Binding CurrentPicture, Mode=TwoWay}" SelectionMode="Single">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ListBoxItem>
                    <view:Picture DataContext="{Binding}" />
                </ListBoxItem>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</UserControl>

Views.Picture

<UserControl x:Class="BIF.Views.Picture"
         d:DesignHeight="200" d:DesignWidth="200">
    <Border BorderBrush="Black" BorderThickness="1" CornerRadius="4">
        <Image Source="{Binding FilePath}"/>
    </Border>
</UserControl>

I have already tried to set height of view:Picture manualy by adding:

Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=ActualHeight}"

But thats not working 100% correct and I also do not want to set a fix height, because I want the PictureList to be resizeable.

Any suggestions are welcome.

Upvotes: 2

Views: 2713

Answers (3)

Krusty40k
Krusty40k

Reputation: 87

Two litte changes and everything works wonderfull now.

  1. ScrollViewer.VerticalScrollBarVisibility="Disabled"

  2. No ListItem in the DataTemplate

    <ListBox ItemsSource="{Binding List}" <!-- List<PictureViewModel> -->
    ScrollViewer.VerticalScrollBarVisibility="Disabled" 
    SelectedItem="{Binding CurrentPicture, Mode=TwoWay}" SelectionMode="Single">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- No ListItem here -->
            <view:Picture DataContext="{Binding}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Thank you guys!

Upvotes: 0

Muds
Muds

Reputation: 4116

StackPanel does not limit the size of container and hence all the space is available to its child elements.

You should either set limits to your stack panel or use a better control for this case, may be a Grid.

Let me know if you need help in that.

Upvotes: 1

Ra&#250;l Nu&#241;o
Ra&#250;l Nu&#241;o

Reputation: 313

You have to set ScrollViewer.VerticalScrollBarVisibility to "Disabled" since the "Hidden" value gives the content infinite space in the vertical direction, that's all.

Upvotes: 3

Related Questions