在 Blend 中删除 ListView 标题边框

Posted

技术标签:

【中文标题】在 Blend 中删除 ListView 标题边框【英文标题】:Removing ListView header borders in Blend 【发布时间】:2017-02-09 11:08:34 【问题描述】:

我正在努力在 Blend for VS 2015 中设置 ListView 的样式。

Border image

到目前为止,我正在尝试删除边框但没有成功。 老实说,我不知道要编辑哪个控件,因为我是 XAML 和 Blend 的新手。 另外,如果我想编辑文本样式和边距,我必须在哪里查看?

任何提示都会非常有帮助!

编辑:这是我当前的模板。 (当前没有添加任何样式)

   <ListView x:Name="osebe_listView" Margin="0,0,40,0"  SelectionMode="Multiple" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Hidden" SelectionChanged="osebe_lw_SelectionChanged">


            <ListView.ItemContainerStyle>

                <Style TargetType="x:Type ListViewItem">
                    <Style.Triggers>
                        <DataTrigger Binding="Binding visible" Value="False">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
                </ListView.ItemContainerStyle>

                    <ListView.Resources>
                <Style TargetType="x:Type GridViewColumnHeader">
                    <Setter Property="Background" Value="#1AFFFFFF" />
                    <Setter Property="BorderThickness" Value="0"/>
                </Style>
                <Style TargetType="x:Type ColumnDefinition">
                    <Setter Property="Width" Value="10"/>
                </Style>

            </ListView.Resources>
            <ListView.Background>
                <VisualBrush>
                    <VisualBrush.Visual>
                        <Canvas>
                            <Path Opacity="0.3" Fill="#ffffffff" Data="F1 M 1284.873,520.501 C 1284.873,520.501 624.468,520.501 398.000,520.501 C 357.500,520.501 317.795,532.191 321.482,568.667 C 324.750,601.000 376.000,615.067 376.000,615.067 C 376.000,615.067 334.939,618.238 269.047,597.756 C 235.250,587.250 196.701,555.682 160.000,539.000 C 127.000,524.000 96.000,520.501 60.615,520.501 C 50.487,520.501 25.106,520.501 25.106,520.501 C 15.756,520.501 8.106,512.851 8.106,503.501 L 8.106,25.279 C 8.106,15.929 15.756,8.279 25.106,8.279 L 1284.873,8.279 C 1294.223,8.279 1301.873,15.929 1301.873,25.279 L 1301.873,503.501 C 1301.873,512.851 1294.223,520.501 1284.873,520.501 Z"/>
                        </Canvas>
                    </VisualBrush.Visual>
                </VisualBrush>
            </ListView.Background>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Naziv podjetja" DisplayMemberBinding="Binding nazivPodjetja"/>
                    <GridViewColumn Header="Ime" DisplayMemberBinding="Binding ime" Width="25"/>
                    <GridViewColumn Header="Priimek" DisplayMemberBinding="Binding priimek" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="Naslov" DisplayMemberBinding="Binding naslov" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="Pošta" DisplayMemberBinding="Binding posta" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="Mobilna številka" DisplayMemberBinding="Binding mobilnaSt" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="Stacionarna številka" DisplayMemberBinding="Binding stacionarnaSt" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="E-naslov" DisplayMemberBinding="Binding eMail" Width="Binding ActualWidth, ElementName=helperField"/>
                    <GridViewColumn Header="Skupina" DisplayMemberBinding="Binding skupina" Width="Binding ActualWidth, ElementName=helperField"/>

                </GridView>
            </ListView.View>
        </ListView>

【问题讨论】:

你当前的模板是什么样子的? 我将代码添加到我原来的问题中 【参考方案1】:

您需要覆盖GridViewColumnHeaderControlTemplate

您可以通过在 Blend 中右键单击 GridViewColumnHeader 元素并选择“编辑模板”->“编辑副本”来复制默认模板,然后根据您的要求对其进行修改:

<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="White"/>
        <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="Background" Value="#1AFFFFFF" />
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="x:Type GridViewColumnHeader">
                    <Grid SnapsToDevicePixels="true">
                        <Border x:Name="HeaderBorder" BorderBrush="TemplateBinding BorderBrush" BorderThickness="0" 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>
    <Style TargetType="x:Type ColumnDefinition">
        <Setter Property="Width" Value="10"/>
    </Style>
</ListView.Resources>

【讨论】:

我在寻找 GridViewColumnHeader 但找不到它。这就是我得到的:prntscr.com/e6hdz0 只需创建一个新的临时 XAML 文件,通过在 XAML 编辑器中键入添加一个 元素,然后在“对象和时间线”窗格中右键单击它。另请注意,我在 Windows 10 上为您提供了默认模板,并在我的回答中稍作修改。你试过了吗? 我试试看 我不知道你能做到这一点:O 我会检查一下,并希望它能够正常工作。谢谢你现在 完成。另一个快速的问题:如何将 GridViewColumnHeader 样式应用于混合列表视图,因为我不能将资源应用于任何列表视图的元素?

以上是关于在 Blend 中删除 ListView 标题边框的主要内容,如果未能解决你的问题,请参考以下文章

无法使用画笔资源在 Expression Blend 中为对象的边框设置动画

如何删除 Visual Studio 2012 的 Blend?

请问WPF在Blend 4中怎么实现对无边框的窗体拖动。。。会请详细说下。会额外多加50分。。

Blend/XAML:通过按钮绑定 ItemsSource

我想知道为啥 Blend for Windows 8 删除了“进入用户控制”功能

Listview 后台问题