WPF/C# : 'Slide to Unlock'기능이 iPhone에서 제공됩니다.

Question

Windows Presentation Foundation을 사용하여 iPhone에서 '슬라이드 잠금 해제'기능을 구현하는 방법에 대한 의견을 듣고 싶습니다.

나는 이미이 기사를 보았습니다 : iPhone slide to unlock progress bar (part 1) 그리고 좋은 시작을위한 다른 리소스를 줄 수 있는지 궁금합니다. 고맙습니다.

Answer 1

Slider는 기능적으로 가장 가까운 컨트롤이기 때문에 retemplate 할 것입니다.

Value_Changed 이벤트를 catch하고 Value == Maximum 인 경우 슬라이더가 "열림"상태 여야합니다.

컨트롤을 다시 작성하면 쉽게 "잠금 해제 컨트롤"처럼 보이게됩니다. 나중에 예제를 붙여 넣을 것입니다.

- EDIT - 직장에서 자유 시간을 가지기 때문에 시작했습니다. 사용법은 다음과 같다 :

<Grid x:Name="LayoutRoot"> 
    <Slider Margin="185,193,145,199" Style="{DynamicResource SliderStyle1}"/> 
</Grid> 

하고있는 ResourceDictionary이 아주 좋은 시작이다

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> 

    <LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#FFF" Offset="0.0"/> 
     <GradientStop Color="#AAA" Offset="1.0"/> 
    </LinearGradientBrush> 


    <LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#FFF" Offset="0.0"/> 
     <GradientStop Color="#EEE" Offset="1.0"/> 
    </LinearGradientBrush> 
    <LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#CCC" Offset="0.0"/> 
     <GradientStop Color="#444" Offset="1.0"/> 
    </LinearGradientBrush> 

    <Style x:Key="SimpleScrollRepeatButtonStyle" d:IsControlPart="True" TargetType="{x:Type RepeatButton}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="Transparent"/> 
     <Setter Property="IsTabStop" Value="false"/> 
     <Setter Property="Focusable" Value="false"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RepeatButton}"> 
        <Grid> 
         <Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 


    <Style x:Key="ThumbStyle1" d:IsControlPart="True" TargetType="{x:Type Thumb}"> 
     <Setter Property="SnapsToDevicePixels" Value="true"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Grid Width="54"> 
         <Ellipse x:Name="Ellipse" /> 
         <Border CornerRadius="10" > 
          <Border.Background> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFFBFBFB" Offset="0.075"/> 
            <GradientStop Color="Gainsboro" Offset="0.491"/> 
            <GradientStop Color="#FFCECECE" Offset="0.509"/> 
            <GradientStop Color="#FFA6A6A6" Offset="0.943"/> 
           </LinearGradientBrush> 
          </Border.Background> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsMouseOver" Value="True"> 
          <Setter Property="Fill" Value="{StaticResource MouseOverBrush}" TargetName="Ellipse"/> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" TargetName="Ellipse"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style x:Key="SliderStyle1" TargetType="{x:Type Slider}"> 
     <Setter Property="Background" Value="{StaticResource LightBrush}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Slider}"> 
        <Border CornerRadius="14" Padding="4"> 
         <Border.Background> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#FF252525" Offset="0"/> 
           <GradientStop Color="#FF5C5C5C" Offset="1"/> 
          </LinearGradientBrush> 
         </Border.Background> 
         <Grid x:Name="GridRoot"> 
         <TextBlock Text="Slide to unlock" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
         <!-- TickBar shows the ticks for Slider --> 

         <!-- The Track lays out the repeat buttons and thumb --> 
          <Track x:Name="PART_Track" Height="Auto"> 
           <Track.Thumb> 
            <Thumb Style="{StaticResource ThumbStyle1}"/> 
           </Track.Thumb> 
           <Track.IncreaseRepeatButton> 
            <RepeatButton Style="{StaticResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge" Background="Transparent"/> 
           </Track.IncreaseRepeatButton> 
           <Track.DecreaseRepeatButton> 
            <RepeatButton Style="{StaticResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge" d:IsHidden="True"/> 
           </Track.DecreaseRepeatButton> 
          </Track> 
         </Grid> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="TickPlacement" Value="TopLeft"/> 
         <Trigger Property="TickPlacement" Value="BottomRight"/> 
         <Trigger Property="TickPlacement" Value="Both"/> 
         <Trigger Property="IsEnabled" Value="false"/> 

         <!-- Use a rotation to create a Vertical Slider form the default Horizontal --> 
         <Trigger Property="Orientation" Value="Vertical"> 
          <Setter Property="LayoutTransform" TargetName="GridRoot"> 
           <Setter.Value> 
            <RotateTransform Angle="-90"/> 
           </Setter.Value> 
          </Setter> 
          <!-- Track rotates itself based on orientation so need to force it back --> 
          <Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/> 
         </Trigger> 

        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</ResourceDictionary> 

하는 것으로,하지만 모든 아니다. 슬라이더에서 파생되고이 스타일을 자동으로 사용하는 사용자 지정 컨트롤을 정의 할 수도 있습니다. 또한 사용자가 오른쪽으로 슬라이드하면 SlideUnlocked 이벤트가 노출됩니다. 다 끝내려면 사용자가 오른쪽으로 드래그 한 경우 (iPhone의 UX를 정확히 모방하기 위해) (iPhone의 UX를 정확히 모방하기 위해) 엄지 손가락을 왼쪽으로 움직이는 애니메이션을 추가하십시오.

행운을 빌어 요. 당신은 내가 제안한 단계 중 어떤 단계를 구현할 지 모른다.

Answer 2

WPF 슬라이더에는 "-"값이 1 개 있으며 값을 이동하면 항상 , 값은 예를 들어 십진수 1,122213174이므로 "-"가 하나입니다. 그러나 슬라이더를 만드는 또 다른 방법은 Windows 양식입니다.

trackBar1 및 최대 = 100 점을 만듭니다. trackBar1_mouse_up에 :

if(trackBar1.Value < 100) 
    { 
    //Animation - slide back dynamicaly. 

    for(int i=0;i<=trackBar1.Value;i++){ 
     int secondVal=trackBar1.Value-i; 
     trackBar1.Value=secondVal; 
     System.Threading.Thread.Sleep(15); 
    } 
} 
if(trackBar1.Value==100) 
{ 
    //sets enabled to false, then after load cannot move it. 
    trackBar1.Enabled=false; 
    MessageBox.Show("Done!"); 
} 

을 그리고이 WPF 슬라이더 : 이 Windows 용입니다 응용 프로그램 형성 (PreviewMouseUp에)

if (Convert.ToInt16(slider1.Value) < 99) 
     { 
      //Animation - slide back dynamicaly. 

      for (int i = 0; i < Convert.ToInt16(slider1.Value); i++) 
      { 
       int secondVal = Convert.ToInt32(slider1.Value) - i; 
       slider1.Value = secondVal; 
       System.Threading.Thread.Sleep(10); 
       if (secondVal < 2) 
       { 
        slider1.Value = 0; 
       } 
      } 
     } 
     if (Convert.ToInt16(slider1.Value) > 99) 
     { 
      //sets enabled to false, then after load cannot move it. 
      slider1.IsEnabled = false; 
      slider1.Value = 100; 
      MessageBox.Show("Done!"); 
     } 

행운을 빕니다! 도움이 되었으면하고 슬라이더로 시도해 보시길 바랍니다. 그러나 응용 프로그램이 충돌 할 것이라고 생각합니다.