WPF - 滑塊大小

我正在製作一個有兩個滑塊的音頻播放器;一個用作時間線，另一個用於調整音量。我更改了滑塊的默認模板，因此滑塊看起來像我希望他們看起來。基本上我只改變了顏色，爲滑塊的THUMB部分創建了兩個分離的樣式。他們被稱爲：SliderThumbStyle和SliderThumbStyleVertical。水平滑塊工作得很好。我有一個垂直滑塊的問題。這應該不是它的大小。我已經嘗試在我的MainWindow中設置height屬性，但這不起作用（雖然更改了水平滑塊的寬度屬性）。WPF - 滑塊大小

我編輯的模板看起來像（在App.xaml中）：

 <Style x:Key="SliderButtonStyle" 
    TargetType="{x:Type RepeatButton}"> 
     <Setter Property="SnapsToDevicePixels" 
     Value="true" /> 
     <Setter Property="OverridesDefaultStyle" 
     Value="true" /> 
     <Setter Property="IsTabStop" 
     Value="false" /> 
     <Setter Property="Focusable" 
     Value="false" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type RepeatButton}"> 
        <Border Background="Transparent" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <!-- SLIDER THUMB STYLE VERTICAL--> 
    <Style x:Key="SliderThumbStyleVertical" 
    TargetType="{x:Type Thumb}"> 
     <Setter Property="SnapsToDevicePixels" 
     Value="true" /> 
     <Setter Property="OverridesDefaultStyle" 
     Value="true" /> 
     <Setter Property="Height" 
     Value="11" /> 
     <Setter Property="Width" 
     Value="22" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Rectangle x:Name="Rectangle" 
      StrokeThickness="1"> 
         <Rectangle.Stroke> 
          <LinearGradientBrush StartPoint="0,0" 
          EndPoint="0,1"> 
           <LinearGradientBrush.GradientStops> 
            <GradientStopCollection> 
             <GradientStop Color="Black" 
          Offset="0.0" /> 
             <GradientStop Color="Black" 
          Offset="1.0" /> 
            </GradientStopCollection> 
           </LinearGradientBrush.GradientStops> 
          </LinearGradientBrush> 
         </Rectangle.Stroke> 
         <Rectangle.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" 
          StartPoint="0.5,0"> 
           <GradientStop Color="Orange" 
         Offset="1" /> 
           <GradientStop Color="OrangeRed" /> 
          </LinearGradientBrush> 
         </Rectangle.Fill> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource ControlMouseOverColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource ControlPressedColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource DisabledControlDarkColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Rectangle> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style x:Key="SliderThumbStyle" 
    TargetType="{x:Type Thumb}"> 
     <Setter Property="SnapsToDevicePixels" 
     Value="true" /> 
     <Setter Property="OverridesDefaultStyle" 
     Value="true" /> 
     <Setter Property="Height" 
     Value="22" /> 
     <Setter Property="Width" 
     Value="11" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Thumb}"> 
        <Rectangle x:Name="Rectangle" 
      StrokeThickness="1"> 
         <Rectangle.Stroke> 
          <LinearGradientBrush StartPoint="0,0" 
          EndPoint="0,1"> 
           <LinearGradientBrush.GradientStops> 
            <GradientStopCollection> 
             <GradientStop Color="Black" 
          Offset="0.0" /> 
             <GradientStop Color="Black" 
          Offset="1.0" /> 
            </GradientStopCollection> 
           </LinearGradientBrush.GradientStops> 
          </LinearGradientBrush> 
         </Rectangle.Stroke> 
         <Rectangle.Fill> 
          <LinearGradientBrush EndPoint="0.5,1" 
          StartPoint="0.5,0"> 
           <GradientStop Color="Orange" 
         Offset="1" /> 
           <GradientStop Color="OrangeRed" /> 
          </LinearGradientBrush> 
         </Rectangle.Fill> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource ControlMouseOverColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource ControlPressedColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). 
       (GradientBrush.GradientStops)[0].(GradientStop.Color)" 
              Storyboard.TargetName="Rectangle"> 
              <EasingColorKeyFrame KeyTime="0" 
            Value="{StaticResource DisabledControlDarkColor}" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Rectangle> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <ControlTemplate x:Key="HorizontalSlider" 
      TargetType="{x:Type Slider}"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto" /> 
       <RowDefinition Height="Auto" 
       MinHeight="{TemplateBinding MinHeight}" /> 
       <RowDefinition Height="Auto" /> 
      </Grid.RowDefinitions> 
      <TickBar x:Name="TopTick" 
     SnapsToDevicePixels="True" 
     Placement="Top" 
     Height="4" 
     Visibility="Collapsed"> 
       <TickBar.Fill> 
        <SolidColorBrush Color="{DynamicResource GlyphColor}" /> 
       </TickBar.Fill> 
      </TickBar> 
      <Border x:Name="TrackBackground" 
     Margin="0" 
     CornerRadius="0" 
     Height="7" 
     Grid.Row="1" 
     BorderThickness="1"> 
       <Border.BorderBrush> 
        <LinearGradientBrush StartPoint="0,0" 
         EndPoint="0,1"> 
         <LinearGradientBrush.GradientStops> 
          <GradientStopCollection> 
           <GradientStop Color="Black" 
         Offset="0.0" /> 
           <GradientStop Color="Black" 
         Offset="1.0" /> 
          </GradientStopCollection> 
         </LinearGradientBrush.GradientStops> 
        </LinearGradientBrush> 
       </Border.BorderBrush> 
       <Border.Background> 
        <LinearGradientBrush StartPoint="0,0" 
         EndPoint="0,1"> 
         <LinearGradientBrush.GradientStops> 
          <GradientStopCollection> 
           <GradientStop Color="Orange" 
         Offset="0.0" /> 
           <GradientStop Color="OrangeRed" 
         Offset="1.0" /> 
          </GradientStopCollection> 
         </LinearGradientBrush.GradientStops> 
        </LinearGradientBrush> 
       </Border.Background> 
      </Border> 
      <Track Grid.Row="1" 
     x:Name="PART_Track"> 
       <Track.DecreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" 
        Command="Slider.DecreaseLarge" /> 
       </Track.DecreaseRepeatButton> 
       <Track.Thumb> 
        <Thumb Style="{StaticResource SliderThumbStyle}" /> 
       </Track.Thumb> 
       <Track.IncreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" 
        Command="Slider.IncreaseLarge" /> 
       </Track.IncreaseRepeatButton> 
      </Track> 
      <TickBar x:Name="BottomTick" 
     SnapsToDevicePixels="True" 
     Grid.Row="2" 
     Fill="{TemplateBinding Foreground}" 
     Placement="Bottom" 
     Height="4" 
     Visibility="Collapsed" /> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="TickPlacement" 
     Value="TopLeft"> 
       <Setter TargetName="TopTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
      <Trigger Property="TickPlacement" 
     Value="BottomRight"> 
       <Setter TargetName="BottomTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
      <Trigger Property="TickPlacement" 
     Value="Both"> 
       <Setter TargetName="TopTick" 
      Property="Visibility" 
      Value="Visible" /> 
       <Setter TargetName="BottomTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    <!-- VERTICAL SLIDER--> 
    <ControlTemplate x:Key="VerticalSlider" 
      TargetType="{x:Type Slider}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="Auto" 
        MinWidth="{TemplateBinding MinWidth}" /> 
       <ColumnDefinition Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <TickBar x:Name="TopTick" 
     SnapsToDevicePixels="True" 
     Placement="Left" 
     Width="4" 
     Visibility="Collapsed"> 
       <TickBar.Fill> 
        <SolidColorBrush Color="{DynamicResource GlyphColor}" /> 
       </TickBar.Fill> 
      </TickBar> 
     <!-- DOLZINA TRACK BARA --> 
      <Border x:Name="TrackBackground" 
     Margin="0" 
     CornerRadius="0" 
     Width="7" 
     Grid.Column="1" 
     BorderThickness="1"> 
       <Border.BorderBrush> 
        <LinearGradientBrush StartPoint="0,0" 
         EndPoint="1,0"> 
         <LinearGradientBrush.GradientStops> 
          <GradientStopCollection> 
           <GradientStop Color="Black" 
         Offset="0.0" /> 
           <GradientStop Color="Black" 
         Offset="1.0" /> 
          </GradientStopCollection> 
         </LinearGradientBrush.GradientStops> 
        </LinearGradientBrush> 
       </Border.BorderBrush> 
       <Border.Background> 
        <LinearGradientBrush EndPoint="1,0" 
         StartPoint="0.25,0"> 
         <GradientStop Color="Orange" 
        Offset="0" /> 
         <GradientStop Color="OrangeRed" 
        Offset="1" /> 
        </LinearGradientBrush> 
       </Border.Background> 
      </Border> 
      <Track Grid.Column="1" 
     x:Name="PART_Track"> 
       <Track.DecreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" 
        Command="Slider.DecreaseLarge" /> 
       </Track.DecreaseRepeatButton> 
       <Track.Thumb> 
        <!--DEFAULT THUMB SLIDER STYLE--> 
        <Thumb Style="{StaticResource SliderThumbStyleVertical}" /> 
       </Track.Thumb> 
       <Track.IncreaseRepeatButton> 
        <RepeatButton Style="{StaticResource SliderButtonStyle}" 
        Command="Slider.IncreaseLarge" /> 
       </Track.IncreaseRepeatButton> 
      </Track> 
      <TickBar x:Name="BottomTick" 
     SnapsToDevicePixels="True" 
     Grid.Column="2" 
     Fill="{TemplateBinding Foreground}" 
     Placement="Right" 
     Width="4" 
     Visibility="Collapsed" /> 
     </Grid> 
     <ControlTemplate.Triggers> 
      <Trigger Property="TickPlacement" 
     Value="TopLeft"> 
       <Setter TargetName="TopTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
      <Trigger Property="TickPlacement" 
     Value="BottomRight"> 
       <Setter TargetName="BottomTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
      <Trigger Property="TickPlacement" 
     Value="Both"> 
       <Setter TargetName="TopTick" 
      Property="Visibility" 
      Value="Visible" /> 
       <Setter TargetName="BottomTick" 
      Property="Visibility" 
      Value="Visible" /> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    <Style TargetType="{x:Type Slider}"> 
     <Setter Property="SnapsToDevicePixels" 
     Value="true" /> 
     <Setter Property="OverridesDefaultStyle" 
     Value="true" /> 
     <Style.Triggers> 
      <Trigger Property="Orientation" 
     Value="Horizontal"> 
       <Setter Property="MinWidth" 
      Value="104" /> 
       <Setter Property="MinHeight" 
      Value="21" /> 
       <Setter Property="Template" 
      Value="{StaticResource HorizontalSlider}" /> 
      </Trigger> 
      <Trigger Property="Orientation" 
     Value="Vertical"> 
       <Setter Property="MinWidth" 
      Value="21" /> 
       <Setter Property="MinHeight" 
      Value="104" /> 
       <Setter Property="Template" 
      Value="{StaticResource VerticalSlider}" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style>

