WPF listview / gridsplitter / scrollviewer проблема изменения размера

Question

У меня проблема с гридсплиттером, выталкивающим мой просмотр списка из этой комбинации. Шаги для воспроизведения:

• Запустить программу, перетащить размер окна больше
• Перетащите красный сплиттер полностью влево, чтобы свернуть синюю колонку
• Расширяйте оба столбца ListView до тех пор, пока они не окажутся вне области просмотра, и не появится горизонтальная прокрутка
• Перетащите размер окна еще меньше

Для меня это медленно выталкивает ListView за пределы окна. Обратите внимание, что ScrollViewer на самом деле уменьшается в размерах с окном, но не с той же скоростью и медленно исчезает из поля зрения. Когда прокручиватель начинает исчезать из вида, сплиттер больше не может использоваться!

Как ни странно, если я сначала не сверну левую панель, я не получу такого поведения!

Что бы исправить это?

<Window x:Class="LayoutTest3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="600" Width="800" MinHeight="600" MinWidth="800" >
    <Window.Resources>
        <XmlDataProvider XPath="/Celebrities/Celebrity" x:Key="celebs">
            <x:XData>
                <Celebrities xmlns="">
                    <Celebrity Name="Jimmy">
                        <LastName>Page</LastName>
                    </Celebrity>
                    <Celebrity Name="Johnny">
                        <LastName>Depp</LastName>
                    </Celebrity>
                    <Celebrity Name="Britney">
                        <LastName>Spears</LastName>
                    </Celebrity>
                </Celebrities>
            </x:XData>
        </XmlDataProvider>

        <DataTemplate x:Key="NameTemplate">
            <TextBlock Text="{Binding XPath=@Name}" />
        </DataTemplate>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" MinWidth="100" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" MinWidth="400" />
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" Background="Blue" />
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" ResizeBehavior="PreviousAndNext" VerticalAlignment="Stretch" Background="Red" />
        <Border Grid.Column="2" Background="Green">
            <ListView ItemsSource="{Binding Source={StaticResource celebs}}">
                <ListView.View>
                    <GridView>
                        <GridView.Columns>
                            <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" />
                            <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" />
                        </GridView.Columns>
                    </GridView>
                </ListView.View>
            </ListView>
        </Border>
    </Grid>
</Window>

Answer 1

Существует известная проблема с GridSplitter и Column с MinWidth, GridSplitter по-прежнему изменяет размер Grid, игнорируя MinWidth столбца.Результатом этого является то, что дочерний элемент растущей колонки получает больший размер, чем фактически доступный.Но Grid размещает дочерние элементы с учетом MinWidth, и, следовательно, ваш столбец Shrinking остается на MinWidth, но дочерний элемент Growing Column выходит за пределы размера, который GridSplitter вышел за пределы MinWidth сокращающего столбца.

Я собираюсь выяснить, как я решил эту проблему в моем проекте, и я опубликую код.Тем временем вы можете попробовать следующие варианты.

1. Удалить MinWidth из ColumnDefinition
2. Добавить MinWidth к потомку

Зная заранее, что минимальный размер вашей сетки должен быть 500 + Размер Splitter, вы можетеустановить MinWidth всей сетки.

Answer 2

Вот как я это сделал:

<Grid Name="container" SizeChanged="container_SizeChanged">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Name="rightPanel" Width="*" MinWidth="100"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Background="Red" Foreground="White">Test</TextBlock>
    <GridSplitter Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="2" Height="Auto" ResizeDirection="Columns"/>
    <Border Grid.Column="1" Background="Green" Margin="0 0 0 0">
        <ListView ItemsSource="{Binding Source={StaticResource celebs}}">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" />
                        <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" />
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Border>
</Grid>

и код позади (фу!):

private void container_SizeChanged(object sender, SizeChangedEventArgs e)
{
    rightPanel.MaxWidth = container.ActualWidth - 150;
}

В основном вы берете минимальную ширину и выполняете аналогичный расчет, чтобы установить MaxWidth на другой панели.

Answer 3

Может быть, это может помочь, вы всегда должны использовать один и тот же тип единиц измерения для ширины / высоты, или сплиттер не будет работать правильно.

 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" MinWidth="150"/>
        <ColumnDefinition Width="4*" MinWidth="150"/>
    </Grid.ColumnDefinitions>

    <ListView Grid.Column="0" BorderBrush="#FF005BFF" Margin="0,0,5,0">
        <ListView.View>
            <GridView>
                <GridViewColumn />
            </GridView>
        </ListView.View>
    </ListView>

    <GridSplitter Grid.Column="1" 
                  HorizontalAlignment="Left" VerticalAlignment="Stretch" 
                  Background="Black" 
                  ShowsPreview="true"
                  Width="2" />

    <ListView Grid.Column="1" BorderBrush="#FFFF5100" Margin="5,0,0,0">
        <ListView.View>
            <GridView>
                <GridViewColumn />
            </GridView>
        </ListView.View>
    </ListView>
</Grid>