CODEWITHSUNDEEP
c#.netwpfcanvas
blearyeye
blearyeye

Reputation: 265

Scaling image to canvas parent height in WPF

I'm new to WPF and trying something simple. I'm making a custom control with a canvas where I have an image that is higher than the canvas. When it displays it overflows the canvas, so I want it to scale to the parent height. There's probably an easy answer but I haven't found it yet.

Here's the XAML:

<UserControl x:Class="WPFUserControl.Instance"
             Name="InstanceBox"
             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" 
             Width="448" Height="99.2">
    <Grid Name="InstanceGrid" Background="White" x:FieldModifier="public" Margin="0,0,0,0.2">
        <Canvas>
            <Image 
                HorizontalAlignment="Left"  
                Source="pack://siteoforigin:,,,/Resources/M-Series-single.jpg" />
        </Canvas>
    </Grid>
</UserControl>

Upvotes: 0

Views: 4033

Answers (3)

Dainius
Dainius

Reputation: 147

  1. Don't use canvas.

  2. You can bind to the ActualHeight property of your grid.

The same thing can be done for width

Upvotes: 1

user2272143
user2272143

Reputation: 469

Canvas don't resize childs so if you can you should put Image in a Grid. If you must use a Canvas you can bind the Width and Height of Image to the ActualWidth and ActualHeight of Canvas.

<Canvas x:Name="canvas">
    <Image x:Name="image" Width="{Binding ActualWidth, ElementName=canvas, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=canvas, Mode=OneWay}" Stretch="Fill" />
</Canvas>

Upvotes: 1

Drew Noakes
Drew Noakes

Reputation: 310907

If you get rid of the canvas (because it doesn't measure its children) and instead use the Stretch property of the Image, you should be able to get the behaviour you require. If not, you might experiment with ViewBox.

Upvotes: 1

Related Questions