WPF Image display issue in a UserControl

Question

Hi,

In my application i have created a user control with an Image and a Label. Height of my UserControl is set to 20. Here is my code for the user control.

<Border BorderBrush="Green" BorderThickness="1">
        <StackPanel Orientation="Horizontal">
            <Border BorderBrush="Red" BorderThickness="1" >
                <Image x:Name="imageBit" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="12" Width="12" >
                </Image>
            </Border>
            <Label x:Name="labelCaption" HorizontalAlignment="Left" >
            </Label>
        </StackPanel>
    </Border>

I am assigning the Image Source programmatically. I have many such UserControls Embbeded  in a Expander control and there are more than one Expander control in my window. The problem is for some images in few Exoander control the image is shown as a line with single pixel width.

Height and width of my image (600*600) is very much bigger than the image height & width (12*12). What's the problem with my code, why i cant see the complete image in the User control?

Thanks in advance,

IamHuM

Answer 1

Having both Height and width as well as Horizontal and vertical "Stretch" doesn't make sense, use either one or the other but not both.

You can try to remove the StackPanel and replace it with a Grid that has the correct number of rows and columns.  Grids play nice with layout rendering, stackpanels can, but sometimes the rendering you want is too difficult.

Keep playing around with it you'll get there.  I've learned some tricks with respect to layout.  I try to keep the parent containers like the borders and grids set to Height and Width of Auto.  Then the inner controls are the ones I put specific widths and heights where needed.

---

JP Cowboy Coders Unite!

Answer 2

Hi,

I cannot tell for sure what is happening. I suppose you can try the ViewBox to make images fit in regardless of the actual sizes.

        <Viewbox Height="12" Width="12">
            <Image Source="/MyAssembly;Component/MyImage.png" />
        </Viewbox>

Regards,

Answer 3

Hi All,

Thanks for the reply. I tried few things here.

My code works if i change the Height and Width of Image control to 64*64 or more.

Similarly my code works if i change the image size from 600*600 to 32*32. So i think its something related to Image Size and the Control size ratio.

Not sure if i am correct, can anyone please suggest something.

Thanks,

IamHuM

Answer 4

The design of how WPF lays out controls is very complex.  Your code above shows no reason to be giving you the problem you report.  However, we are not seeing the entire user control that it is embedded or how the multiple user controls are used.  This was one reason I recommended the Grid over the stack panel.  (Better layout control).  It doesn't make any sense that you are having these problems based on what has been shown.  It is more likely to be something else.  Maybe you can post more markup?

---

JP Cowboy Coders Unite!

Answer 5

You could try setting the "imageBit" Stretch.

<Image x:Name="imageBit" Height="12" Width="12" Stretch="Fill" />

Which should work regardless of the original image size.

Your description of the original problem sounds as if somehow it is being set to "UniformToFill" instead of "Fill".

Hope you get it worked out.

~Christine

---

My Gallery