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

您可以使用单格网格将两个图像堆叠在一起，然后使用滑块控件调整图像的宽度＆＃34;在顶部＆＃34;。（我使用了与链接示例中相同的图像，这些图像的尺寸略有不同;考虑到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>

运行时看起来像这样：

Illustrative example

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

请注意，如果两张图片有不同或非标准的DPI，那么这种技术可能无法正常工作。

Answer 2

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

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

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

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

希望这有帮助

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

3 个答案: