WPF Prism MVVM模式下动态显示图片指定区域问题求助

首先，你的问题核心是RectangleGeometry.Rect的参数顺序搞反了，Rect的构造是Rect(double x, double y, double width, double height)，你要裁剪的是横向区域（图片宽5000，只显示100px宽的横向切片），但代码把x/y、width/height的顺序弄混了，导致裁剪的是纵向窄条，自然看不到正确区域。

修正步骤： #

1. 修正ViewModel中的ImageRect计算
   调整Rect参数：x=Start（横向起始位置），y=0（纵向从顶部开始），width=DisplayWidth（显示宽度），height=图片固定高度50。

2. 确保Image控件不拉伸图片
   检查Scale样式，把Stretch设为None，否则图片会被拉伸适配控件大小，导致裁剪区域和预期不符。

修正后的代码： #

DisplayControl.xaml

<Image x:Name="scale" Style="{DynamicResource Scale}" Stretch="None">
    <Image.Clip>
        <RectangleGeometry Rect="{Binding ImageRect}" />
    </Image.Clip>
</Image>

（若Style已设置Stretch="None"，可去掉重复属性）

DispalyControlViewModel.cs

private const int DisplayWidth = 100;
private const int TextureHeight = 50;
private int _start = 0;

public int Start
{
    get => _start;
    set
    {
        // 限制Start范围，避免超出图片边界（最大为5000-100=4900）
        var clampedValue = Math.Clamp(value, 0, 5000 - DisplayWidth);
        if (SetProperty(ref _start, clampedValue))
        {
            RaisePropertyChanged(nameof(ImageRect));
        }
    }
}

public Rect ImageRect
{
    get => new Rect(Start, 0, DisplayWidth, TextureHeight);
}

按钮交互示例 #

在XAML中添加控制按钮：

<StackPanel Orientation="Horizontal">
    <Button Content="←" Command="{Binding MoveLeftCommand}" />
    <Button Content="→" Command="{Binding MoveRightCommand}" />
</StackPanel>

ViewModel补充命令逻辑：

public ICommand MoveLeftCommand { get; }
public ICommand MoveRightCommand { get; }

public DispalyControlViewModel()
{
    MoveLeftCommand = new DelegateCommand(() => Start -= 10);
    MoveRightCommand = new DelegateCommand(() => Start += 10);
}

额外提示 #

• 限制Start范围很关键，避免裁剪区域超出图片边界
• 若要支持鼠标拖动切换，可监听Image的鼠标事件，核心逻辑仍是修改Start属性

内容的提问来源于stack exchange，提问作者Aenye_Cerbin