如何創建與中心的Windows Phone 8.1滑塊？

如何創建與中心的Windows Phone 8.1滑塊？就像在gif文件中一樣。任何想法？它真的嗎？如何設置參考中心？如何創建與中心的Windows Phone 8.1滑塊？

2016-03-03 arsenium

有兩種方法，你可以做到這一點：其寬度改變滑塊內

1.Have兩個虛擬左和右矩形時的實際矩形變化的寬度。

的代碼：

XAML：

<Style x:Key="SliderStyle3" 
      TargetType="Slider"> 
     <Setter Property="Background" 
       Value="{ThemeResource SliderTrackBackgroundThemeBrush}" /> 
     <Setter Property="BorderBrush" 
       Value="{ThemeResource SliderBorderThemeBrush}" /> 
     <Setter Property="BorderThickness" 
       Value="{ThemeResource SliderBorderThemeThickness}" /> 
     <Setter Property="Foreground" 
       Value="{ThemeResource SliderTrackDecreaseBackgroundThemeBrush}" /> 
     <Setter Property="FontFamily" 
       Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontSize" 
       Value="{ThemeResource ControlContentThemeFontSize}" /> 
     <Setter Property="ManipulationMode" 
       Value="None" /> 
     <Setter Property="IsThumbToolTipEnabled" 
       Value="False" /> 

     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Slider"> 
        <Grid Margin="{TemplateBinding Padding}"> 
         <Grid.Resources> 
          <Style x:Key="SliderThumbStyle" 
            TargetType="Thumb"> 
           <Setter Property="BorderThickness" 
             Value="0.8" /> 
           <Setter Property="BorderBrush" 
             Value="{ThemeResource SliderThumbBorderThemeBrush}" /> 
           <Setter Property="Background" 
             Value="{ThemeResource SliderThumbBackgroundThemeBrush}" /> 
           <Setter Property="Template"> 
            <Setter.Value> 
             <ControlTemplate TargetType="Thumb"> 
              <Border BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                Background="{TemplateBinding Background}" /> 
             </ControlTemplate> 
            </Setter.Value> 
           </Setter> 
          </Style> 
         </Grid.Resources> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 

         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" 
                     Storyboard.TargetName="HorizontalBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" 
                     Storyboard.TargetName="VerticalBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="HorizontalDecreaseRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="HorizontalTrackRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" 
                     Storyboard.TargetName="HorizontalTrackRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="VerticalDecreaseRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="VerticalTrackRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" 
                     Storyboard.TargetName="VerticalTrackRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTrackDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                     Storyboard.TargetName="HorizontalThumb"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderThumbDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="HorizontalThumb"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderThumbDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" 
                     Storyboard.TargetName="VerticalThumb"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderThumbDisabledBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="VerticalThumb"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderThumbDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="TopTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="HorizontalInlineTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkInlineDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="BottomTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="LeftTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="VerticalInlineTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkInlineDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="RightTickBar"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="HeaderContentPresenter" 
              ContentTemplate="{TemplateBinding HeaderTemplate}" 
              Content="{TemplateBinding Header}" 
              Style="{StaticResource HeaderContentPresenterStyle}" /> 
         <Grid Grid.Row="1" 
           Margin="0,17.5,0,0"> 
          <Grid.Resources> 
           <usercontrols:CustomSliderConverter x:Key="localCustomSliderControlConverter" 
                    MyProperty="{Binding ActualWidth,ElementName=SliderContainer,Mode=OneTime}" /> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="1*" /> 
           <ColumnDefinition Width="1*" /> 

          </Grid.ColumnDefinitions> 
          <Rectangle Fill="Blue" 
             VerticalAlignment="Top" 
             HorizontalAlignment="Right" 
             Height="9" 
             Width="{Binding Path=Width,ElementName=HorizontalDecreaseRect,Converter={StaticResource localCustomSliderControlConverter}}" /> 
          <Rectangle Fill="Gray" 
             VerticalAlignment="Top" 
             HorizontalAlignment="Left" 
             Height="9" 
             Grid.Column="1" 
             Width="{Binding Path=Width,ElementName=HorizontalDecreaseRect,Converter={StaticResource localCustomSliderControlConverter},ConverterParameter=qwerty}" /> 
         </Grid> 
         <Grid x:Name="SliderContainer" 
           Background="Transparent" 
           Grid.Row="1"> 

          <Grid x:Name="HorizontalTemplate"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="17.5" /> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="30.5" /> 
           </Grid.RowDefinitions> 
           <Rectangle x:Name="HorizontalTrackRect" 
              Grid.ColumnSpan="3" 
              Fill="Transparent" 
              Grid.Row="1" /> 
           <Rectangle x:Name="HorizontalDecreaseRect" 
              Fill="Transparent" 
              Grid.Row="1" /> 

           <TickBar x:Name="TopTickBar" 
             Grid.ColumnSpan="3" 
             Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" 
             Height="{ThemeResource SliderOutsideTickBarThemeHeight}" 
             Margin="-4.5,0" 
             Visibility="Collapsed" /> 
           <TickBar x:Name="HorizontalInlineTickBar" 
             Grid.ColumnSpan="3" 
             Fill="{ThemeResource SliderTickMarkInlineBackgroundThemeBrush}" 
             Height="{ThemeResource SliderTrackThemeHeight}" 
             Margin="-4.5,0" 
             Grid.Row="1" 
             Visibility="Collapsed" /> 
           <TickBar x:Name="BottomTickBar" 
             Grid.ColumnSpan="3" 
             Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" 
             Height="{ThemeResource SliderOutsideTickBarThemeHeight}" 
             Margin="-4.5,0" 
             Grid.Row="2" 
             Visibility="Collapsed" /> 
           <Thumb x:Name="HorizontalThumb" 
             AutomationProperties.AccessibilityView="Raw" 
             Background="{ThemeResource SliderThumbBackgroundThemeBrush}" 
             Grid.Column="1" 
             DataContext="{TemplateBinding Value}" 
             Height="19" 
             Margin="0,13,0,0" 
             Grid.RowSpan="3" 
             Style="{StaticResource SliderThumbStyle}" 
             VerticalAlignment="Top" 
             HorizontalAlignment="Center" 
             Width="9.5" /> 
           <Rectangle x:Name="HorizontalBorder" 
              Grid.ColumnSpan="3" 
              Grid.RowSpan="3" 
              Stroke="{TemplateBinding BorderBrush}" 
              StrokeThickness="{TemplateBinding BorderThickness}" /> 
          </Grid> 
          <Grid x:Name="VerticalTemplate" 
            Visibility="Collapsed"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="13.5" /> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="13.5" /> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="*" /> 
            <RowDefinition Height="Auto" /> 
            <RowDefinition Height="Auto" /> 
           </Grid.RowDefinitions> 
           <Rectangle x:Name="VerticalTrackRect" 
              Grid.Column="1" 
              Fill="{TemplateBinding Background}" 
              Grid.RowSpan="3" 
              Stroke="{ThemeResource SliderTrackBorderThemeBrush}" /> 
           <Rectangle x:Name="VerticalDecreaseRect" 
              Grid.Column="1" 
              Fill="{TemplateBinding Foreground}" 
              Grid.Row="2" /> 
           <TickBar x:Name="LeftTickBar" 
             Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" 
             HorizontalAlignment="Right" 
             Margin="0,0,1.5,0" 
             Grid.RowSpan="3" 
             Visibility="Collapsed" 
             Width="{ThemeResource SliderOutsideTickBarThemeHeight}" /> 
           <TickBar x:Name="VerticalInlineTickBar" 
             Grid.Column="1" 
             Fill="{ThemeResource SliderTickMarkInlineBackgroundThemeBrush}" 
             Grid.RowSpan="3" 
             Visibility="Collapsed" 
             Width="{ThemeResource SliderTrackThemeHeight}" /> 
           <TickBar x:Name="RightTickBar" 
             Grid.Column="2" 
             Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" 
             HorizontalAlignment="Left" 
             Margin="1.5,0,0,0" 
             Grid.RowSpan="3" 
             Visibility="Collapsed" 
             Width="{ThemeResource SliderOutsideTickBarThemeHeight}" /> 
           <Thumb x:Name="VerticalThumb" 
             AutomationProperties.AccessibilityView="Raw" 
             Background="{ThemeResource SliderThumbBackgroundThemeBrush}" 
             Grid.Column="1" 
             DataContext="{TemplateBinding Value}" 
             Height="{ThemeResource SliderTrackThemeHeight}" 
             Grid.Row="1" 
             Style="{StaticResource SliderThumbStyle}" 
             Width="{ThemeResource SliderTrackThemeHeight}" /> 
           <Rectangle x:Name="VerticalBorder" 
              Grid.Column="1" 
              Grid.RowSpan="3" 
              Stroke="{TemplateBinding BorderBrush}" 
              StrokeThickness="{TemplateBinding BorderThickness}" /> 
          </Grid> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

