2015-05-25 49 views
1

我試圖使用此模板作爲我的列表框,但是當我使用鼠標滾輪時,水平滾動不起作用,我不知道爲什麼!水平滾動不適用於wpf列表框中的ListBox

列表框模板:

<ControlTemplate x:Key="ListBoxControlTemplate" TargetType="{x:Type ListBox}"> 
       <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
        <ScrollViewer Focusable="True" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerTargeting}" CanContentScroll="True" VerticalContentAlignment="Top" HorizontalScrollBarVisibility="Visible"> 
         <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
        </ScrollViewer> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsEnabled" Value="False"> 
         <Setter Property="Background" TargetName="Bd" Value="{x:Null}"/> 
         <Setter Property="BorderBrush" TargetName="Bd" Value="{x:Null}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 

的ScrollViewer模板:

<ControlTemplate x:Key="ScrollViewerTargeting" 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> 
       <Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1" ScrollViewer.CanContentScroll="True"/> 
       <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="True" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
       <ScrollBar x:Name="PART_VerticalScrollBar" Template="{DynamicResource ComboBoxScrollBarControlTemplate}" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
       <ScrollBar x:Name="PART_HorizontalScrollBar" Margin="200,0,200,20" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" 
        Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Grid.Row="1" 
        Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
        Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
        ViewportSize="{TemplateBinding ViewportWidth}" Template="{DynamicResource ScrollBarControlTemplate}" Focusable="True" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Orientation="Horizontal" ScrollViewer.CanContentScroll="True"/> 
      </Grid> 
     </ControlTemplate> 

滾動條的模板:

<ControlTemplate x:Key="ScrollBarControlTemplate" TargetType="{x:Type ScrollBar}"> 
      <Grid x:Name="Bg" SnapsToDevicePixels="True" ScrollViewer.CanContentScroll="True"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
        <ColumnDefinition Width="1E-05*"/> 
        <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/> 
       </Grid.ColumnDefinitions> 
       <!--<Border CornerRadius="10" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" Visibility="Visible" Background="#FF232323" Height="3" >--> 
       <Border CornerRadius="1" BorderThickness="0,0,0,0" Grid.Column="1" Visibility="Visible" Height="2" > 
        <Border.Background> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="2,0" 
          SpreadMethod="Reflect" MappingMode="Absolute"> 
          <!--<GradientStop Color="Transparent" Offset="0" />--> 
          <GradientStop Color="Transparent" Offset="0.499" /> 
          <GradientStop Color="#FF232323" Offset="0.5" /> 
         </LinearGradientBrush> 
        </Border.Background> 
       </Border> 
       <RepeatButton x:Name="PART_LineLeftButton" Command="ScrollBar.LineLeftCommand" IsEnabled="{TemplateBinding IsMouseOver}" Visibility="Hidden" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
        <RepeatButton.Style> 
         <Style TargetType="{x:Type RepeatButton}"/> 
        </RepeatButton.Style> 
        <Path x:Name="ArrowLeft" Data="M3.18,7C3.18,7 5,7 5,7 5,7 1.81,3.5 1.81,3.5 1.81,3.5 5,0 5,0 5,0 3.18,0 3.18,0 3.18,0 0,3.5 0,3.5 0,3.5 3.18,7 3.18,7z" Fill="#FF606060" Margin="3" Stretch="Uniform"/> 
       </RepeatButton> 
       <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}" Visibility="Visible" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
        <Track.DecreaseRepeatButton> 
         <RepeatButton Command="ScrollBar.PageLeftCommand"> 
          <RepeatButton.Style> 
           <Style TargetType="{x:Type RepeatButton}"> 
            <Setter Property="OverridesDefaultStyle" Value="True"/> 
            <Setter Property="ScrollViewer.CanContentScroll" 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}" ScrollViewer.CanContentScroll="True"/> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </RepeatButton.Style> 
         </RepeatButton> 
        </Track.DecreaseRepeatButton> 
        <Track.IncreaseRepeatButton> 
         <RepeatButton Command="ScrollBar.PageRightCommand"> 
          <RepeatButton.Style> 
           <Style TargetType="{x:Type RepeatButton}"> 
            <Setter Property="OverridesDefaultStyle" Value="True"/> 
            <Setter Property="ScrollViewer.CanContentScroll" 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}" ScrollViewer.CanContentScroll="True"/> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </RepeatButton.Style> 
         </RepeatButton> 
        </Track.IncreaseRepeatButton> 
        <Track.Thumb> 
         <Thumb> 
          <Thumb.Style> 
           <Style 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 x:Name="rectangle" Fill="#FF232323" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>--> 
               <Border x:Name="rectangle" CornerRadius="3" Background="#FF232323" Height="7" SnapsToDevicePixels="True" Width="{TemplateBinding Width}" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"/> 
               <ControlTemplate.Triggers> 
                <Trigger Property="IsMouseOver" Value="True"> 
                 <Setter Property="Background" TargetName="rectangle" Value="#FF9d9d9d"/> 
                </Trigger> 
                <Trigger Property="IsDragging" Value="True"> 
                 <Setter Property="Background" TargetName="rectangle" Value="#FF79cd00"/> 
                </Trigger> 
               </ControlTemplate.Triggers> 
              </ControlTemplate> 
             </Setter.Value> 
            </Setter> 
           </Style> 
          </Thumb.Style> 
         </Thumb> 
        </Track.Thumb> 
       </Track> 
       <RepeatButton x:Name="PART_LineRightButton" Grid.Column="2" Command="ScrollBar.LineRightCommand" IsEnabled="{TemplateBinding IsMouseOver}" Visibility="Hidden" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
        <RepeatButton.Style> 
         <Style TargetType="{x:Type RepeatButton}"/> 
        </RepeatButton.Style> 
        <Path x:Name="ArrowRight" Data="M1.81,7C1.81,7 0,7 0,7 0,7 3.18,3.5 3.18,3.5 3.18,3.5 0,0 0,0 0,0 1.81,0 1.81,0 1.81,0 5,3.5 5,3.5 5,3.5 1.81,7 1.81,7z" Fill="#FF606060" Margin="3" Stretch="Uniform"/> 
       </RepeatButton> 
      </Grid> 

      <ControlTemplate.Triggers> 
       <MultiDataTrigger> 
        <MultiDataTrigger.Conditions> 
         <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/> 
         <Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="true"/> 
        </MultiDataTrigger.Conditions> 
        <Setter Property="Fill" TargetName="ArrowRight" Value="White"/> 
       </MultiDataTrigger> 
       <MultiDataTrigger> 
        <MultiDataTrigger.Conditions> 
         <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/> 
         <Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="true"/> 
        </MultiDataTrigger.Conditions> 
        <Setter Property="Fill" TargetName="ArrowLeft" Value="White"/> 
       </MultiDataTrigger> 
       <MultiDataTrigger> 
        <MultiDataTrigger.Conditions> 
         <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineRightButton}" Value="true"/> 
         <Condition Binding="{Binding IsPressed, ElementName=PART_LineRightButton}" Value="false"/> 
        </MultiDataTrigger.Conditions> 
        <Setter Property="Fill" TargetName="ArrowRight" Value="Black"/> 
       </MultiDataTrigger> 
       <MultiDataTrigger> 
        <MultiDataTrigger.Conditions> 
         <Condition Binding="{Binding IsMouseOver, ElementName=PART_LineLeftButton}" Value="true"/> 
         <Condition Binding="{Binding IsPressed, ElementName=PART_LineLeftButton}" Value="false"/> 
        </MultiDataTrigger.Conditions> 
        <Setter Property="Fill" TargetName="ArrowLeft" Value="Black"/> 
       </MultiDataTrigger> 
       <Trigger Property="IsEnabled" Value="False"> 
        <Setter Property="Fill" TargetName="ArrowLeft" Value="#FFBFBFBF"/> 
        <Setter Property="Fill" TargetName="ArrowRight" Value="#FFBFBFBF"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

