Question

我尝试将此模板用于我的列表框但是当我使用鼠标滚轮时，水平滚动不起作用，我不知道为什么！

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

Answer 1

问题在于：

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

水平滚动对wpf中的ListBox不起作用

1 个答案: