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

는 그런 다음 "위에"있는 이미지의 너비를 조정하는 슬라이더 컨트롤을 사용하여, 서로의 상단에있는 두 개의 이미지를 쌓아 하나의 셀을 그리드를 사용할 수 있습니다. (나는 당신의 링크 된 예제에서와 같은 이미지를 사용했는데, 약간 다른 크기이고 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> 

:

아마 당신은하고 싶은 것입니다 유일한 것은 스타일보다 피팅 뭔가 모양을 변경할 수있는 슬라이더 컨트롤입니다. 온라인에서 많은 WPF 컨트롤 스타일 예제를 찾을 수 있어야합니다.

두 이미지의 DPI가 서로 다르거 나 비표준 인 경우이 기술은 제대로 작동하지 않습니다.

Answer 2

나는 캔버스를 사용하기 전에 이런 짓을했는지.

두 이미지의 왼쪽에있는 이미지가 오른쪽에있는 이미지보다 큰 Z- 인덱스가있는 Canvas의 동일한 공간을 차지하도록하여 위에 놓습니다. 그런 다음 슬라이더를 왼쪽 끝에서부터 시작하십시오.

당신이해야 할 일은 슬라이더가 오른쪽으로 움직이면서 왼쪽 이미지를 슬라이더의 수평 위치로 설정하는 것입니다.

희망이 당신은 모든 그리드 열 아래 이미지 범위를 가지고 있고, 하나 이하의 크기로 상단 이미지의 폭과 높이를 결합 할 수 있습니다

Answer 3

을하는 데 도움이됩니다. 그러나 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>