在 Blend 中删除 ListView header 边框
Removing ListView header borders in Blend
我正在为 VS 2015 的 Blend 中的 ListView 设计样式而苦苦挣扎。
我正在尝试删除边框,但到目前为止没有成功。
老实说,我不知道要编辑哪个控件,因为我是 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>
您需要覆盖 GridViewColumnHeader
的 ControlTemplate
。
您可以通过 right-clicking 在 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>
我正在为 VS 2015 的 Blend 中的 ListView 设计样式而苦苦挣扎。
我正在尝试删除边框,但到目前为止没有成功。 老实说,我不知道要编辑哪个控件,因为我是 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>
您需要覆盖 GridViewColumnHeader
的 ControlTemplate
。
您可以通过 right-clicking 在 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>