Stile della barra di scorrimento di Listbox personalizzato Edizione

Question

Ho il seguente xaml per il controllo ListBox WPF. L'ho personalizzato in modo adatto alle mie esigenze di interfaccia utente. Tuttavia, il pollice della barra di scorrimento non raggiungerà la parte superiore superiore della barra di scorrimento &. Anche il pollice non scorrerà se clicco altrove sulla traccia della barra di scorrimento verticale. Per favore aiutami a risolvere i problemi. Qualsiasi aiuto è apprezzato.

Questa è l'istantanea del controllo ListBox ho personalizzato:

<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> 

Answer 1

Il comportamento che stai vedendo è perché il pollice barra di scorrimento è proporzionale. Confronta i due pollici nell'immagine qui sotto.

Il pollice è in realtà utilizzando il 75% dell'altezza della barra di scorrimento in quanto la casella di riepilogo visualizza 9 dei 12 articoli., Ma è stata impostata l'altezza del pollice personalizzato a 25. Rimuovere il attributo "height = 25" e si comporterà correttamente.

Answer 2

Provare a impostare l'altezza su NaN. Non sono sicuro se ricordo bene.

Answer 3

La chiave è impostare ViewportSize = "NaN" sul componente Traccia della barra di scorrimento.