2016-11-05 113 views
-1

我是WPF的新手,尝试一些简单的操作。我正在使用画布进行自定义控件,其中的图片比画布高。当它显示它溢出画布时,所以我希望它缩放到父高度。有可能是一个简单的答案,但我还没有找到它。在WPF中将图像缩放到画布父级高度

这里的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> 
+2

画布不调整其子元素,所以为什么要在这里使用它?只需将其删除并将图像放入网格中(或放置在另一个网格中,即顶级网格的子网中) – Clemens

+0

正如前面的注释所述,“Canvas”元素不会调整子节点的大小。这绝对是一个放置东西的地方。 WPF有很多其他的布局选项,但是你的问题太模糊,并且没有太多的研究证据,所以你不清楚为什么你用'Canvas'元素显示代码,而不介意是否有一个答案能够达到所需的视觉效果一种不同的方式是可以接受的。 –

+0

有一个相关的问题特别相关,https://stackoverflow.com/questions/6196915/fit-image-in-canvas-using-wpf。它包含了一些示例代码,如果你坚持将'Image'放置在'Canvas'中,你将如何做到这一点(即你必须手动缩放,如其他Q&A所示)。但是如果你能避免这种做法,我不推荐这种方法;如果你希望'Image'和它的容器一起缩放,给它一个容器知道如何做,并且有这样做的属性选项(例如'Grid'),那么更好。 –

回答

1

如果你摆脱画布的(因为它并不能衡量它的孩子),转而使用ImageStretch财产,你应该能够拿到行为你需要。如果没有,你可以试验ViewBox

+0

不需要Viewbox。 'Stretch'默认设置为'Uniform',所以你也不需要设置。只需通过网格或其他一些控制设置其子的大小来替换画布,例如边框。 – Clemens

0

1)不要使用画布。

2)您可以绑定到网格的ActualHeight属性。

<Grid Name="InstanceGrid" Background="White" x:FieldModifier="public" Margin="0,0,0,0.2"> 
    <Image Heigh="{Binding ElementName=InstanceGrid, Path=ActualHeight}" 
      HorizontalAlignment="Left" 
      Source="pack://siteoforigin:,,,/Resources/M-Series-single.jpg" /> 
</Grid>