locked
slider and style RRS feed

  • Question

  • Hi,

    i would like the default slider to have a slider it's (handle/grip/button) that is smaller than the default displayed one.

    Is it possible to change the look by using a style?

    <Grid> 
            <Slider> 
                <Slider.Style> 
                    <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">  
                        <Setter Property="Height" Value="15"/>  
                    </Style> 
                </Slider.Style> 
            </Slider> 
        </Grid> 
    I got this far but i get a error message key attribute can only be used on a tag contained in a dictionary.
    Wednesday, December 24, 2008 1:46 PM

Answers

  • You can use ControlTemplate to customize the Slider Control.
    In fact you can make the slider as you want.
    Of course you can change it height.
    For example:



    Refrence:
    Using Templates to Customize WPF Controls

    ----------------------------------------------------------

    Please mark this thread as answer if you think it is helpful.

    Thank you!
    • Proposed as answer by Tao Liang Friday, December 26, 2008 2:03 AM
    • Marked as answer by Tao Liang Friday, December 26, 2008 2:16 AM
    Thursday, December 25, 2008 9:31 AM
  • <Window     
        x:Class="WpfApplication1.Window1" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:s="clr-namespace:System;assembly=mscorlib"  
        >    
        <Window.Resources> 
            <ControlTemplate x:Key="templateSlider3D" TargetType="Slider"
                <Border BorderBrush="{TemplateBinding BorderBrush}"  
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}"
                    <Grid> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="Auto" /> 
                            <ColumnDefinition Width="50" /> 
                            <ColumnDefinition Width="Auto" /> 
                        </Grid.ColumnDefinitions> 
                        <TickBar Grid.Column="0" Name="LeftTick" 
                                 Width="10" Placement="Left" Visibility="Collapsed"  
                                 Fill="{TemplateBinding Foreground}" /> 
     
                        <TickBar Grid.Column="2" Name="RightTick" 
                                 Width="10" Placement="Right" Visibility="Collapsed"  
                                 Fill="{TemplateBinding Foreground}" /> 
                        <Border Grid.Column="1" 
                                Margin="21 22 21 22" CornerRadius="2 2 2 2" 
                                BorderBrush="Black" BorderThickness="1" 
                                Background="LightGray" /> 
                        <Track Grid.Column="1" Name="PART_Track"
                            <Track.DecreaseRepeatButton> 
                                <RepeatButton Command="Slider.DecreaseLarge" 
                                              IsTabStop="False" Focusable="False"
                                    <RepeatButton.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Transparent" /> 
                                        </ControlTemplate> 
                                    </RepeatButton.Template> 
                                </RepeatButton> 
                            </Track.DecreaseRepeatButton> 
                            <Track.IncreaseRepeatButton> 
                                <RepeatButton Command="Slider.IncreaseLarge" 
                                              IsTabStop="False" Focusable="False"
                                    <RepeatButton.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Transparent" /> 
                                        </ControlTemplate> 
                                    </RepeatButton.Template> 
                                </RepeatButton> 
                            </Track.IncreaseRepeatButton> 
                            <Track.Thumb> 
                                <Thumb Height="50"
                                    <Thumb.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Black"
     
                                                <Rectangle 
                                                        Fill="{TemplateBinding TextElement.Foreground}" 
                                                        Name="ForegroundRect" 
                                                        Margin="-1,-1,-1,-1" 
                                                        Opacity="0.5" /> 
                                            </Border> 
                                            <ControlTemplate.Triggers> 
                                                <Trigger 
                                                        Property="Thumb.IsDragging"
                                                    <Setter 
                                                            Property="TextElement.Foreground"
                                                        <Setter.Value> 
                                                            <DynamicResource 
                                                                    ResourceKey="{x:Static SystemColors.ControlLightLightBrushKey}" /> 
                                                        </Setter.Value> 
                                                    </Setter> 
                                                    <Trigger.Value> 
                                                        <s:Boolean>True</s:Boolean> 
                                                    </Trigger.Value> 
                                                </Trigger> 
                                                <Trigger 
                                                        Property="UIElement.IsEnabled"
                                                    <Setter 
                                                            Property="TextElement.Foreground"
                                                        <Setter.Value> 
                                                            <DynamicResource 
                    ResourceKey="{x:Static SystemColors.ControlLightLightBrushKey}" /> 
                                                        </Setter.Value> 
                                                    </Setter> 
                                                    <Trigger.Value> 
                                                        <s:Boolean>False</s:Boolean> 
                                                    </Trigger.Value> 
                                                </Trigger> 
                                            </ControlTemplate.Triggers> 
                                        </ControlTemplate> 
                                    </Thumb.Template> 
                                </Thumb> 
                            </Track.Thumb> 
                        </Track> 
                    </Grid> 
                </Border> 
                <ControlTemplate.Triggers> 
                    <Trigger Property="Slider.TickPlacement" Value="TopLeft"
                        <Setter TargetName="LeftTick" Property="Visibility"  
                                                      Value="Visible" /> 
                    </Trigger> 
                    <Trigger Property="Slider.TickPlacement" Value="BottomRight"
                        <Setter TargetName="RightTick" Property="Visibility"  
                                                       Value="Visible" /> 
                    </Trigger> 
                    <Trigger Property="Slider.TickPlacement" Value="Both"
                        <Setter TargetName="LeftTick" Property="Visibility"  
                                                      Value="Visible" /> 
                        <Setter TargetName="RightTick" Property="Visibility"  
                                                       Value="Visible" /> 
                    </Trigger> 
                </ControlTemplate.Triggers> 
            </ControlTemplate> 
            <Style x:Key="styleSlider3D" 
                   TargetType="Slider"
                <Setter Property="Orientation" Value="Vertical" /> 
                <Setter Property="Minimum" Value="-25" /> 
                <Setter Property="Maximum" Value="25" /> 
                <Setter Property="Template"  
                        Value="{StaticResource templateSlider3D}" /> 
            </Style> 
        </Window.Resources> 
        <StackPanel Orientation="Horizontal"
            <Slider Name="slider" Margin="50" 
                    Style="{StaticResource styleSlider3D}" 
                    LargeChange="5" SmallChange="1"  
                    TickPlacement="Both" TickFrequency="5" /> 
            <TextBlock Text="{Binding ElementName=slider, Path=Value}"  
                       VerticalAlignment="Center" Width="100" />       
        </StackPanel> 
    </Window> 
     

    • Proposed as answer by Tao Liang Friday, December 26, 2008 2:03 AM
    • Marked as answer by Tao Liang Friday, December 26, 2008 9:14 AM
    Friday, December 26, 2008 2:02 AM

