边框内的 WPF 图像未完全绘制答案

【问题标题】：WPF image inside border is not fully drawn边框内的 WPF 图像未完全绘制
【发布时间】：2014-06-06 01:51:28
【问题描述】：

我有一个边框内的图像：

XAML：

<Window x:Class="TestProgram.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test" Height="350" Width="525">
<DockPanel>
    <Grid DockPanel.Dock="Top">
        <!---->
    </Grid>

    <ListBox DockPanel.Dock="Left"/>

    <Grid DockPanel.Dock="Top">
        <!---->
    </Grid>


    <Border x:Name="testBorder" ClipToBounds="True" Background="Gray">
        <Image x:Name="testImage" Source="test.png" Opacity="1" Stretch="None"
               MouseLeftButtonDown="testImage_MouseLeftButtonDown"
               MouseLeftButtonUp="testImage_MouseLeftButtonUp"
               MouseMove="testImage_MouseMove"
               />
    </Border>

</DockPanel>
</Window>

C#：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestProgram
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    private Point start;
    private Point origin;

    public MainWindow()
    {
        InitializeComponent();

        TransformGroup group = new TransformGroup();

        TranslateTransform tt = new TranslateTransform();
        group.Children.Add(tt);

        testImage.RenderTransform = group;
    }

    private void testImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        testImage.CaptureMouse();
        TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
        start = e.GetPosition(testBorder);
        origin = new Point(tt.X, tt.Y);
    }

    private void testImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        testImage.ReleaseMouseCapture();
    }

    private void testImage_MouseMove(object sender, MouseEventArgs e)
    {
        if (testImage.IsMouseCaptured)
        {
            TranslateTransform tt = (TranslateTransform)((TransformGroup)testImage.RenderTransform).Children.First(tr => tr is TranslateTransform);
            Vector v = start - e.GetPosition(testBorder);
            tt.X = origin.X - v.X;
            tt.Y = origin.Y - v.Y;
        }
    }
}
}

我添加了单击和拖动平移功能，但是图像的显示大小受到周围边框的限制，平移图像时仅显示图像的左上角。即使我删除 ClipToBounds="True"

ActualHeight 和ActualWidth 的值对应于图像的自然高度和宽度，那么为什么会裁剪图像呢？我该怎么做才能使整个图像可见？

【问题讨论】：

WPF 中的 UI 元素受限于其父元素分配给它们的空间。 Border 放在什么样的布局容器中？
Border 在 DockPanel 内
或设置图片。
尝试在画布内放置边框和图片
给我们完整的 XAML，包括外部元素...

标签： c# wpf xaml

【解决方案1】：

如果您真的希望边框覆盖在图像顶部，请将它们都放在 Grid> 或 Canvas>

中

 <Canvas>
   <Image/>
   <Borde/>
</Canvas>

【讨论】：

Border 仅作为容器存在，但 <Canvas><Image /></Canvas> 具有我需要的功能，谢谢。