Hộp danh sách tùy chỉnh Kiểu thanh cuộn Phát hành

Question

Tôi có xaml sau đây để điều khiển Hộp danh sách WPF. Tôi đã tùy chỉnh nó để phù hợp với yêu cầu giao diện người dùng của tôi. Tuy nhiên, ngón tay cái của thanh cuộn sẽ không chạm vào đầu trang của thanh cuộn &. Ngoài ra ngón tay cái sẽ không cuộn nếu tôi nhấp vào nơi khác trên thanh cuộn dọc. Xin hãy giúp tôi giải quyết vấn đề. Bất kỳ trợ giúp được đánh giá cao.

Đây là ảnh chụp của điều khiển ListBox tôi đã tùy chỉnh:

<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

Các hành vi bạn đang nhìn thấy là do ngón tay cái thanh cuộn là tỷ lệ thuận. So sánh hai ngón tay cái trong hình dưới đây.

Các ngón tay cái đang thực sự sử dụng 75% chiều cao của scrollbar vì hộp danh sách được hiển thị 9 trong 12 mặt hàng., Nhưng bạn đã thiết lập chiều cao của ngón tay cái của bạn để tùy chỉnh 25. Tháo Thuộc tính "height = 25" và nó sẽ hoạt động đúng.

Answer 2

Thử đặt chiều cao thành NaN. Không chắc tôi có nhớ chính xác không.

Answer 3

Chìa khóa cho việc này là đặt ViewportSize = "NaN" trên thành phần Theo dõi của thanh cuộn của bạn.