WPF GridView/ListView 在触摸设备上用手指改变列宽

Question

When you have a ListView/GridView in WPF you can change the width of the columns by clicking and dragging the devider between two columns. That's working find using a mouse, but what can I do to make the hot area wider, so that the user has a chance to drag the devider between the column headers with his fingers?

Answer 1

Create a custom GridViewColumnHeader style. The easiest way to do this is to add a <GridViewColumnHeader/> element to an empty XAML file in Blend, right-click on it and choose Edit Template->Edit a Copy. This will copy the default template into your XAML markup and you can then edit as per your requirements.

Here is an example and something for you to start with:

<ListView>
    <ListView.Resources>
        <LinearGradientBrush x:Key="GridViewColumnHeaderBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.4091"/>
            <GradientStop Color="#FFF7F8F9" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridViewColumnHeaderBorderBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFF2F2F2" Offset="0"/>
            <GradientStop Color="#FFD5D5D5" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridViewColumnHeaderHoverBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FFBDEDFF" Offset="0"/>
            <GradientStop Color="#FFB7E7FB" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridViewColumnHeaderPressBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#FF8DD6F7" Offset="0"/>
            <GradientStop Color="#FF8AD1F5" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="GridViewColumnHeaderGripper" TargetType="{x:Type Thumb}">
            <Setter Property="Canvas.Right" Value="-9"/>
            <Setter Property="Width" Value="18"/>
            <Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Background="Transparent" Padding="{TemplateBinding Padding}">
                            <Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type GridViewColumnHeader}">
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBackground}"/>
            <Setter Property="BorderBrush" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="2,0,2,0"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                        <Grid SnapsToDevicePixels="true">
                            <Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="7"/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <Rectangle x:Name="UpperHighlight" Fill="#FFE3F7FF" Visibility="Collapsed"/>
                                    <Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
                                        <ContentPresenter x:Name="HeaderContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Border>
                                </Grid>
                            </Border>
                            <Border x:Name="HeaderHoverBorder" BorderThickness="1,0,1,1" Margin="1,1,0,0"/>
                            <Border x:Name="HeaderPressBorder" BorderThickness="1,1,1,0" Margin="1,0,0,1"/>
                            <Canvas>
                                <Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
                            </Canvas>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
                                <Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF88CBEB"/>
                                <Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
                                <Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
                                <Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF95DAF9"/>
                                <Setter Property="BorderBrush" TargetName="HeaderPressBorder" Value="#FF7A9EB1"/>
                                <Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
                                <Setter Property="Fill" TargetName="UpperHighlight" Value="#FFBCE4F9"/>
                                <Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
                                <Setter Property="Margin" TargetName="HeaderContent" Value="1,1,0,0"/>
                            </Trigger>
                            <Trigger Property="Height" Value="Auto">
                                <Setter Property="MinHeight" Value="20"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Role" Value="Floating">
                    <Setter Property="Opacity" Value="0.4082"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                                <Canvas x:Name="PART_FloatingHeaderCanvas">
                                    <Rectangle Fill="#FF000000" Height="{TemplateBinding ActualHeight}" Opacity="0.4697" Width="{TemplateBinding ActualWidth}"/>
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="Role" Value="Padding">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                                <Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}"/>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="Height" Value="Auto">
                                        <Setter Property="MinHeight" Value="20"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridView.Columns>
                <GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name" />
            </GridView.Columns>
        </GridView>
    </ListView.View>
</ListView>