Чтобы ListView
перекрывал при расширении остальные столбцы в сетке надо:
- установить
Grid.ColumnSpan=3
(в зависимости сколько вы хотите перекрыть)
- установить
Grid.ZIndex=2
(больше остальных)
Я сделал так:
задаем нашу сетку
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="auto"/>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
сразу добавим SpliterGrid
:
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="5"
VerticalAlignment="Stretch" HorizontalAlignment="Center"></GridSplitter>
в первую колонку заносим ScrollViewer
(вы сказали что ListView
имеет горизонтальный скролл)
<ScrollViewer Grid.Row="0" Grid.Column="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
Grid.ColumnSpan="{Binding ColumnSpan}"
Grid.ZIndex="2"> <!--важный момент, индекс больше чем у содержимого второй колонки -->
<ListView HorizontalAlignment="Left"
Width="{Binding WidthListView}">
<ListView.View>
<GridView>
<GridViewColumn Header="Поле1" DisplayMemberBinding="{Binding }"/>
<GridViewColumn Header="Поле2" DisplayMemberBinding="{Binding }"/>
<GridViewColumn Header="Поле3" DisplayMemberBinding="{Binding }"/>
<GridViewColumn Header="Поле4" DisplayMemberBinding="{Binding }"/>
<GridViewColumn Header="Поле5" DisplayMemberBinding="{Binding }"/>
<GridViewColumn Header="Поле6" DisplayMemberBinding="{Binding }"/>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
В эту же колонку добавим кнопку отвечающую за расширению ListView
(кнопку можно добавить по желанию в любое место)
<Button Grid.Row="1"
Width="100" Height="20"
Command="{Binding StretchCommand}" HorizontalAlignment="Left">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding StateListView}" Value="True">
<Setter Property="Content" Value="сжать"/>
</DataTrigger>
<DataTrigger Binding="{Binding StateListView}" Value="False">
<Setter Property="Content" Value="расстянуть"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
во вторую колонку что угодно.
<Label Grid.Column="2" Grid.ZIndex="1">Content</Label>
MainVM
:
//ширина ListView
public int _widthListView=100;
public int WidthListView
{
get { return _widthListView; }
set { _widthListView = value; NotifyPropertyChanged("WidthListView"); }
}
//количество перекрываемых столбцов
private int _columnSpan = 0;
public int ColumnSpan
{
get { return _columnSpan; }
set { _columnSpan = value; NotifyPropertyChanged("ColumnSpan"); }
}
//состояние ListView true-расширена false - сжата
private bool stateListView = false;
public bool StateListView
{
get { return stateListView; }
set { stateListView = value; NotifyPropertyChanged("StateListView"); }
}
//команда которая расширяет/сжимает ListView
private DelegateCommand _stretchCommand;
public ICommand StretchCommand
{
get
{
if (_stretchCommand == null)
{
_stretchCommand = new DelegateCommand(stretchingExecute);
}
return _stretchCommand;
}
}
private void stretchingExecute()
{
if (!stateListView)
{
WidthListView = 350;
ColumnSpan = 3;
StateListView = true;
}
else
{
WidthListView = 100;
ColumnSpan = 0;
StateListView = false;
}
}
Вот что у меня получилось:
