在 WPF 中创建 After/Before Image 滑块控件

Question

我想在 WPF 中创建一个像 https://codepen.io/dudleystorey/pen/HkwBo 这样的 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>

Answer 1

我在使用 Canvas 之前已经这样做了。

我让两个图像在画布上占据相同的空间，左侧图像的 Z-Index 比右侧图像大，因此它位于顶部。然后在最左边放一个滑块。

您唯一需要做的就是当滑块向右移动时，将左侧图像设置为滑块的水平位置。

希望对你有帮助

Answer 2

您可以让下部图像跨越所有 Grid 列，并将上部图像的宽度和高度绑定到下部图像的大小。但是，现在所有内容都是左对齐的，这可能不是 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>

Answer 3

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

<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>

运行时是这样的：

您可能唯一想做的就是设置 Slider 控件的样式，以将其外观更改为更合适的样式。您应该能够在线找到大量 WPF 控件样式示例。

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