值變換器代碼：

滑塊的兩個僞矩形

<Slider Style="{StaticResource SliderStyle3}" 
       x:Name="MySlider" 
       Value="50" 
       Maximum="100"> 
</Slider>

風格

public class CustomSliderConverter : DependencyObject, IValueConverter 
{ 
    public int MyProperty 
    { 
     get { return (int)GetValue(MyPropertyProperty); } 
     set { SetValue(MyPropertyProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty MyPropertyProperty = 
     DependencyProperty.Register("MyProperty", typeof(int), typeof(CustomSliderConverter), new PropertyMetadata(null)); 




    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     try 
     { 

      if (MyProperty == 0) return value; 
      if (parameter == null) 
      { 
       double d = (MyProperty/2) - (double)value; 

       Debug.WriteLine(d); 
       if (d < 0) return 0.0; 
       return d; 
      } 
      else 
      { 
       double d = (double)value - (MyProperty/2); 

       Debug.WriteLine(d); 
       if (d < 0) return 0.0; 
       return d; 

      } 
     } 
     catch (Exception) 
     { 
     } 
     return value; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
}

另一個想法是有三個滑塊，第一個用於主滑動，第二個滑塊的方向相反（左滑塊），第三個滑塊（右滑塊）。

只是mainslider的值綁定到左側和右側的滑塊象下面這樣：

XAML：

<Grid Margin="0,100,0,0"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="1*" /> 
       <ColumnDefinition Width="1*" /> 
      </Grid.ColumnDefinitions> 
      <Slider x:Name="LeftSlider" 
        IsDirectionReversed="True" 
        Style="{StaticResource nothumb}" 
        Value="{Binding Value,ElementName=MainSlider,Converter={StaticResource localSliderConverter}}" /> 
      <Slider x:Name="RightSlider" Grid.Column="1" 
        Style="{StaticResource nothumb}" 
        Value="{Binding Value, ElementName=MainSlider,Converter={StaticResource localSliderConverter},ConverterParameter=rightslider}" /> 

      <Slider Grid.ColumnSpan="2" 
        x:Name="MainSlider" 
        Style="{StaticResource mainsliderstyle}" /> 
     </Grid>

它的轉換器：

public class SliderConverter:DependencyObject,IValueConverter 
{ 


    public int MyProperty 
    { 
     get { return (int)GetValue(MyPropertyProperty); } 
     set { SetValue(MyPropertyProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty MyPropertyProperty = 
     DependencyProperty.Register("MyProperty", typeof(int), typeof(SliderConverter), new PropertyMetadata(0)); 


    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     if (parameter == null) 
     { 
      double d = (MyProperty/2) - (double)value; 

      Debug.WriteLine(d); 
      if (d < 0) return 0; 
      return d*2; 
     } 
     else 
     { 
      double d = (double)value - (MyProperty/2); 

      Debug.WriteLine(d); 
      if (d < 0) return 0.0; 
      return d*2; 

     } 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { 
     throw new NotImplementedException(); 
    } 
}

初始化在XAML中這樣說：

<usercontrols:SliderConverter x:Key="localSliderConverter" 
            MyProperty="{Binding Maximum,ElementName=MainSlider}" />

來源

2016-03-04 05:38:44

您可以使用Microsoft Blend使用狀態來創建它。正如我可以看到7個不同的狀態，所以創建7個狀態爲此控件或網格無論您使用，然後在事件或點擊按鈕觸發。

Its link for stackoverflow question which changes states on some criteria 如果你想知道它是如何工作的，那麼use this link.希望它有幫助。

來源

2016-03-04 05:46:57 Rohit

如何創建與中心的Windows Phone 8.1滑塊？

回答

相關問題