改变滑块的高度

时间：2013-08-27 07:10:58

标签： c# wpf slider windows-store-apps

我有一个滑块。当我设置其高度时，选择边框会改变，但滑块高度仍然相同（22px）。

这是一个截图： enter image description here

我相信我需要更改默认样式中的某些属性，但我无法理解 - 我想使高度动态 - 如果我更改为200将为200，如果我更改为158将为158和等......

我通过将HorizontalThumb Height更改为特定高度（更改为不同于我设置的高度），成功将高度更改为特定高度

1 个答案:

答案 0 :(得分：2)

更新2 

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="SliderRow" />
        <RowDefinition Height="0.5*" />
        <RowDefinition Height="0.1524*" />
    </Grid.RowDefinitions>
    <Button Click="Button_Click_1" Content="Mail" Visibility="Collapsed" />
    <Slider Height="{Binding Path=ActualHeight,ElementName=SliderRow}" Style="{StaticResource MyCustomSlider}"/>
</Grid>

更新1

好的，我得到了你想要的东西。当您增加滑块本身的高度时，您也希望增加轨道高度。然后你需要自定义滑块。我将{StaticResource SliderTrackThemeHeight}替换为{TemplateBinding Height}，因此当滑块的高度增加时，滑块轨道也会增加。

风格

<Style TargetType="Slider" x:Key="MyCustomSlider">
    <Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource SliderBorderThemeThickness}" />
    <Setter Property="Foreground" Value="{StaticResource SliderTrackDecreaseBackgroundThemeBrush}" />
    <Setter Property="ManipulationMode" Value="None" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.Resources>
                        <Style TargetType="Thumb" x:Key="SliderThumbStyle">
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="BorderBrush" Value="{StaticResource SliderThumbBorderThemeBrush}" />
                            <Setter Property="Background" Value="{StaticResource SliderThumbBackgroundThemeBrush}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalBorder"
                                                            Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalBorder"
                                                            Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalInlineTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalInlineTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhiteHorizontal"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlackHorizontal"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhiteVertical"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlackVertical"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalTemplate" Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="17" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="32" />
                        </Grid.RowDefinitions>

                        <Rectangle x:Name="HorizontalTrackRect"
                            Fill="{TemplateBinding Background}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="HorizontalDecreaseRect"
                            Fill="{TemplateBinding Foreground}"
                            Grid.Row="1" />
                        <TickBar x:Name="TopTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Height="{StaticResource SliderOutsideTickBarThemeHeight}"
                            VerticalAlignment="Bottom"
                            Margin="0,0,0,2"
                            Grid.ColumnSpan="3" />
                        <TickBar x:Name="HorizontalInlineTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}"
                            Height="{TemplateBinding Height}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <TickBar x:Name="BottomTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Height="{StaticResource SliderOutsideTickBarThemeHeight}"
                            VerticalAlignment="Top"
                            Margin="0,2,0,0"
                            Grid.Row="2"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="HorizontalBorder"
                            Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <Thumb x:Name="HorizontalThumb"
                        Background="{StaticResource SliderThumbBackgroundThemeBrush}"
                        Style="{StaticResource SliderThumbStyle}"
                        DataContext="{TemplateBinding Value}"
                        Height="{TemplateBinding Height}"
                        Width="{TemplateBinding Height}"
                        Grid.Row="1"
                        Grid.Column="1" />
                        <Rectangle x:Name="FocusVisualWhiteHorizontal"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="FocusVisualBlackHorizontal"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                    </Grid>

                    <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="17" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="17" />
                        </Grid.ColumnDefinitions>

                        <Rectangle x:Name="VerticalTrackRect"
                            Fill="{TemplateBinding Background}"
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <Rectangle x:Name="VerticalDecreaseRect"
                            Fill="{TemplateBinding Foreground}"
                            Grid.Column="1"
                            Grid.Row="2" />
                        <TickBar x:Name="LeftTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Width="{StaticResource SliderOutsideTickBarThemeHeight}"
                            HorizontalAlignment="Right"
                            Margin="0,0,2,0"
                            Grid.RowSpan="3" />
                        <TickBar x:Name="VerticalInlineTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}"
                            Width="{TemplateBinding Height}"
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <TickBar x:Name="RightTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Width="{StaticResource SliderOutsideTickBarThemeHeight}"
                            HorizontalAlignment="Left"
                            Margin="2,0,0,0"
                            Grid.Column="2"
                            Grid.RowSpan="3" />
                        <Rectangle x:Name="VerticalBorder"
                            Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}"                                
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <Thumb x:Name="VerticalThumb"
                        Background="{StaticResource SliderThumbBackgroundThemeBrush}"
                        Style="{StaticResource SliderThumbStyle}"
                        DataContext="{TemplateBinding Value}"
                        Width="{TemplateBinding Height}"
                        Height="{TemplateBinding Height}"
                        Grid.Row="1"
                        Grid.Column="1" />
                        <Rectangle x:Name="FocusVisualWhiteVertical"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="FocusVisualBlackVertical"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法

<Slider Height="72" VerticalAlignment="Center" HorizontalAlignment="Center" Width="500" Style="{StaticResource MyCustomSlider}"/>

滑块的轨道高度通过标准风格和标准分配。资源。它的关键是SliderTrackThemeHeight，默认值为11.所以你只需要在App.xaml中写下以下行，无论何时你想要更改它，你都可以访问资源并进行更改。

<x:Double x:Key="SliderTrackThemeHeight">50</x:Double>

您可以像这样设置代码。

Application.Current.Resources["SliderTrackThemeHeight"] = YOUR_DYNAMIC_VALUE;

Slider styles and templates - MSDN

相关问题
最新问题