2013-06-21 166 views
0

我正在使用WPF和C#。我有一個滾動條的列表框的小問題。當有許多ListItems時,顯示垂直滾動條。它工作得很好!但是在必要時從不顯示水平滾動條。爲什麼它不起作用?請查看我的代碼。我可能錯過了一些東西。您可以複製我的所有代碼並進行測試。希望能找到你的解決方案。謝謝! :)wpf:垂直滾動條正常工作,但水平滾動條不起作用

WPF窗口:

 <Grid.Resources> 
     <ResourceDictionary Source="/Menu\styles\test.xaml"></ResourceDictionary> 
     </Grid.Resources> 

    <ListBox HorizontalAlignment="Center" Width="196" Style="{DynamicResource ListBoxStyle1}" Margin="310,170,419,361"> 
     <ListBoxItem Content="fgfdgsdfgsdfgsdfgsdfg"/> 
     <ListBoxItem Content="dfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfg"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
     <ListBoxItem Content="Frafgsdfgsdfgsdfgdfgsdfgsdfgsdfgdfgdfgsnce"/> 
    </ListBox> 

風格:test.xaml

<SolidColorBrush x:Key="ListBorder" Color="#828790"/> 
<!--LISTBOX--> 
<Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"> 
    <Setter Property="BorderBrush" Value="#FF1C93F5"/> 
    <Setter Property="BorderThickness" Value="5"/> 
    <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="#FF1F1E1E" RadiusX="10" RadiusY="1" 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> 

<!--SCROLL VIEWER--> 
<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}" /> 
     <!--vertical scrollbar--> 
     <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Hand" 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> 

<!--LISTBOX ITEM--> 
<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> 

<!--SCROLLBAR BUTTON--> 
<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}"> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 


<!--SCROLL BAR THUMB--> 
<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 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> 



<!--VERTICAL SCROLLBAR BACKGROUND--> 
<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"/> 

<!--VERTICAL SCROLLBAR PAGE BUTTON--> 
<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> 

<!--HORIZONTAL SCROLLBAR BACKGROUND--> 
<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> 

<!--HORIZONTAL SCROLLBAR PAGE BUTTON--> 
<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> 

<!--SCROLLBAR STYLE--> 
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}"> 
    <!--STYLE FOR VERTICAL--> 
    <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}}"/> 


    <!--TEMPLATE FOR VERTICAL--> 
    <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}"/> 
         </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> 

     <!--ORIENTATION = HORIZONTAL--> 
     <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> 
        <!--FOR HORIZONTAL--> 
        <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}" /> 
          <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}"/> 
           </Track.Thumb> 
          </Track> 
          <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}"/> 
         </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> 

回答

3

這是因爲你沒有在你的ControlTemplate一個PART_HorizontalScrollBarScrollViewer

您的ScrollViewerControlTemplate應該是這樣的:

<!-- SCROLL VIEWER --> 
<ControlTemplate x:Key="ScrollViewerControlTemplate1" 
        TargetType="{x:Type ScrollViewer}"> 
    <Grid x:Name="Grid" 
     Background="{TemplateBinding Background}"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="Auto" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" 
          Grid.Column="0" 
          Margin="{TemplateBinding Padding}" 
          CanContentScroll="{TemplateBinding CanContentScroll}" 
          CanHorizontallyScroll="False" 
          CanVerticallyScroll="False" 
          Content="{TemplateBinding Content}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" /> 
    <!-- vertical scrollbar --> 
    <ScrollBar x:Name="PART_VerticalScrollBar" 
       Grid.Column="1" 
       AutomationProperties.AutomationId="VerticalScrollBar" 
       Cursor="Hand" 
       Maximum="{TemplateBinding ScrollableHeight}" 
       Minimum="0" 
       Style="{DynamicResource ScrollBarStyle1}" 
       ViewportSize="{TemplateBinding ViewportHeight}" 
       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
       Value="{Binding VerticalOffset, 
           Mode=OneWay, 
           RelativeSource={RelativeSource TemplatedParent}}" /> 
    <!-- NEW BIT --> 
    <ScrollBar x:Name="PART_HorizontalScrollBar" 
       Grid.Row="1" 
       Grid.Column="0" 
       AutomationProperties.AutomationId="HorizontalScrollBar" 
       Cursor="Hand" 
       Maximum="{TemplateBinding ScrollableWidth}" 
       Minimum="0" 
       Orientation="Horizontal" 
       Style="{DynamicResource ScrollBarStyle1}" 
       ViewportSize="{TemplateBinding ViewportWidth}" 
       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
       Value="{Binding HorizontalOffset, 
           Mode=OneWay, 
           RelativeSource={RelativeSource TemplatedParent}}" /> 
    </Grid> 
</ControlTemplate> 

我還添加了Grid.RowDefinitions ^^給水平ScrollBar一些空間。

注:

有了這個,你的水平ScrollBar將是看得見的,反應靈敏,但它不會有你的Style應用如右圖你目前只更新了垂直ScrollBar的模板ScrollBarStyle1。所以你也必須相應地更新水平的。