Question

I have a grid inside a canvas on a tab.
The grid contains a large bitmap image,
I have(tried to) bound the size of the grid to the size of the tab and also have a five pixel margin around the grid.

imageTab.cs

    public ImageTab(SendInfo sendInfo, int numImge, int numAccs)
    {
        imageDisplay = new ImageDisplay(sendInfo, numImge, numAccs);
        imageDisplay.ClipToBounds = true;
        CreateCanvas();
    }

    private void CreateCanvas()
    {
        Canvas canvas = new Canvas();
        canvas.Children.Add(imageDisplay);
        this.AddChild(canvas);
    }

ImageDisplay.xaml

<UserControl x:Class="MyProj.ImageDisplay">

      <Grid Margin="5,5,5,5" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabControl, AncestorLevel=1}, Path=ActualHeight}">
          <Image/>
      </Grid>

</UserControl>

The grid comes off the bottom of the tab area slightly causing the bottom of the image to be cut off.
Is there a problem with my databinding, do I need to apply some sort of offset to it? (size of tab – 10pixels for the margin?)

Answer 1

You don’t need to set the Height property at all (also realize that it is incorrect to do so as you have it when you consider the 5 pixel margin, i.e., it would be off by 10 pixels).

Just leave VerticalAlignment and HorizontalAlignment at their default values (which is Stretch) to get the effect you are after here.

Try this on a new Window to see what I mean:

<Window x:Class="WpfApplication9.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="438" Width="587" Background="Pink">
    <Grid Background="Black"  Margin="5">

    </Grid>
</Window>

The grid here will be black and will always stretch to the size of the window, using a 5 pixel margin which you will see because the Window’s back color is pink.