WPF/C＃：「滑動解鎖」功能iPhone

我只想問你的意見，如何使用Windows Presentation Foundation實現iPhone上的「滑動解鎖」功能。WPF/C＃：「滑動解鎖」功能iPhone

我已經遇到了這篇文章：，並想知道如果你能給我一些其他的資源，一個良好的開端。謝謝。

2011-03-24 abramlimpin

你想要iPhone風格的幻燈片解鎖在WPF的** Windows **應用程序？ – gideon 2011-03-24 09:33:04

@giddy：只需一個WPF頁面/窗口就可以了。 – abramlimpin 2011-03-24 09:34:18

請注意，您不會侵犯[Apple的專利]（http://thenextweb.com/apple/2010/08/17/ios-slide-to-unlock-is-now-an-apple-patent/） – Gareth 2011-03-24 09:35:58

我會重新設計一個Slider，因爲這是最接近功能的控件。

您應該捕獲Value_Changed的事件，並且如果Value == Maximum則滑塊「打開」。

重新設計控件將使它看起來像輕鬆的「解鎖控制」。我稍後會粘貼一個例子。

- 編輯 - 有空閒的時間在工作，所以我開始爲你。用法如下：

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

和資源字典：

<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的用戶體驗）。

祝你好運，並要求離開if你不知道如何實現我建議的任何階段。

來源

2011-03-24 09:28:06

添加樣式使其看起來像iPhone的滑塊。 – 2011-03-24 09:59:22

我想重新設置複選框，它是可視化表示兩種不同狀態的控件，並提供了用於從一個狀態改變到另一個狀態的UI。 – 2011-04-13 16:09:10

WPF滑塊已經有一個「 - 」，它是值，總是當你移動它，值是例如十進制1,122213174所以一個「 - 」。但另一種創建滑塊的方式是在Windows窗體中。

創建trackBar1，最大值= 100分。這是Windows窗體應用程序：在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滑塊：（上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!"); 
     }

祝你好運！我希望它可以幫助，使用滑塊嘗試，但我認爲應用程序會崩潰。

來源

2011-04-12 17:47:25 jakubinf

WPF/C＃：「滑動解鎖」功能iPhone

回答

相關問題