Приветствую! Есть ListView, помогите устранить некоторые погрешности интерфейса.
Есть интерфейс:
http://gyazo.com/5155c56fb2276d092e6bcbc1a153a904
Код:
| Код |
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="close.MainWindow"
Title="MainWindow" Height="350" Width="691">
<Window.Resources>
<!-- Стиль ListView (в темных тонах) -->
<Style x:Key="dark-listview" TargetType="{x:Type ListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<!-- Задаём параметры фона и рамки ListView -->
<Border Name="border" Background="Black" BorderBrush="Gray" BorderThickness="1" >
<!-- Прокрутка контента по горизонтали и вертикали -->
<ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
<!-- Контент ListView в виде строк, располагающихся ниже заголовка таблицы -->
<ItemsPresenter/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="true">
<Setter TargetName="border" Property="BorderBrush" Value="#FF017BCD" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Стиль строки ListView -->
<Style x:Key="dark-listview-item" TargetType="{x:Type ListViewItem}">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<!-- Помещаем в border строку listview -->
<Border Height="25" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Margin="2,0,2,0" SnapsToDevicePixels="true" >
<Grid>
<GridViewRowPresenter/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#FF5C5956"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="#FF017BCD"/>
<Setter Property="FontSize" Value="16"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Стиль разделителя столбцов в "шапке" ListView -->
<Style x:Key="dark-listview-column-header-gripper" TargetType="Thumb">
<Setter Property="Width" Value="1"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="Transparent">
<Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Стиль "шапки" ListView -->
<Style x:Key="dark-listview-header" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Margin" Value="0,2,0,0.5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<Grid>
<!-- Помещаем в border содержимое заголовков стобцов listview -->
<Border Name="HeaderBorder" Height="30" Background="#FF017BCD" BorderThickness="0" BorderBrush="Transparent">
<ContentPresenter Name="HeaderContent" TextElement.FontFamily="Segoe UI" TextElement.Foreground="White" TextElement.FontSize="14" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<!-- Разделительная вертикальная черта в заголовках стобцов listview -->
<Thumb x:Name="PART_HeaderGripper" HorizontalAlignment="Right" Style="{StaticResource dark-listview-column-header-gripper}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="HeaderBorder" Property="Background" Value="#FF005E9C"/>
<Setter TargetName="HeaderContent" Property="TextElement.Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar:
ScrollBar состоит из нескольких частей:
1) Track (фон полосы прокрутки) — обычно это текстурированный прямоугольник, простирающийся на всю длину полосы;
2) RepeatButton - кнопки на концах полосы прокрутки, которые позволяют перемещать ползунок на один инкремент вверх/вниз (либо влево/вправо);
3) Thumb (ползунок) - элемент, представляющий текущую позицию прокручиваемого содержимого;
4) Пустое пространство с каждой стороны от ползунка — это еще 2 объекта RepeatButton, являющиеся прозрачными. При щелчке на любом из них
полоса прокрутки прокручивает содержимое на целую страницу (страница определена как часть прокручиваемого содержимого, умещающаяся в окно).
-->
<!-- Стиль невидимых RepeatButton -->
<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Стиль ползунка -->
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border CornerRadius="0" Background="Gray" BorderThickness="0" Margin="0,0,0,0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Стиль вертикального ScrollBar -->
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<!-- Полоса -->
<Border Grid.RowSpan="3" CornerRadius="0" Background="Transparent" BorderBrush="Gray" BorderThickness="0"/>
<!-- Полоса прокрутки -->
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
<!-- Прозрачная полоса листания вверх -->
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<!-- Ползунок -->
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" />
</Track.Thumb>
<!-- Прозрачная полоса листания вниз -->
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<!-- Стиль горизонтального ScrollBar -->
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="0"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="0"/>
</Grid.ColumnDefinitions>
<!-- Полоса -->
<Border Grid.ColumnSpan="3" CornerRadius="0" Background="Transparent" />
<!-- Полоса прокрутки -->
<Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="False">
<!-- Прозрачная полоса листания вверх -->
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<!-- Ползунок -->
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" />
</Track.Thumb>
<!-- Прозрачная полоса листания вниз -->
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="7" />
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="7"/>
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="#FF272727" Margin="0,0,2,0">
<ListView
HorizontalAlignment="Left"
Height="226"
Margin="41,22,0,0"
VerticalAlignment="Top"
Width="469.5"
Style="{DynamicResource dark-listview}"
ItemContainerStyle="{DynamicResource dark-listview-item}" >
<ListView.View>
<!-- Задаем стиль для всех столбцов -->
<GridView ColumnHeaderContainerStyle="{StaticResource dark-listview-header}" >
<GridViewColumn Header="1 Name" Width="100">
<GridViewColumn.CellTemplate>
<DataTemplate x:Name="col1Template">
<Grid>
<TextBlock TextWrapping="Wrap" Text="----- --------" />
<!-- Splitter -->
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="2 Name" Width="150"/>
<GridViewColumn Header="3 Name" Width="200"/>
</GridView>
</ListView.View>
<ListView.Items>
<ListViewItem>A ListView</ListViewItem>
<ListViewItem>111</ListViewItem>
<ListViewItem>Привет штиблет</ListViewItem>
<ListViewItem>333</ListViewItem>
<ListViewItem>A ListView</ListViewItem>
<ListViewItem>111</ListViewItem>
<ListViewItem>Привет штиблет</ListViewItem>
<ListViewItem>333</ListViewItem>
</ListView.Items>
</ListView>
</Grid>
</Window>
|
1) Помогите прорабоать правый верхний угол http://gyazo.com/6e3b11f3d58e0728aa23cba241f15071
а) удалить черный прямоугольник - место оставшееся от repeatbutton'a scrollbar'a
- его либо закрашивать в цвет шапки, либо растягивать шапку ListView, чтобы она его перекрывала.. нельзя ли как-нибудь внести scrollbar под шапку ListView и сместить его влево? Или какие есть решения?
б) картинка та же, 3 столбец. Как сделать, чтобы 4-ого столбца не было и при этом не появлялся горизонтальный скролл? Проблема в том, что если отображать чисто 3 столбец, то отображается и кусочек следующего столбца (которого нет). Как растянуть столцы "вровень" так сказать...
2) внизу появляется артефакт какой то при горизонтальном и вертикальном скролле
http://gyazo.com/ae204d04f728d756689aac61289f9102
Правый нижний угол
Заранее всех благодарю, принимаю любую критику и предложения по коду и его улучшению  |
