Image height inside Stack Panel

3
votes

I'm designing a imaging gallery with Scroll Viewer and Stack Panel in WPF like the following:

<ScrollViewer x:Name="ShopsScroll" Grid.Row="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
        <StackPanel x:Name="stackPanel" Margin="0" Orientation="Horizontal" Height="Auto">
            <Image Source="Images/1F/L1_angesb.jpg"/>
            <Image Source="Images/1F/L1_chanel.jpg"/>
            <Image Source="Images/1F/L1_dior.jpg"/>
            <Image Source="Images/1F/L1_gucci.jpg"/>
            <Image Source="Images/1F/L1_LV.jpg"/>
            <Image Source="Images/1F/L1_nike.jpg"/>
</StackPanel>

Since the image is large in size, I would like to resize them to fit the height of the StackPanel. However, when I set the value of height in StackPanel as "Auto", it just used the height of the image, not its parent ScrollViewer. If I set a fix value to StackPanel, the problem seems being fixed, but I need to use my application in different size of screen in full screen. Thus, it should adapt different size but not hard code a fix value.

How I I do it?

2
c#.netwpf

2 Answers

1
votes

You could use an element binding to bind the height of your images to the height of the StackPanel element. Sorry I can't test this code right now, but try something like

<Image Source="Images/1F/L1_nike.jpg" Height="{Binding ElementName=ShopsScroll, Path=Height}" />

See MSDN documentation on the Binding.ElementName property.

This property is useful when you want to bind to the property of another element in your application. For example, if you want to use a Slider to control the height of another control in your application, or if you want to bind the Content of your control to the SelectedValue property of your ListBox control.

0
votes

Try to set HorizontalAlignment = "Stretch" and VerticalAlignment = "Stretch" for stackpanel

In my opinion better to have ItemsControl with images in it in your case

<ItemsControl HorizontalContentAlignment="Stretch">
            <Image Source="Images/1F/L1_angesb.jpg"/>
            <Image Source="Images/1F/L1_chanel.jpg"/>
            <Image Source="Images/1F/L1_dior.jpg"/>
            <Image Source="Images/1F/L1_gucci.jpg"/>
            <Image Source="Images/1F/L1_LV.jpg"/>
            <Image Source="Images/1F/L1_nike.jpg"/>

</ItemsControl>

Hope this helps