Как использовать MaxWidth вместо ширины

У меня есть вопрос о MaxWidth. Давайте посмотрим на этот код:

    <Grid Height="50" Background="Red">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
        <Grid Grid.Column="3" Width="200" Background="Blue" BorderBrush="Black" BorderThickness="2" />
    </Grid>

У нас есть красная сетка с height 50px и шириной во весь экран. В этой сетке я хочу иметь 3 элемента, например сетки, одну слева от экрана и две справа от экрана, все с width 200px.

На больших экранах этот код работает хорошо, у нас есть зеленая сетка 200px слева и две желтые и синие сетки 200px справа с красным пространством между ними.

Но на небольших экранах (менее 600 пикселей) синяя сетка обрезается. Я хочу, чтобы зеленая и желтая сетки оставались 200px, а синяя сетка занимала столько, сколько может, например 150px или 100px. Я пытаюсь просто изменить Width=200 на MaxWidth=200 на синей сетке, но с этим кодом синяя сетка исчезает. Он не растягивается, его ширина равна 0. Как сделать так, чтобы он максимально растягивался, до 200px?


xaml uwp uwp-xaml windows-10-universal windows-store-apps
person Raximus    schedule 11.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добиться желаемого эффекта с помощью этого XAML:

<Grid Height="50" Background="Red">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="999*" MaxWidth="200" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0" Width="200" Background="Green" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="2" Width="200" Background="Yellow" BorderBrush="Black" BorderThickness="2" />
    <Grid Grid.Column="3" Background="Blue" BorderBrush="Black" BorderThickness="2" >
        <Button HorizontalAlignment="Right" Content="Test"/>
    </Grid>
</Grid>

Я добавил Button в синюю сетку, чтобы показать, что он правильно растягивается.

Хитрость заключается в том, чтобы установить MaxWidth на уровне ColumnDefinition и снять ограничение в 200 пикселей на уровне сетки (иначе он никогда не станет меньше этого).

«Хак» происходит в Width из ColumnDefinition, где вам нужно позволить ему свободно растягиваться, что достигается с помощью «*». Но у вас уже есть растяжимый столбец. Таким образом, вам нужно сначала уменьшить 2-й столбец (красный) и только затем начать сжимать синий. Хотя это невозможно из коробки, вы можете использовать этот трюк для достижения этого. 999* означает, что синий столбец должен быть в 999 раз больше красного, поэтому при изменении размера он попытается сохранить это соотношение. Только когда красный станет достаточно маленьким (на данный момент 0 пикселей), синий начнет изменять размер.

person AlexDrenea    schedule 11.07.2016