Introduction

While working on a project, we have found out that a swiping slider for accepting requests fro an app is not native to windows phone 8.1, so I set out to implement my own version of a slider on Windows Phone using a a slider and some rectangles.


Description

The items that had to be placed in the view are as follows:

 

  1. A grid
  2. 2 Rectangles with the images for the slider
  3. A slider

We begin by setting up our xaml, for the purpose of our project, I had already preplanned the layout. In the XAML, we have 5 rows:

  1. Header
  2. Request type
  3. Action/instruction
  4. Content row
  5. Slider row

Then in the .cs file, we have the logic for the slider. The slider is mapped to the function GetIni() on the event value changed, i.e, whenever the value of the slider changes, the function will be triggerred. The slider will move according to the amount changed on the slider. The slider also triggers only when the values are below or above a certain range(<150/400 or >250/400). The slider also moves back automatically, which also makes the slider require flicking movement.

 

XAML
Edit|Remove
<Grid        <Grid x:Name="Base" 
            <Grid.Background                <ImageBrush Stretch="Fill" ImageSource="Assets/background 3.png"                    <ImageBrush.RelativeTransform                        <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="180" /> 
                    </ImageBrush.RelativeTransform> 
                </ImageBrush> 
            </Grid.Background> 
            <Grid.RowDefinitions                <RowDefinition Height="auto" /> 
                <RowDefinition Height="1*" /> 
                <RowDefinition Height="2*" /> 
                <RowDefinition Height="8*" /> 
                <RowDefinition Height="2*" /> 
            </Grid.RowDefinitions> 
            <TextBlock x:Name="Question" TextWrapping="Wrap" Text="Acceptor" Grid.Row="1" FontSize="32" VerticalAlignment="Center" Margin="19,0,10,0" Foreground="#FFDEDEDE" /> 
            <StackPanel x:Name="TitlePanel" Margin="0,10"                <Grid Margin="19,0,0,0" VerticalAlignment="Top"                    <Grid.ColumnDefinitions                        <ColumnDefinition /> 
                        <ColumnDefinition Width="11*" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock Grid.Column="1" Text="Slider" Foreground="#FFDEDEDE" FontSize="40" SelectionHighlightColor="White" Grid.ColumnSpan="2" HorizontalAlignment="Left" Margin="8,0,0,0" VerticalAlignment="Center" RenderTransformOrigin="0.57,0.694" /> 
                    <Rectangle                        <Rectangle.Fill                            <ImageBrush ImageSource="Assets/logoYellow.png" Stretch="Uniform" /> 
                        </Rectangle.Fill> 
                    </Rectangle> 
                </Grid> 
            </StackPanel> 
            <Grid x:Name="Location" Margin="10,11,10,9.167" Grid.Row="2"                <Grid.ColumnDefinitions                    <ColumnDefinition Width="auto" /> 
                    <ColumnDefinition Width="4*" /> 
                </Grid.ColumnDefinitions> 
                <TextBlock x:Name="LocationText" TextWrapping="Wrap" FontSize="26" Grid.Column="1" Margin="0" VerticalAlignment="Center" Foreground="#FFDEDEDE" HorizontalAlignment="Center"                     <Run Text="Please "/> 
                    <Run Text="Swipe "/> 
                    <Run Text="on Yes or No"/> 
                </TextBlock> 
            </Grid> 
 
            <Rectangle x:Name="red" Grid.Row="3" RenderTransformOrigin="0.5,0.5" Margin="250,341.5,-250,0" Grid.RowSpan="2" Width="444" Height="130"                <Rectangle.Fill                    <ImageBrush Stretch="Fill" ImageSource="Assets/no yellow.png" /> 
                </Rectangle.Fill> 
                <Rectangle.RenderTransform                    <CompositeTransform /> 
                </Rectangle.RenderTransform> 
                <Rectangle.Stroke                    <SolidColorBrush Color="White" Opacity="0" /> 
                </Rectangle.Stroke> 
            </Rectangle> 
            <Rectangle x:Name="green" Grid.Row="3" RenderTransformOrigin="0.5,0.5" Margin="-294,341.5,245,0" Grid.RowSpan="2" Width="444" Height="130"                <Rectangle.Fill                    <ImageBrush Stretch="Fill" ImageSource="Assets/yes yellow.png" /> 
                </Rectangle.Fill> 
                <Rectangle.RenderTransform                    <CompositeTransform /> 
                </Rectangle.RenderTransform> 
                <Rectangle.Stroke                    <SolidColorBrush Color="White" Opacity="0" /> 
                </Rectangle.Stroke> 
            </Rectangle> 
            <Slider Name="SwipeSlider" Grid.Row="3" Value="200" Margin="0,323.5,0,0" Grid.RowSpan="2" Maximum="400" Opacity="0"                <Slider.BorderBrush                    <SolidColorBrush Color="Transparent" Opacity="0" /> 
                </Slider.BorderBrush> 
                <Slider.Background                    <SolidColorBrush Color="{ThemeResource ContentDialogDimmingColor}" Opacity="0" /> 
                </Slider.Background> 
                <Slider.Foreground                    <SolidColorBrush Color="White" Opacity="0" /> 
                </Slider.Foreground> 
            </Slider> 
        </Grid> 
    </Grid>
 In the code above, the higlighted areas are the controls used. The 2 rectangles hold images required for the yes and no. The rectangles have a magin of about 220 on either left or right. When the slider is moved, the function GetIni() will decrease the margin by increments of 5px every 25 ms.

 

 

 

