Come modellare il controllo del dispositivo di scorrimento in WPF?

Question

Voglio modellare il controllo del dispositivo di scorrimento in modo che l'altezza del pollice trascinabile sia impostata su 8 pixel.

Qual è il modo più semplice per farlo WPF?

<Slider>
    <Slider.Style>
        <!-- which xaml here? -->
    </Slider.style>
</Slider>

Answer 1

Il controllo Slider ha molte parti Thumb, RepeatButtons e una traccia.È uno di quei controlli che hanno elementi denominati, come PART_Track, a cui fa riferimento il code-behind affinché funzioni correttamente.Un buon punto di partenza è usare Blend per aiutarti.

Inizia un nuovo progetto (o crea una nuova finestra).Nella finestra XAML aggiungi quanto segue:

<ScrollBar/>

Quindi, nella finestra di progettazione di Blend, fare clic con il pulsante destro del mouse sul controllo e selezionare "Modifica parti di controllo (modello)\Modifica una copia...".Ciò effettuerà il reverse engineering del modello di controllo standard.Questo può quindi essere modificato.

L'output di Blend è questo: -

    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonNormal" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonPressed" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#D7D5C2" Offset="0"/>
        <GradientStop Color="#D7D5C2" Offset="0.05"/>
        <GradientStop Color="#E3DED3" Offset="0.06"/>
        <GradientStop Color="#FDFDF6" Offset="0.94"/>
        <GradientStop Color="#D7D5C2" Offset="0.95"/>
        <GradientStop Color="#D7D5C2" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="VerticalScrollBarPageButtonDisabled" EndPoint="1, 0" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonPressed}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonDisabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonNormal" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonPressed" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#D7D5C2" Offset="0"/>
        <GradientStop Color="#D7D5C2" Offset="0.05"/>
        <GradientStop Color="#E3DED3" Offset="0.06"/>
        <GradientStop Color="#FDFDF6" Offset="0.94"/>
        <GradientStop Color="#D7D5C2" Offset="0.95"/>
        <GradientStop Color="#D7D5C2" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="HorizontalScrollBarPageButtonDisabled" EndPoint="0, 1" StartPoint="0, 0">
        <GradientStop Color="#EEEDE5" Offset="0"/>
        <GradientStop Color="#EEEDE5" Offset="0.05"/>
        <GradientStop Color="#F3F1EC" Offset="0.06"/>
        <GradientStop Color="#FEFEFE" Offset="0.94"/>
        <GradientStop Color="#EEEDE5" Offset="0.95"/>
        <GradientStop Color="#EEEDE5" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonPressed}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonDisabled}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <Setter Property="Background" Value="{StaticResource VerticalScrollBarPageButtonNormal}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollBar}">
                    <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineUpCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>
                        <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
                            </Track.Thumb>
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
                            </Track.IncreaseRepeatButton>
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
                            </Track.DecreaseRepeatButton>
                        </Track>
                        <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineDownCommand}" Grid.Row="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <Setter Property="Background" Value="{StaticResource HorizontalScrollBarPageButtonNormal}"/>
                <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ScrollBar}">
                            <Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
                                <Track x:Name="PART_Track" Grid.Column="1">
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
                                    </Track.Thumb>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>
                                    </Track.DecreaseRepeatButton>
                                </Track>
                                <RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineRightCommand}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

Lo spazio dei nomi utilizzato per questo era questo (aggiungi all'inizio del file): -

  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"

Puoi quindi ovviamente modificare lo stile generato a tuo piacimento

Dovresti trovare a livello di codice la barra di scorrimento incorporata nel controllo o applicare lo stile a tutte le barre di scorrimento nell'ambito alterando la definizione dello stile, quindi: -

  <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
    ...
  </Style>

diventa

  <Style TargetType="{x:Type ScrollBar}">
    ...
  </Style>

In modo che venga applicato a tutte le barre di scorrimento nella regione definita dallo stile.

Answer 2

Si potrebbe anche voler dare un'occhiata a Snoop e stile Snooper

Answer 3

Si dovrà creare un modello di controllo di restyling la parte del controllo che si desidera.

Date un'occhiata a questo MSDN articolo e questo articolo che dovrebbe aiutare.

Answer 4

Un bel articolo di MSDN dando modelli di controllo per tutti i controlli WPF è disponibile qui:

http://msdn.microsoft.com/en-us/library /aa970773.aspx

Si tenga presente che questi modelli di controllo generano lo stesso controllo visivo (cioè .: questi sono i modelli di controllo che utilizza WPF). Ma è un buon punto di partenza per la personalizzazione Alberi visivi i controlli.

Answer 5

Ecco un modo semplice e veloce:

<Slider ...>
    <Slider.LayoutTransform>
         <ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
    </Slider.LayoutTransform>
</Slider>

Questa non è esattamente 8 pixel, ma si può giocare un po 'con la proprietà ScaleY fino ad ottenere le dimensioni desiderate.

Answer 6

Solo un proof of concept che si può anche singole parti di stile di controlli compositi come lo Slider: Ma attenzione, la scelta dei colori è stata piuttosto casuale, quindi questo sta andando essere brutto. Purtroppo, il Thumb-Style non ha un effetto se si lascia fuori lo stile personalizzato per il cursore.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.Resources>
      <ResourceDictionary>
        <Style TargetType="{x:Type Slider}">
          <Setter Property="Background" Value="Green"/>
          <Setter Property="BorderBrush" Value="Navy"/>
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type Slider}">
                <Grid x:Name="GridRoot">
                  <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
  <!-- TickBar shows the ticks for Slider -->
                  <TickBar x:Name="TopTick" Height="4" Fill="Blue" Placement="Top" SnapsToDevicePixels="True" Visibility="Collapsed"/>
                  <Border x:Name="Border" Height="4" Grid.Row="1" Margin="0" Background="Blue" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
  <!-- The Track lays out the repeat buttons and thumb -->
                  <Track x:Name="PART_Track" Grid.Row="1">
                    <Track.Thumb>
                      <Thumb MinWidth="15" MinHeight="30"/>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                      <RepeatButton Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                    <Track.DecreaseRepeatButton>
                      <RepeatButton Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                  </Track>
                  <TickBar x:Name="BottomTick" Height="4" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" SnapsToDevicePixels="True" Visibility="Collapsed"/>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ResourceDictionary>
    </Grid.Resources>
    <Slider Maximum="100" Minimum="0">
      <Slider.Resources>
        <Style TargetType="{x:Type Thumb}">
          <Setter Property="Background" Value="Yellow"/>
          <Setter Property="Height" Value="80"/>
        </Style>
      </Slider.Resources>
    </Slider>
  </Grid>
</Page>