WPF/C#: función 'Desbloquear para desbloquear' de iPhone

Question

Solo quiero pedirle su opinión sobre cómo lograr la función 'Desbloquear para desbloquear' desde iPhone usando Windows Presentation Foundation.

Ya me encontré con este artículo: iPhone slide to unlock progress bar (part 1), y me preguntaba si me puede dar algunos otros recursos para una buena ventaja. Gracias.

Answer 1

Repetiría un Control deslizante, ya que este es el control más cercano, en términos de funcionalidad.

Debería ver el evento de Value_Changed, y si Value == Maximum entonces el control deslizante se "abre".

Al replantear el control, se vería como su "control de desbloqueo" con facilidad. Pegaré más tarde un ejemplo.

- EDITAR - Tener tiempo libre en el trabajo, así que lo comencé para usted. El uso es el siguiente:

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

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

Tenga en cuenta que este es un muy buen comienzo, pero no es todo. También definiría un control personalizado que se deriva del control deslizante y que utiliza este estilo automáticamente. También exponer un evento SlideUnlocked cuando el usuario se desliza completamente hacia la derecha. Para terminar, también agregaría una animación que mueve el pulgar hacia la izquierda en caso de que el usuario lo haya arrastrado hacia la derecha, pero no del todo (para imitar el UX del iPhone exactamente).

Buena suerte, y pregunte si no sabes cómo implementar ninguna de las etapas que sugerí.

Answer 2

El control deslizante de WPF tiene un "-" y es un valor, siempre cuando lo mueve, el valor es, por ejemplo, en 1,122213174 decimal, por lo que uno "-". Pero otra forma de crear controles deslizantes es en formularios de Windows.

Crear trackBar1 y un máximo de 100 puntos. Esto es para aplicación de Windows Forms: En 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!"); 
} 

Y esto para WPF deslizante: (en 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!"); 
     } 

Buena suerte! Espero que ayude, pruébalo con el control deslizante, pero creo que la aplicación fallará.