1

我有一个滑块。当我设置它的高度时,选择边框会发生变化,但滑块高度仍然相同(22px)。

这是一个屏幕截图: 在此处输入图像描述

我相信我需要更改默认样式的一些属性,但我不明白什么 - 我想让高度动态 - 如果我更改为 200 它将是 200,如果我更改为 158 它将是 158 等等。 ..

我通过更改特定高度成功将高度更改HorizontalThumb Height为特定高度(更改为与我设置的高度不同的高度)

4

1 回答 1

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;

滑块样式和模板 - MSDN

于 2013-08-27T08:42:39.510 回答