在WPF中创建后/前图像滑块控件

我想在WPF中创建这样的Before/After控件

---

如何在启动时拉伸图像，而不是在拆分器移动时拉伸，并使两个图像的原点相同

<UserControl x:Class="BeforeAfterImage.BeforeAfterImageCtrl"
         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" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image Stretch="None" Name="Before" Grid.Column="0" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" />
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" />
    <Image Stretch="None" Name="After" Grid.Column="2" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" />
</Grid>

---

在使用画布之前，我已经这样做了

我让两幅图像占据画布上相同的空间，左边的图像的Z索引比右边的图像大，因此它位于顶部。然后在开始时一直向左放一个滑块

然后，您只需在滑块向右移动时，将左侧图像设置为滑块的水平位置

---

希望这对您有所帮助

您可以让下部图像跨越所有网格列，并将上部图像的宽度和高度绑定到下部图像的大小。然而，现在所有内容都是左对齐的，这可能不是UserControl的问题，而是将其放入适当的容器元素中

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Image x:Name="After" HorizontalAlignment="Left"
           Grid.ColumnSpan="3"
           Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"/>
    <Image x:Name="Before" HorizontalAlignment="Left"
           Width="{Binding ActualWidth, ElementName=After}"
           Height="{Binding ActualHeight, ElementName=After}"
           Source="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"/>
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center"/>
</Grid>

---

您可以使用单个单元格网格将两个图像堆叠在一起，然后使用滑块控件调整“顶部”图像的宽度。（我使用了与链接示例中相同的图像，顺便说一句，它们的大小略有不同；考虑到UI试图演示的内容，这有点奇怪，但是嘿嘿）

运行时的外观如下所示：

您可能要做的唯一一件事是设置滑块的样式，以将其外观更改为更合适的样式。您应该能够在网上找到大量WPF控件样式示例

---

请注意，如果两张图像的DPI不同或不标准，则此技术可能无法正常工作。

不确定为什么会获得否决票，这是一种非常有效的方法。也许包括一些XAML会有所帮助。总之，+1是我用来平衡的。画布不会调整其子元素的大小，因此无法解决“初始拉伸”问题。这并不能解决“初始拉伸”问题。OP似乎不想将Stretch设为None。@Clemens问题中的措辞并不完全清楚，但我可以理解它是如何被解释为None的。我还是把答案留在这里。：-）“如何在启动时拉伸图像，而不是在拆分器移动时拉伸”，还有什么不清楚的地方吗？@Clemens事实上我用一个矩形和一个ImageBrush解决了这个问题。这样更好：-）

<Window x:Class="WpfApplication2.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image x:Name="BeforeImage" HorizontalAlignment="Left"
            Source="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" />
        <Rectangle HorizontalAlignment="Left" Width="{Binding Value, ElementName=Slider}">
            <Rectangle.Fill>
                <ImageBrush ImageSource="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg"
                    Stretch="UniformToFill" AlignmentX="Left" AlignmentY="Top" />
            </Rectangle.Fill>
        </Rectangle>
        <Slider x:Name="Slider" Maximum="{Binding ActualWidth, ElementName=BeforeImage}"
            VerticalAlignment="Bottom" Margin="0,0,0,40" />
    </Grid>
</Window>