Unable to fill entire space with WPF control in WinForm

Question

I created Wpf UserControl and am hosting it in WinForm.

<UserControl x:Class="Sapphire.WpfUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" Height="527" Width="992">
<Canvas x:Name="videoCanvas" HorizontalAlignment="Left"  Margin="10,10,0,0" VerticalAlignment="Top" >
    <Label Canvas.ZIndex="2" Content="Label" Canvas.Left="165" Canvas.Top="50" Width="125" Foreground="#FFFFFEFF"/>
    <MediaElement x:Name="videoElement" Canvas.ZIndex="1" Canvas.Left="10" Canvas.Top="10" />
</Canvas>

As shown in designer file this WPF control is hosted through HostElement:

            // 
        // elementHost1
        // 
        this.elementHost1.Dock = System.Windows.Forms.DockStyle.Fill;
        this.elementHost1.Location = new System.Drawing.Point(0, 0);
        this.elementHost1.Name = "elementHost1";
        this.elementHost1.Size = new System.Drawing.Size(1130, 593);
        this.elementHost1.TabIndex = 2;
        this.elementHost1.Text = "elementHost1";
        this.elementHost1.Child = this.wpfUserControl1;

So it looks all correct. You also can see that the DockStyle is Fill. However, the WPF control does not fill the entire WinForm and always shows up of a size as set and displayed in Designer.

I removed the Height and Width both from Canvas and from MediaElement that Canvas contains but it did not have any effect...

I'd appreciate if somebody can point out what I am doing wrong here - I am new to WPF.

http://stackoverflow.com/questions/19393774/how-to-make-all-controls-resize-accordingly-proportionally-when-window-is-maximi — Hans Passant, Jul 23 '16 at 08:27
I am not sure what you are suggesting to do by pointing to that code - I have specific problem and do not understand what I am doing wrong...comparing to your code is not exactly apples-to-apples : a bit different problem, isn't it? — Leon Havin, Jul 23 '16 at 15:42

score 1 · Answer 1 · answered Jul 23 '16 at 09:14

You need to remove the Width and Height of the <UserControl> so that the containing ElementHost controls the size of the contained elements:

<UserControl x:Class="Sapphire.WpfUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d">

If you want a specific size in the designer, you can use d:DesignHeight and d:DesignWidth attributes:

<UserControl x:Class="Sapphire.WpfUserControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" d:DesignHeight="527" d:DesignWidth="992">

Another piece of info that I observed: If I increase the dimensions: mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="1900" it is reflected in the Designer but not at runtime - the dimensions on the screen remain the same as before...so I wonder where is culprit... — Leon Havin, Jul 23 '16 at 15:56
BTW, the in Designer it shows Auto (1900) and Auto (1060) for Width and Height respectively... — Leon Havin, Jul 23 '16 at 16:05

Unable to fill entire space with WPF control in WinForm

1 Answers1