WPF实现自定义拉伸图片（紧急）

[若风09]

如图，我想实现这样的效果，请问一下大神，思路是怎么样的，图片我准备放到Image元素里面，四周的框要怎么处理?是要自己写一个样式么？

求大神帮帮忙，最好能够给我一个简单的Demo

小白感激不尽！！！

[yangxk120]

放到canvas里面，边框及选择的点都自己画图实现

[qq14923349]

image的strengy属性 拉伸 框大小随意

[若风09]

引用 1 楼 qq14923349 的回复:

image的strengy属性 拉伸 框大小随意

你确定有这个属性？？？Stretch达不到要求

[若风09]

引用 2 楼 yangxk120 的回复:

放到canvas里面，边框及选择的点都自己画图实现

额，，，这个我也想过，但是技术有限写不出来啊

[qq14923349]

引用 5 楼 YI_RIVER_LOVE 的回复:

[quote=引用 2 楼 yangxk120 的回复:]
放到canvas里面，边框及选择的点都自己画图实现

额，，，这个我也想过，但是技术有限写不出来啊[/quote]

边框用border搞个样式应该可以吧 拉伸肯定要失真了

[qq14923349]

整体一个grid 上下放dockpanel left right
盖住虚线行不行？

[若风09]

引用 6 楼 qq14923349 的回复:

[quote=引用 5 楼 YI_RIVER_LOVE 的回复:]
[quote=引用 2 楼 yangxk120 的回复:]
放到canvas里面，边框及选择的点都自己画图实现

额，，，这个我也想过，但是技术有限写不出来啊[/quote]

边框用border搞个样式应该可以吧 拉伸肯定要失真了 [/quote]
我现在边框虚线搞出来了，用Rectangle画出来，但是四角的圆圈要怎么画啊

[若风09]

引用 2 楼 yangxk120 的回复:

放到canvas里面，边框及选择的点都自己画图实现

我现在边框虚线搞出来了，用Rectangle画出来，但是四角的圆圈要怎么画啊

[zmidl]

用一个thumb 控件 微软提供的专门拖拽的控件，
1.thumb控件里面套一个 Image
2.Image指定你的图片然后属性设置为填充这样就可以拉伸铺满了
3.对Thumb控件注册一个DragDelta事件在DragDelta事件下 控制你的 这个Image相对Canvas（注意一定要是Canvas作为父容器才可以绝对定位）

[_秦同学_]

用 DrawingVisual画，你这不叫事，找两篇博客看看 Drawingvisual 怎么用。

[KaysonWu]

没有什么效果是不能通过定义自定义控件完成的。你这种需求完全可以定义一个控件来实现，通过命名模板监听元素的鼠标事件即可完成全部操作。具体看最后的 C# 代码，不要问我为什么不写完，尝试自己动动手会收获不少，不懂自定义控件可以 github 搜搜 MahApps.Metro。 或者我正在开发的但开源了的 UI 库 Ant.Design.WPF。

你要的样式，我编写了代码：

<Control Width="200" Height="200">
	<Control.Style>
		<Style TargetType="Control">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Control">
						<Grid>
							<!-- Border -->
							<Rectangle Stroke="Red"
									   StrokeThickness="1"
									   Margin="4 4 4 4"
									   StrokeDashArray="4 2" />
							
							<!-- Image -->
							<Image Source="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" Margin="5" Stretch="Uniform" />
							<!--Ellipses-->
							<Ellipse Width="10"
									 Height="10"
									 Fill="White"
									 Stroke="Red"
									 StrokeThickness="1"
									 Panel.ZIndex="1"
									 VerticalAlignment="Top"
									 HorizontalAlignment="Left" />
							<Ellipse Width="10"
									 Height="10"
									 Fill="White"
									 Stroke="Red"
									 StrokeThickness="1"
									 Panel.ZIndex="1"
									 VerticalAlignment="Top"
									 HorizontalAlignment="Right" />
							<Ellipse Width="10"
									 Height="10"
									 Fill="White"
									 Stroke="Red"
									 StrokeThickness="1"
									 Panel.ZIndex="1"
									 VerticalAlignment="Bottom"
									 HorizontalAlignment="Left" />
							<Ellipse Width="10"
									 Height="10"
									 Fill="White"
									 Stroke="Red"
									 StrokeThickness="1"
									 Panel.ZIndex="1"
									 VerticalAlignment="Bottom"
									 HorizontalAlignment="Right" />
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Control.Style>
</Control>

效果图如下：




如果要自定义控件参考下下面的代码：

using System.Windows;
using System.Windows.Controls;

namespace Antd
{
    [TemplatePart(Name = PART_LeftTop, Type = typeof(UIElement))]
    [TemplatePart(Name = PART_RightTop, Type = typeof(UIElement))]
    public class PhotoFrame : Control
    {
        #region Fields

        private const string PART_LeftTop = "PART_LeftTop";

        private const string PART_RightTop = "PART_RightTop";

        private UIElement leftTop;

        #endregion

        static PhotoFrame()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(PhotoFrame), new FrameworkPropertyMetadata(typeof(PhotoFrame)));
        }

        #region Overrides

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            leftTop = GetTemplateChild(PART_LeftTop) as UIElement;
            SetEvents();
        }

        private void SetEvents()
        {
            // 这里为已命名的部件，监听鼠标事件并出来，通常监听事件前要把原事件给清理下。
            // 然后为这个控件，定义 Themes，具体样式 就是上面我编写的那个 只不过要给 Ellipse 增加命名，如： x:Name="PART_LeftTop"
        }

        #endregion
    }
}