Как автоматически изменять размеры элементов контейнера, чтобы обеспечить минимальную высоту для проблем с видимостью? - PullRequest
Новая
       11

Как автоматически изменять размеры элементов контейнера, чтобы обеспечить минимальную высоту для проблем с видимостью?

1 голос
/ 27 июня 2011

У меня есть ItemsControl и я хочу отобразить некоторые строки из моего CustomObject.

Это как 

String A
String B
String C

где строки A и B могут быть длиной в несколько строк, а C - нет. Я думал о Height="Auto" и DockPanel. Высота строки A должна быть такой, какой она должна быть. Со строкой B также.

Это то, что я до сих пор придумал: 

<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Background="Black">
    <ItemsControl Name="ItemsControl1">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#FF126eb1" BorderThickness="1.5" CornerRadius="8,8,8,8" Background="#FF074e84" Width="350" Height="Auto">
                    <DockPanel Width="350" Margin="0,10,0,0" Height="Auto" Background="Transparent">
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Headline}" Canvas.Left="5" Canvas.Top="5" Foreground="White" FontSize="15" FontWeight="Bold" MaxWidth="340" TextWrapping="Wrap" Height="Auto"/>
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Height="Auto" Width="350" Margin="0,10,0,0">
                            <TextBlock Text="{Binding Description}" Canvas.Left="5" Canvas.Top="20" Foreground="White" FontSize="13" MaxWidth="340" TextWrapping="Wrap" Height="Auto" />
                        </Canvas>
                        <Canvas DockPanel.Dock="Top" Width="350" Height="40" Margin="0,10,0,0" Background="Transparent">
                            <TextBlock Text="{Binding DeadlineOn, StringFormat='Deadline: {0}'}" Canvas.Left="5" Canvas.Top="5" Foreground="White"/>
                             <!-- and other controls -->
                        </Canvas>
                    </DockPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

К сожалению, только свойство margin устанавливает высоту для строк A и B.

Как это сделать, если высота каждого предмета неизвестна?

1 Ответ

2 голосов
/ 27 июня 2011

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

В общем, Canvas полезен для его удобных возможностей фиксированного позиционирования. Он позволяет размещать что угодно в любом месте, используя свойства Canvas.Left и Canvas.Top. Но поскольку размер Canvas фиксирован и не зависит от его дочерних элементов, его трудно использовать для содержимого переменного размера. Родитель Canvas «изолирован» от размера потомков Canvas, и это действительно полезно в некоторых ситуациях.

В отличие от этого, Grid, безусловно, является гибким элементом макета и полезен для разметки сеток со строками и столбцами, с охватом или без него и т. Д. Именно поэтому он используется по умолчанию при создании нового Window или UserControl. Но в отличие от Canvas, размер Grid, если он не указан и не растянут на доступное пространство, представляет собой объединение размеров всех его дочерних элементов.

A Grid также обладает свойством, что если у него есть несколько дочерних элементов, и они не размещены в строках или столбцах, то они накладываются друг на друга, а более поздние дочерние элементы выше Z-порядок. Это как Canvas, но без Canvas.Left и Canvas.Top, как мы можем точно контролировать положение детей?

Давайте посмотрим на пример. Вот Canvas с двумя прямоугольниками, расположенными рядом с небольшим пространством, и Grid, делающими то же самое: 

<Grid>
    <StackPanel>
        <Canvas Height="120">
            <Rectangle Canvas.Left="10" Canvas.Top="10" Height="100" Width="100" Fill="Red"/>
            <Rectangle Canvas.Left="120" Canvas.Top="10" Height="100" Width="100" Fill="Green"/>
        </Canvas>
        <Grid HorizontalAlignment="Left">
            <Rectangle Margin="10,10,10,10" Height="100" Width="100" Fill="Red" HorizontalAlignment="Left"/>
            <Rectangle Margin="120,10,10,10" Height="100" Width="100" Fill="Green" HorizontalAlignment="Left"/>
        </Grid>
    </StackPanel>
</Grid>

В первом случае мы должны были указать высоту Canvas, потому что она не имеет автоматического размера. Во втором случае мы использовали Margin - , имитирующие абсолютное позиционирование , а размер Grid адаптируется к размеру его содержимого.

...