WPF - Размер слайдера

Question

Я работаю над аудиоплеером с двумя ползунками; один служит временной шкалой, а другой служит для регулировки громкости. Я изменил шаблон слайдера по умолчанию, чтобы ползунки выглядели так, как я хотел, чтобы они выглядели. В основном я только изменил цвета и создал два отдельных стиля для части слайдера THUMB. Они называются: SliderThumbStyle и SliderThumbStyleVertical . Горизонтальный слайдер работает просто отлично. У меня проблема с вертикальным слайдером. Это не тот размер, который должен быть. Я попытался установить свойство height в моем MainWindow, но это не работает (хотя изменение свойства width горизонтального слайдера работает).

Мой отредактированный шаблон выглядит так (в 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" />

Answer 1

Я не мог полностью понять, какой вывод вы хотите, но просто используйте приведенное ниже утверждение и убедитесь, что вы ожидаете этого.Если нет, пожалуйста, извините, и если вы можете предоставить дополнительную информацию, я могу помочь вам.

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