【问题标题】:Custom ScrollBar Thumb can't be dragged in DataGrid (but RepeatButtons work OK)?无法在 DataGrid 中拖动自定义 ScrollBar Thumb(但 RepeatButtons 工作正常)?
【发布时间】:2013-07-27 19:00:56
【问题描述】:

我尝试在 WPF 中自定义 ScrollBar 的外观和感觉 DataGrid,只需在 ScrollBar 上应用新样式即可。此样式将ScrollBarTemplate 更改为新样式。几乎可以正常工作,除了我不能在Thumb 上按住鼠标并拖动滚动,我只能点击RepeatButtonsLine buttonsPage buttons 都可以)滚动。

我还是 WPF 的新手,我不知道这里可能存在什么问题。代码如下:

<DataGrid HorizontalAlignment="Left" VerticalAlignment="Top" ItemsSource="{Binding}" SnapsToDevicePixels="True"> 
        <DataGrid.Resources>                
            <Style TargetType="ScrollBar">                    
                <Style.Resources>
                    <ControlTemplate x:Key="verRepeat" TargetType="RepeatButton">
                        <Border CornerRadius="4" BorderBrush="Green" BorderThickness="1" Background="Yellow">
                            <ContentPresenter Width="18" Height="18"/>
                        </Border>
                    </ControlTemplate>
                    <ControlTemplate x:Key="midRepeat" TargetType="RepeatButton">
                        <Border Background="Transparent">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>

                    <ControlTemplate x:Key="verScroll" TargetType="ScrollBar">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition MaxHeight="18"/>
                                <RowDefinition/>
                                <RowDefinition MaxHeight="18"/>
                            </Grid.RowDefinitions>
                            <Border Grid.RowSpan="3"/>
                            <RepeatButton Grid.Row="0" Width="18" Command="ScrollBar.LineUpCommand" Template="{StaticResource verRepeat}">                                    

                            </RepeatButton>
                            <Track Grid.Row="1" IsDirectionReversed="True">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="ScrollBar.PageUpCommand" Template="{StaticResource midRepeat}">

                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Margin="2,0,2,0">
                                        <Thumb.Template>
                                            <ControlTemplate TargetType="Thumb">
                                                <Border Background="Green"/>                                                    
                                            </ControlTemplate>
                                        </Thumb.Template>
                                    </Thumb>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="ScrollBar.PageDownCommand" Template="{StaticResource midRepeat}">

                                    </RepeatButton>
                                </Track.IncreaseRepeatButton>
                            </Track>
                            <RepeatButton Grid.Row="2" Command="ScrollBar.LineDownCommand" Template="{StaticResource verRepeat}">

                            </RepeatButton>
                        </Grid>
                    </ControlTemplate>

                    <ControlTemplate x:Key="horScroll" TargetType="ScrollBar">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="18"/>
                                <ColumnDefinition Width="0.00001*"/>
                                <ColumnDefinition MaxWidth="18"/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.ColumnSpan="3"/>
                            <RepeatButton Grid.Column="0" Height="18" Command="ScrollBar.LineLeftCommand" Template="{StaticResource verRepeat}">

                            </RepeatButton>
                            <Track Grid.Column="1" IsDirectionReversed="False" Focusable="False">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="ScrollBar.PageLeftCommand" Template="{StaticResource midRepeat}">

                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb>
                                        <Thumb.Template>
                                            <ControlTemplate TargetType="Thumb">
                                                <Grid>
                                                    <Border Background="Green" Margin="0,1,0,1"/>
                                                    <ContentPresenter Width="18" Height="18"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </Thumb.Template>
                                    </Thumb>
                                </Track.Thumb>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="ScrollBar.PageRightCommand" Template="{StaticResource midRepeat}">

                                    </RepeatButton>
                                </Track.IncreaseRepeatButton>
                            </Track>
                            <RepeatButton Grid.Column="2" Command="ScrollBar.LineRightCommand" Template="{StaticResource verRepeat}">

                            </RepeatButton>
                        </Grid>
                    </ControlTemplate>
                </Style.Resources>
                <Setter Property="OverridesDefaultStyle" Value="True"/>                        
                <Style.Triggers>
                    <Trigger Property="Orientation" Value="Horizontal">
                        <Setter Property="Template" Value="{StaticResource horScroll}"/>
                    </Trigger>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="Template" Value="{StaticResource verScroll}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>                
        </DataGrid.Resources>
    </DataGrid>

我想我在这里错过了一些东西,Thumb 似乎无法与之交互。

这是网格的截图:

【问题讨论】:

    标签: c# wpf xaml datagrid controltemplate


    【解决方案1】:

    万事大吉,只需给Track添加PART_Track的名字如下:

    <Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="True" ... />
    

    没有这个Thumb 不起作用。

    注意:在设计模板和样式时,最好查看原件,至少要知道模式的名称。

    Here是关于Template的重要部分的一点说明。

    【讨论】:

    • 太好了,非常感谢。我在某处看到了这些名称,但我认为这并不重要,也许它在某处使用过(不在我的 xaml 代码中):)
    猜你喜欢
    • 2014-04-06
    • 2014-03-18
    • 1970-01-01
    • 2016-07-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多