在 WPF 中以编程方式进行图像拉伸答案

【问题标题】：Image Stretch programmatically in WPF在 WPF 中以编程方式进行图像拉伸
【发布时间】：2009-07-28 11:08:14
【问题描述】：

在使用 XAML 的 WPF 应用程序中，

我创建了一个堆栈面板（宽度 1030），我有 2 个图像。 1. imgClient width = 784 Height = 66 and 2. imgClientExtra width =1 and Height = 66

imgClientExtra 将在右端，imgClient 将从左端开始。

因此，当应用程序未运行时，图像将适合 784 + 1，总图像宽度为 785(784+1).. 但是，当应用程序正在运行时.. 图像必须拉伸到 1030... imgClientExtra 将在 1030 并且 imgClient 将必须仅拉伸到 1029..

我使用了stretch.fill ...但没有用。

目前我正在使用这种方式...这个需要修改吗？

     <StackPanel Name="stkpnlHeader" Margin="0,0,0,0" Width="1254.662" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Top">
                <StackPanel Name="imgStkPnl"Orientation="Vertical" Width="1253.511" HorizontalAlignment="Left">
                    <Image Name="imgClientPhoto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="784" Height="66" 
                   Source="D:\ehtmp_top_left.gif" Stretch="Fill" StretchDirection="Both">

                    </Image>
                    <Image Name="imgExtraImg"   Width="1" Height="66" Margin="0,-66,0,0" HorizontalAlignment="Right" 
                       Source="D:\ehtmp_top_right.gif"
                       ></Image>
                </StackPanel> </StackPanel>

【问题讨论】：

标签： wpf image stretch

【解决方案1】：

从堆栈面板更改为网格。设置 Grid.Column 定义。创建 2 列定义您可以使用 Width 设置“比率”宽度。例如，colA Width="5*" 和 colB Width="3*" 表示 colA 获得网格的 5/8，colB 获得 3/8 的网格。将此概念与设置 MinWidth 和 MaxWidth 相结合，您应该可以开始了。

此外，在代码中设置宽度时，您通常需要使用“ActualWidth”属性而不是“Width”（有时返回 NaN）来检查现有控件的宽度。

【讨论】：

H Darkwing.. 我编辑了我的查询并在此处添加了 xaml 代码.. 我是否需要用网格替换 stackpanel(imgStkPnl) 才能工作/？谢谢
嗨...刚刚添加了这部分..我想我还是错了实际图像是|____________||_|当应用程序未运行时，。但是当我运行应用程序时，它应该是 |___________________________________________________________||_|请帮忙谢谢拉姆
看起来你在另一个堆栈面板中有一个堆栈面板。这可能真的毫无意义。您只需要一个堆叠面板，它将堆叠 2 张图像。然后不要在图像上设置任何实际宽度。在左侧图像上，将 MinWidth 设置为 784，在右侧图像上，将 MinWidth 设置为 1。如果仍然无法正常工作，请发布更新的示例，也清理示例，通过删除名称、边距、对齐方式等，因为它会阻止可读性

【解决方案2】：

我认为在您的情况下 DockPanel 会起作用，因为它会自动拉伸最后一个元素（我没有尝试构建此代码，所以如果它不起作用，请告诉我）：

<DockPanel Height="66">
    <Image Name="imgExtraImg" Source="D:\ehtmp_top_right.gif" DockPanel.Dock="Right"/>
    <Image Name="imgClientPhoto" Source="D:\ehtmp_top_left.gif"/>
</DockPanel>

【讨论】：

嗨，马克，感谢您的帮助。我尝试使用网格。成功了。我发帖供参考，谢谢拉姆

【解决方案3】：

<Grid HorizontalAlignment="Left" Height="66" Name="imgGrid">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*"></ColumnDefinition>
     <ColumnDefinition Width="Auto"></ColumnDefinition>

       </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
           <RowDefinition Height="66"/>
         </Grid.RowDefinitions>

     <Image Name="imgClientPhoto" Grid.Column="0" Stretch="Fill"Source="D:\eHTMP\Exclusively_My_Work\UI_Application\Images\ehtmp_top_left.gif" ></Image>
<Image Name="imgExtraImg"  Grid.Column="1"Source="D:\eHTMP\Builds\output\WPF_Example\UI_eHTMP\UI_eHTMP\Icons\ehtmp_top_right.gif"></Image></Grid>

【讨论】：