而且我的兩個滑塊的XAML的樣子：

<Slider Height="22" HorizontalAlignment="Left" Minimum="0" Maximum="100"  Focusable="False" LargeChange="0" Thumb.DragCompleted="slider1_DragCompleted" Margin="16,103,0,0" Name="slider1" VerticalAlignment="Top" Width="469" Grid.ColumnSpan="2" /> 
<Slider Width="20" Height="52" Minimum="0" Maximum="100" Orientation="Vertical" HorizontalAlignment="Left" Margin="325,41,0,0" Name="slider2" VerticalAlignment="Top" ValueChanged="slider2_ValueChanged" />

來源

2011-12-29 TheAptKid

我不能完全明白輸出你想要但只是使用這個下面的聲明，看看是你期望的。如果不是，請原諒我，如果你能提供更多的信息，可能我可以幫你。

 <Slider 
      Minimum="0" 
      Maximum="100" 
      Focusable="False" 
      LargeChange="0" 
      Thumb.DragCompleted="slider1_DragCompleted" 
      Margin="16,103,0,0" 
      Name="slider1" 
      Grid.ColumnSpan="2" VerticalAlignment="Center" /> 
    <Slider 
      Minimum="0" 
      Maximum="100" 
      Orientation="Vertical" 
      Margin="325,0,0,0" 
      Name="slider2" 
      ValueChanged="slider2_ValueChanged" HorizontalAlignment="Left" />

來源

2011-12-30 04:57:25

謝謝您的回覆。我試着用你的滑塊xaml。所以我現在的問題是，我可以在哪裏設置我的滑塊有多大或多長，而無需在滑塊xaml中設置這些屬性。水平滑塊仍然可以，但垂直太大。 – TheAptKid 2011-12-30 07:45:50

你可以在你的代碼後面設置：slider2.width = 100; – Smolla 2013-02-03 20:48:33

WPF - 滑塊大小

回答

相關問題