C#
Edit|Remove
private async void GetIni(object sender, RangeBaseValueChangedEventArgs e) 
        { 
            if (SliderStatus) 
            { 
                return; 
            } 
            SliderStatus = true; 
            SliderIni = SwipeSlider.Value; 
            double SliderNext; 
            double SliderPrev; 
            double Change; 
            SliderPrev = SliderIni; 
            if (SliderIni < 150) 
            { 
                while (true) 
                { 
                    await Task.Delay(TimeSpan.FromMilliseconds(25)); 
                    SliderNext = SwipeSlider.Value; 
                    Thickness margin = green.Margin; 
                    Change = SliderNext - SliderPrev; 
                    //idle 
                    if (Change == 0) 
                    { 
                        for (int chk = 1; ; chk++) 
                        { 
                            SliderNext = SwipeSlider.Value; 
                            //if idle for more than 500ms revert 
                            if (SliderNext == SliderPrev && chk == 40) 
                            { 
                                SliderStatus = false; 
                                while (margin.Right <= 250 && SliderStatus == false) 
                                { 
                                    margin.Left -= 5; 
                                    margin.Right += 5; 
                                    green.Margin = margin; 
                                    await Task.Delay(TimeSpan.FromMilliseconds(25)); 
                                } 
                                return; 
                            } 
                            else if (SliderNext != SliderPrev) 
                            { 
                                break; 
                            } 
                        } 
                    } 
                    else if (SliderNext > SliderIni) 
                    { 
                        //adjust margin 
                        margin.Left += Change; 
                        margin.Right -= Change; 
                        green.Margin = margin; 
                        if (SliderNext > 225 || margin.Right < 125) 
                        { 
                            LocationText.Text = "Request Accepted"; 
                            //vibrate 
                            //VibrationDevice VibrationDevice = VibrationDevice.GetDefault(); 
                            //VibrationDevice.Vibrate(TimeSpan.FromMilliseconds(100)); 
 
                            //insert events here 
 
 
                            //end events 
                            while (margin.Right <= 250) 
                            { 
                                margin.Left -= 5; 
                                margin.Right += 5; 
                                green.Margin = margin; 
                                await Task.Delay(TimeSpan.FromMilliseconds(10)); 
                            } 
                            //Comment Slider Status in order to lock the slider 
                            SliderStatus = false; 
                            return; 
                        } 
                    } 
                    SliderPrev = SliderNext; 
                } 
            } 
            else if (SliderIni > 250) 
            { 
                while (true) 
                { 
                    await Task.Delay(TimeSpan.FromMilliseconds(25)); 
                    SliderNext = SwipeSlider.Value; 
                    Thickness margin = red.Margin; 
                    Change = SliderNext - SliderPrev; 
                    //idle 
                    if (Change == 0) 
                    { 
                        for (int chk = 1; ; chk++) 
                        { 
                            SliderNext = SwipeSlider.Value; 
                            //if idle for more than 500ms revert 
                            if (SliderNext == SliderPrev && chk == 40) 
                            { 
                                SliderStatus = false; 
                                while (margin.Left <= 250 && SliderStatus == false) 
                                { 
                                    margin.Left += 5; 
                                    margin.Right -= 5; 
                                    red.Margin = margin; 
                                    await Task.Delay(TimeSpan.FromMilliseconds(25)); 
                                } 
                                return; 
                            } 
                            else if (SliderNext != SliderPrev) 
                            { 
                                break; 
                            } 
                        } 
                    } 
                    else if (SliderNext < SliderIni) 
                    { 
                        //adjust margin 
                        margin.Left += Change; 
                        margin.Right -= Change; 
                        red.Margin = margin; 
                        if (SliderNext < 175 || margin.Left < 125) 
                        { 
                            LocationText.Text = "Request Rejected"; 
                            ////vibrate 
                            //VibrationDevice VibrationDevice = VibrationDevice.GetDefault(); 
                            //VibrationDevice.Vibrate(TimeSpan.FromMilliseconds(200)); 
 
 
                            //insert events here 
 
                            //end events 
                            while (margin.Left <= 250) 
                            { 
                                margin.Left += 5; 
                                margin.Right -= 5; 
                                red.Margin = margin; 
                                await Task.Delay(TimeSpan.FromMilliseconds(10)); 
                            } 
                            //Comment Slider Status in order to lock the slider 
                            SliderStatus = false; 
                            return; 
                        } 
                    } 
                    SliderPrev = SliderNext; 
                } 
            } 
            else 
            { 
                SliderStatus = false; 
                return; 
            } 
        }

Source Code Files