Silverlight: GridSplitter внутри ScrollViewer ведет себя неожиданно - PullRequest
Новая
       6

Silverlight: GridSplitter внутри ScrollViewer ведет себя неожиданно

0 голосов
/ 02 августа 2011

Я пытаюсь построить макет из двух столбцов, в котором ширина столбцов может быть изменена с помощью сплиттера. Ширина правого столбца не должна изменяться при изменении размера окна браузера (она не должна быть пропорциональна ширине сетки). Оба столбца должны иметь минимальную ширину. Если окно браузера слишком узкое для отображения обоих столбцов, должна появиться полоса прокрутки.

Это мой XAML: 

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

У меня проблема в том, что сплиттер перетаскивается влево и достигается минимальная ширина левого столбца - правый столбец начинает очень быстро расти и появляется полоса прокрутки. Удаление параметра ширины из правого столбца устраняет странное поведение, но теперь правый столбец начинает пропорционально увеличиваться при изменении размера окна ...

Я бы хотел, чтобы сплиттер вел себя так же, как при его перетаскивании вправо - я бы хотел, чтобы он остановился после достижения минимальной ширины.

Ответы [ 3 ]

0 голосов
/ 22 августа 2011

Я думаю, что наконец-то смог найти обходной путь. Я изменяю ширину кода, когда меняется макет.

XAML: 

<Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer x:Name="Scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
        <Grid x:Name="Workspace" Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top" LayoutUpdated="Workspace_LayoutUpdated">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

Код: 

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Workspace_LayoutUpdated(object sender, EventArgs e)
    {
        Workspace.Width = Scroller.ViewportWidth - 1;
    }

}
0 голосов
/ 02 марта 2012

Причиной такого поведения является то, что вы указали первый столбец Width="300*" звездочками, и третий столбец Width="100" без звездочек.

Просто поставьте звездочки в первый и третий столбцы или удалите соответственно, и все будет работать так, как вы хотите.

0 голосов
/ 03 августа 2011

Вы должны отключить «HorizontalScrollBarVisibility». Этот код работает для меня: 

 <Grid x:Name="LayoutRoot" Background="White">
    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
        <Grid Height="200" Margin="0,0,0,0" MinWidth="400" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="300" Width="300*" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="100" Width="100"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="Red" x:Name="LeftColumn"></Grid>
            <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="10" Background="Black" />
            <Grid Grid.Column="2" Background="Green" x:Name="RightColumn"></Grid>
        </Grid>
    </ScrollViewer>
</Grid>

ScrollViewer дает сетке бесконечное пространство для роста. Следовательно minWidth никогда не останавливает это. Очевидно, нет необходимости в ScrollViewer, который отключен как по вертикали, так и по горизонтали. Лучше переместить полосу прокрутки внутри сетки, окружающей содержимое каждого столбца.

...