カスタムリストボックススクロールバーのスタイル

私は以下のxaml for WPF ListBoxコントロールを持っています。私はUIの要件に合わせてカスタマイズしました。ただし、スクロールバーのサムは、スクロールバーの最下部の&の下端には届きません。また、垂直スクロールバートラック上の他の場所をクリックすると、サムがスクロールしません。問題を解決するのを手伝ってください。どんな助けもありがとうございます。カスタムリストボックススクロールバーのスタイル

これは私がカスタマイズしたListBoxコントロールのスナップショットです：

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>

出典

2012-05-07 Lucifer

スクロールバーの親指が比例しているので、あなたが見ている動作です。下の画像の2つの親指を比較してください。削除リストボックスは、12項目の9を表示しているので、親指が実際に。スクロールバーの高さの75％を使用していますが、あなたは25にカスタム親指の高さを設定している

enter image description here

"height = 25"属性が正しく動作します。

出典

2012-05-08 17:07:04 Phil

ありがとうございましたPhil ...しかし、私は親指を小さく保ち、それでも完全にスクロールさせることができます。高さ属性を除去した後、親指が大きくなりすぎて、私はpresent.Alsoにしようとしません。トラックをクリックした後で親指をスクロールすることはできますか？ – Lucifer

できれば後で見ていきます。「比例スクロールバーサムwpf」を検索します。 http://stackoverflow.com/questions/3116287/setting-the-scrollbar-thumb-sizeとhttp://www.wpfmentor.com/2008/12/how-to-set-thumb-position-and-lengthを参照してください。 -of.htmlこれは役に立つかもしれません。 – Phil

高さをNaNに設定してみてください。私が正しく覚えているか分からない。

出典

2013-05-22 15:37:40

キーは、スクロールバーのトラックコンポーネントにViewportSize = "NaN"を設定することです。

出典

2015-03-03 21:23:33

カスタムリストボックススクロールバーのスタイル

答えて

関連する問題