mediaelement seek bar를 추가하는 방법

Question

TV 시리즈 프로젝트가 있고 mediaelement를 사용하고 있습니다. 하지만 탐색 바에 도움이 필요해. 이것을 추가하는 방법? MediaPlayerLauncher와 같은 탐색 막대 슬라이더를 만드는 방법은 무엇입니까?

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

내 프로젝트 :

해당 코드 :

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; 
} 

내가 같이 원하는 :

Answer 1

난

는 일부는 다음과 같이 생각하십시오 그냥 전자 슬라이더 스타일을 원한다면 Slider 스타일을 선택하십시오. 변경해야 할 부분에 대해 의견을 말했습니다.

app.xaml에는 다음과 같이 표시됩니다.

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

---

지금 당신은 당신이 원하는 XAML 파일에 새 스타일을 참조 할 수 있습니다.

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