How to add mediaelement seek bar

Question

I have tv series project and I am using mediaelement. But I need help for seek bar. How to add this? How to make seek bar slider like MediaPlayerLauncher?

I'm try some thinks like this:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <MediaElement x:Name="player1" MediaOpened="player1_MediaOpened" CurrentStateChanged="player1_CurrentStateChanged" />
        <ListBox x:Name="alternatifliste" FontSize="20" FontStyle="Italic" FontWeight="Bold" Foreground="White" Margin="677,98,10,153" SelectionChanged="alternatifliste_SelectionChanged" />

    </Grid>

    <Button x:Name="play" Content="play" HorizontalAlignment="Left" Margin="94,336,0,0" Grid.Row="1" VerticalAlignment="Top" Click="play_Click"/>
    <Button x:Name="stop" Content="stop" HorizontalAlignment="Left" Margin="331,336,0,0" Grid.Row="1" VerticalAlignment="Top" Click="stop_Click"/>
    <Slider Name="timelineSlider"  Margin="0,68,0,244" Grid.Row="1" ValueChanged="timelineSlider_ValueChanged" />
</Grid>

My project:

İts code:

private void player1_MediaOpened(object sender, RoutedEventArgs e)
{
    TimeSpan ts = player1.NaturalDuration.TimeSpan;
    timelineSlider.Maximum = ts.TotalSeconds;
    timelineSlider.SmallChange = 1;
    timelineSlider.LargeChange = Math.Min(10, ts.Seconds / 10);
}

private void seekBar_DragCompleted(object sender, DragCompletedEventArgs e)
{
    player1.Position = TimeSpan.FromSeconds(timelineSlider.Value);
}

private void timelineSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    player1.Position = TimeSpan.FromSeconds(timelineSlider.Value);

}

private void player1_CurrentStateChanged(object sender, RoutedEventArgs e)
{
    //timelineSlider.Value = player1.Position.Seconds;
}

I want like this:

Answer 1

Just edit the style of the Slider if you wish to look like that one. I made comments on where you need to change.

In App.xaml, it should look something like this.

<Application>
    <!--Application Resources-->
    <Application.Resources>
        <Style x:Key="Chubs_SliderStyle" TargetType="Slider">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Maximum" Value="10"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Value" Value="0"/>
            <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
                                            <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">

                                <!-- **** Change the height of these two rectangles to make the slider smaller -->
                                <Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                                <Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">
                                    <Rectangle.Clip>
                                        <RectangleGeometry Rect="0, 0, 6, 12"/>
                                    </Rectangle.Clip>
                                </Rectangle>

                                <!-- **** this is the white rectangle thing, change the height and width if you want to make it smaller -->
                                <Rectangle x:Name="HorizontalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="Left" Height="24" Margin="0,16,0,44" Width="12">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>


                            </Grid>
                            <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                                <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12"/>
                                <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12">
                                    <Rectangle.Clip>
                                        <RectangleGeometry Rect="0, 0, 12, 6"/>
                                    </Rectangle.Clip>
                                </Rectangle>
                                <Rectangle x:Name="VerticalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" Height="12" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

---

Now you can reference your new style in any xaml file you like.

<Slider Style="{StaticResource Chubs_SliderStyle}"></Slider>