VPF::ListView. Помогите поправить внешний вид

WOoHOo

Дата 28.6.2014, 20:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 30.11.2010

Репутация: нет
Всего: нет

Приветствую! Есть 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
Правый нижний угол

Заранее всех благодарю, принимаю любую критику и предложения по коду и его улучшению smile

Ilya81

Дата 30.6.2014, 08:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 18.4.2014
Где: ЛО, Всеволожский р-н

Репутация: 1
Всего: 4

Цитата(WOoHOo @ 28.6.2014, 20:01

)

а) удалить черный прямоугольник - место оставшееся от repeatbutton'a scrollbar'a
- его либо закрашивать в цвет шапки, либо растягивать шапку ListView, чтобы она его перекрывала.. нельзя ли как-нибудь внести scrollbar под шапку ListView и сместить его влево? Или какие есть решения?

Полагаю, это задано:

Код


<ScrollViewer Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">

Надо поменять на другой стиль.

Цитата(WOoHOo @ 28.6.2014, 20:01

)

б) картинка та же, 3 столбец. Как сделать, чтобы 4-ого столбца не было и при этом не появлялся горизонтальный скролл? Проблема в том, что если отображать чисто 3 столбец, то отображается и кусочек следующего столбца (которого нет). Как растянуть столцы "вровень" так сказать...

В ListView добавить

Код


<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

или задать это свойство через стиль.

Цитата(WOoHOo @ 28.6.2014, 20:01

)

внизу появляется артефакт какой то при горизонтальном и вертикальном скролле

Посмотрите, что получится после ScrollViewer.HorizontalScrollBarVisibility="Disabled".

WOoHOo

Дата 30.6.2014, 20:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 30.11.2010

Репутация: нет
Всего: нет

Цитата

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

Когда я добавляю данный параметр, то у ListView пропадает HorizontalScrollBar, что неприемлемо, т.к. нет возможности до конца просмотреть содержимое строк (хотя да, проблема с ровным отображением столбца (без следующего) пропадает, но решение не подходит!).

А да, я хотел же задать вопрос по этой строке

Цитата

но вылетело из головы.. Данного стиля у меня нет, я взял чужой код и переработал/изменил его под себя. Насколько я помню там также его не было.. или я его удалил, т.к. не видел на что он влияет. Видимо придется его написать самому..
Все время мучает вопрос: почему задавая стиль для полос прокрутки (который у меня еще и не определен явно в коде), он так же затрагивает мою шапку?! Т.е. если не стилизовать ScrollViewer

Код


<ScrollViewer>
 <ItemsPresenter/>
 </ScrollViewer>

То шапка совсем пропадает. Как я вижу: лежит border в стиле listview, и у которого стиль dark-listview-header. Вот и вся шапка. Так нельзя? smile

Ilya81

Дата 1.7.2014, 07:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 18.4.2014
Где: ЛО, Всеволожский р-н

Репутация: 1
Всего: 4

Стиль для GridView.GridViewScrollViewerStyleKey находится в PresentationFramework.dll - одном из модулей самого WPF.

Цитата(WOoHOo @ 30.6.2014, 20:35

)

То шапка совсем пропадает. Как я вижу: лежит border в стиле listview, и у которого стиль dark-listview-header. Вот и вся шапка. Так нельзя?

У стиля ScrollViewer по умолчанию не предусмотрено заголовка. Нужен стиль, в котором он задан, иначе он не появится.

Цитата(WOoHOo @ 30.6.2014, 20:35

)

Если нужно поменять стандартную схему отображения заголовка, а HorizontalScrollBar оставить, задайте это в том же самом стиле, который будет вместо GridView.GridViewScrollViewerStyleKey.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| WPF и Silverlight \| Следующая тема »