WPF / C #: функция «Слайд для разблокировки» с iPhone

Question

Я просто хочу узнать ваше мнение о том, как использовать функцию «Слайд для разблокировки» на iPhone с помощью Windows Presentation Foundation.

Я уже сталкивался с этой статьей: Слайд iPhone, чтобы разблокировать индикатор выполнения (часть 1) , и мне интересно, можете ли вы дать мне другие ресурсы для хорошего старта. Спасибо.

Answer 1

Я бы повторил шаблон Slider, так как это самый близкий по функциональности элемент управления.

Вам нужно перехватить событие Value_Changed, а если Value == Maximum, то ползунок «открыт».

Повторное использование элемента управления сделало бы его легким. Позже я вставлю пример.

- РЕДАКТИРОВАТЬ - Есть свободное время на работе, поэтому я начал это для вас. Использование выглядит следующим образом:

<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, когда пользователь полностью скользит вправо. Чтобы закончить все это, я также добавил бы анимацию, которая перемещает большой палец назад влево, если пользователь перетянул его вправо, но не полностью (чтобы точно подражать UX iPhone).

Удачи, и спросите, не знаете ли вы, как реализовать какой-либо из предложенных мною этапов.

Answer 2

У ползунка WPF есть одно "-", и это значение, всегда, когда вы его перемещаете, значение указывается, например, в десятичном виде: 1,122213174, поэтому один «-». Но другой способ создания слайдера - это формы Windows.

Создать trackBar1, а максимум = 100 баллов. Это для приложения Windows формы: На треке Bar1_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 Slider: (на 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!");
        }

Удачи! Я надеюсь, что это поможет, попробуйте с ползунком, но я думаю, что приложение потерпит крах.