Estilo de barra de desplazamiento de lista de botones personalizado Problema

Tengo el siguiente control xaml para WPF ListBox. Lo he personalizado para que se ajuste a mis requisitos de UI. Sin embargo, el pulgar de la barra de desplazamiento no alcanzará la parte superior & de la barra de desplazamiento. Además, el pulgar no se desplazará si hago clic en otro lugar en la pista vertical de la barra de desplazamiento. Por favor, ayúdame a resolver los problemas. Cualquier ayuda es apreciada.Estilo de barra de desplazamiento de lista de botones personalizado Problema

Esta es la instantánea del control ListBox He personalizado:

enter image description here

<Window 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 
x:Class="MovieMessageBox.ListBoxStyles2" 
x:Name="Window" 
Title="ListBoxStyles2" 
Width="370" Height="200"> 

<Window.Resources> 

    <SolidColorBrush x:Key="ListBorder" Color="#828790"/> 
    <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"> 
     <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/> 
     <Setter Property="BorderThickness" Value="1"/> 
     <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/> 
     <Setter Property="ScrollViewer.CanContentScroll" Value="true"/> 
     <Setter Property="ScrollViewer.PanningMode" Value="Both"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="False"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListBox}"> 
        <Grid> 
         <Rectangle Fill="Pink" RadiusX="10" RadiusY="10" Opacity="0.195" /> 
         <Border CornerRadius="10" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1" SnapsToDevicePixels="true"> 
          <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerControlTemplate1}"> 
           <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
          </ScrollViewer> 
         </Border> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
         </Trigger> 
         <Trigger Property="IsGrouping" Value="true"> 
          <Setter Property="ScrollViewer.CanContentScroll" Value="false"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}"> 
     <Grid x:Name="Grid" Background="{TemplateBinding Background}"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 

      <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" /> 
      <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle1}"/>    
     </Grid> 
    </ControlTemplate> 
    <LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0"> 
     <GradientStop Color="#E1E1E1" Offset="0"/> 
     <GradientStop Color="#EDEDED" Offset="0.20"/> 
     <GradientStop Color="#EDEDED" Offset="0.80"/> 
     <GradientStop Color="#E3E3E3" Offset="1"/> 
    </LinearGradientBrush> 
    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/> 

    <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 x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <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 Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
       </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}"> 
        <Rectangle Height="25" Width="8" Fill="White" RadiusX="5" RadiusY="5"> 
         <Rectangle.Effect> 
          <DropShadowEffect ShadowDepth="0" BlurRadius="10" Color="White" /> 
         </Rectangle.Effect> 
        </Rectangle> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0"> 
     <GradientStop Color="#E1E1E1" Offset="0"/> 
     <GradientStop Color="#EDEDED" Offset="0.20"/> 
     <GradientStop Color="#EDEDED" Offset="0.80"/> 
     <GradientStop Color="#E3E3E3" 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 Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> 
     <Setter Property="Stylus.IsFlicksEnabled" Value="false"/> 
     <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 x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
         <Border Width="1" Background="#FFFFFF" HorizontalAlignment="Center"/> 
         <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}"> 

          <Track.Thumb> 
           <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/> 
          </Track.Thumb> 
         </Track> 
        </Grid> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="Orientation" Value="Horizontal"> 
       <Setter Property="Width" Value="Auto"/> 
       <Setter Property="MinWidth" Value="0"/> 
       <Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/> 
       <Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/> 
       <Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type ScrollBar}"> 
          <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
            <ColumnDefinition Width="0.00001*"/> 
            <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
           </Grid.ColumnDefinitions> 
           <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/> 
           <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}"> 
            <Track.DecreaseRepeatButton> 
             <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> 
            </Track.DecreaseRepeatButton> 
            <Track.IncreaseRepeatButton> 
             <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/> 
            </Track.IncreaseRepeatButton> 
            <Track.Thumb> 
             <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/> 
            </Track.Thumb> 
           </Track> 
           <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/> 
          </Grid> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsEnabled" Value="false"> 
            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
    <Style TargetType="{x:Type ListBoxItem}"> 
     <Setter Property="Foreground" Value="White" /> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
     <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 
     <Setter Property="Padding" Value="2,0,0,0"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ListBoxItem}"> 
        <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 
         <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <Trigger Property="IsSelected" Value="true"> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/> 
         </Trigger> 
         <MultiTrigger> 
          <MultiTrigger.Conditions> 
           <Condition Property="IsSelected" Value="true"/> 
           <Condition Property="Selector.IsSelectionActive" Value="false"/> 
          </MultiTrigger.Conditions> 
          <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
         </MultiTrigger> 
         <Trigger Property="IsEnabled" Value="false"> 
          <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</Window.Resources> 
<Window.Background> 
    <ImageBrush ImageSource="@aleaf-1920.jpg"/> 
</Window.Background> 

<Grid x:Name="LayoutRoot"> 
    <ListBox HorizontalAlignment="Center" Height="150" Width="203" Style="{DynamicResource ListBoxStyle1}"> 
     <ListBoxItem Content="India"/> 
     <ListBoxItem Content="America"/> 
     <ListBoxItem Content="Russia"/> 
     <ListBoxItem Content="Germany"/> 
     <ListBoxItem Content="France"/> 
     <ListBoxItem Content="Australia"/> 
     <ListBoxItem Content="Thailand"/> 
     <ListBoxItem Content="England"/> 
     <ListBoxItem Content="Holand"/> 
     <ListBoxItem Content="Poland"/> 
     <ListBoxItem Content="Lesotho"/> 
     <ListBoxItem Content="Tanzania"/> 
    </ListBox> 
</Grid> 
</Window>

Fuente

2012-05-07 Lucifer

El comportamiento que se está viendo es debido a que la barra de desplazamiento es proporcional. Compara los dos pulgares en la imagen de abajo.

enter image description here

El pulgar en realidad está utilizando el 75% de la altura de la barra de desplazamiento debido a que el cuadro de lista está mostrando 9 de los 12 artículos., Pero que ha configurado la altura de su dedo pulgar personalizada a 25. Retire la atributo "height = 25" y se comportará correctamente.

Fuente

2012-05-08 17:07:04 Phil

Gracias Phil .... pero ¿cómo puedo mantener el pulgar más pequeño y aún así hacer que se desplace completamente ... después de quitar el atributo de altura el pulgar crece demasiado grande y no es mi intención presentarlo. También por qué no soy capaz de desplazarse por el pulgar después de hacer clic en la pista? – Lucifer

Voy a echar un vistazo más adelante si puedo. Busque "proporcional scrollbar thumb wpf". Ver http://stackoverflow.com/questions/3116287/setting-the-scrollbar-thumb-size y http://www.wpfmentor.com/2008/12/how-to-set-thumb-position-and-length -of.html que puede ser de utilidad. – Phil

Intente configurar la altura en NaN. No estoy seguro si recuerdo correctamente.

Fuente

2013-05-22 15:37:40

La clave para esto es establecer ViewportSize = "NaN" en el componente Track de su barra de desplazamiento.

Fuente

2015-03-03 21:23:33

Estilo de barra de desplazamiento de lista de botones personalizado Problema

Respuesta

Cuestiones relacionadas