All replies

  • You can use ControlTemplate to customize the Slider Control.
    In fact you can make the slider as you want.
    Of course you can change it height.
    For example:



    Refrence:
    Using Templates to Customize WPF Controls

    ----------------------------------------------------------

    Please mark this thread as answer if you think it is helpful.

    Thank you!
    • Proposed as answer by Tao Liang Friday, December 26, 2008 2:03 AM
    • Marked as answer by Tao Liang Friday, December 26, 2008 2:16 AM
    Thursday, December 25, 2008 9:31 AM
  • <Window     
        x:Class="WpfApplication1.Window1" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:s="clr-namespace:System;assembly=mscorlib"  
        >    
        <Window.Resources> 
            <ControlTemplate x:Key="templateSlider3D" TargetType="Slider"
                <Border BorderBrush="{TemplateBinding BorderBrush}"  
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}"
                    <Grid> 
                        <Grid.ColumnDefinitions> 
                            <ColumnDefinition Width="Auto" /> 
                            <ColumnDefinition Width="50" /> 
                            <ColumnDefinition Width="Auto" /> 
                        </Grid.ColumnDefinitions> 
                        <TickBar Grid.Column="0" Name="LeftTick" 
                                 Width="10" Placement="Left" Visibility="Collapsed"  
                                 Fill="{TemplateBinding Foreground}" /> 
     
                        <TickBar Grid.Column="2" Name="RightTick" 
                                 Width="10" Placement="Right" Visibility="Collapsed"  
                                 Fill="{TemplateBinding Foreground}" /> 
                        <Border Grid.Column="1" 
                                Margin="21 22 21 22" CornerRadius="2 2 2 2" 
                                BorderBrush="Black" BorderThickness="1" 
                                Background="LightGray" /> 
                        <Track Grid.Column="1" Name="PART_Track"
                            <Track.DecreaseRepeatButton> 
                                <RepeatButton Command="Slider.DecreaseLarge" 
                                              IsTabStop="False" Focusable="False"
                                    <RepeatButton.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Transparent" /> 
                                        </ControlTemplate> 
                                    </RepeatButton.Template> 
                                </RepeatButton> 
                            </Track.DecreaseRepeatButton> 
                            <Track.IncreaseRepeatButton> 
                                <RepeatButton Command="Slider.IncreaseLarge" 
                                              IsTabStop="False" Focusable="False"
                                    <RepeatButton.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Transparent" /> 
                                        </ControlTemplate> 
                                    </RepeatButton.Template> 
                                </RepeatButton> 
                            </Track.IncreaseRepeatButton> 
                            <Track.Thumb> 
                                <Thumb Height="50"
                                    <Thumb.Template> 
                                        <ControlTemplate> 
                                            <Border Background="Black"
     
                                                <Rectangle 
                                                        Fill="{TemplateBinding TextElement.Foreground}" 
                                                        Name="ForegroundRect" 
                                                        Margin="-1,-1,-1,-1" 
                                                        Opacity="0.5" /> 
                                            </Border> 
                                            <ControlTemplate.Triggers> 
                                                <Trigger 
                                                        Property="Thumb.IsDragging"
                                                    <Setter 
                                                            Property="TextElement.Foreground"
                                                        <Setter.Value> 
                                                            <DynamicResource 
                                                                    ResourceKey="{x:Static SystemColors.ControlLightLightBrushKey}" /> 
                                                        </Setter.Value> 
                                                    </Setter> 
                                                    <Trigger.Value> 
                                                        <s:Boolean>True</s:Boolean> 
                                                    </Trigger.Value> 
                                                </Trigger> 
                                                <Trigger 
                                                        Property="UIElement.IsEnabled"
                                                    <Setter 
                                                            Property="TextElement.Foreground"
                                                        <Setter.Value> 
                                                            <DynamicResource 
                    ResourceKey="{x:Static SystemColors.ControlLightLightBrushKey}" /> 
                                                        </Setter.Value> 
                                                    </Setter> 
                                                    <Trigger.Value> 
                                                        <s:Boolean>False</s:Boolean> 
                                                    </Trigger.Value> 
                                                </Trigger> 
                                            </ControlTemplate.Triggers> 
                                        </ControlTemplate> 
                                    </Thumb.Template> 
                                </Thumb> 
                            </Track.Thumb> 
                        </Track> 
                    </Grid> 
                </Border> 
                <ControlTemplate.Triggers> 
                    <Trigger Property="Slider.TickPlacement" Value="TopLeft"
                        <Setter TargetName="LeftTick" Property="Visibility"  
                                                      Value="Visible" /> 
                    </Trigger> 
                    <Trigger Property="Slider.TickPlacement" Value="BottomRight"
                        <Setter TargetName="RightTick" Property="Visibility"  
                                                       Value="Visible" /> 
                    </Trigger> 
                    <Trigger Property="Slider.TickPlacement" Value="Both"
                        <Setter TargetName="LeftTick" Property="Visibility"  
                                                      Value="Visible" /> 
                        <Setter TargetName="RightTick" Property="Visibility"  
                                                       Value="Visible" /> 
                    </Trigger> 
                </ControlTemplate.Triggers> 
            </ControlTemplate> 
            <Style x:Key="styleSlider3D" 
                   TargetType="Slider"
                <Setter Property="Orientation" Value="Vertical" /> 
                <Setter Property="Minimum" Value="-25" /> 
                <Setter Property="Maximum" Value="25" /> 
                <Setter Property="Template"  
                        Value="{StaticResource templateSlider3D}" /> 
            </Style> 
        </Window.Resources> 
        <StackPanel Orientation="Horizontal"
            <Slider Name="slider" Margin="50" 
                    Style="{StaticResource styleSlider3D}" 
                    LargeChange="5" SmallChange="1"  
                    TickPlacement="Both" TickFrequency="5" /> 
            <TextBlock Text="{Binding ElementName=slider, Path=Value}"  
                       VerticalAlignment="Center" Width="100" />       
        </StackPanel> 
    </Window> 
     

    • Proposed as answer by Tao Liang Friday, December 26, 2008 2:03 AM
    • Marked as answer by Tao Liang Friday, December 26, 2008 9:14 AM
    Friday, December 26, 2008 2:02 AM
  • Thanks, this works.
    Monday, December 29, 2008 7:25 AM