問題出在哪裏以及如何我解決呢?

You can download an example from here

+0

你有足夠的列或橫內容使滾動發生? –

+0

你的例子中有太多的代碼,但它沒有包含足夠的代碼來完成。請簡化代碼示例,以便您提供了[可靠,_minimal_,_complete_代碼示例](http://stackoverflow.com/help/mcve),可以可靠地演示此問題。 –

+0

ScrollViewer.CanContentScroll =「True」不應該位於ItemsPresenter上,它應該通過ListBox風格進行設置。 –

回答

0

的問題是在這裏:

的ScrollViewer中和邊界的位置之間
  <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
       <ScrollViewer Focusable="True" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerTargeting}" CanContentScroll="True" VerticalContentAlignment="Top" HorizontalScrollBarVisibility="Visible"> 
        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
       </ScrollViewer> 
      </Border> 

嘗試切換,所以它看起來是這樣的:

  <ScrollViewer Focusable="True" Padding="{TemplateBinding Padding}" Template="{DynamicResource ScrollViewerTargeting}" CanContentScroll="True" VerticalContentAlignment="Top" HorizontalScrollBarVisibility="Visible"> 
       <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="1" SnapsToDevicePixels="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled"> 
        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 
       </Border> 
      </ScrollViewer> 
+0

它不起作用。我做了一個例子,你可以看到水平滾動不起作用。 [你可以在這裏下載這個例子](https://www.mediafire.com/?35gxn26w77zw0mh) – Shahryar

+0

嘗試打開你的項目混合....然後右鍵單擊LBGameList在你的對象和時間軸窗口....然後選擇「分組入」並在那裏選擇滾動查看器。所以它看起來像這個http://prntscr.com/799wb2哦,不要忘記將scrollviewers水平欄設置爲自動或可見....它的默認值是禁用我想。 –