WPF Stretch ListBox высота 100% сетки.Грести?
Я пытаюсь растянуть высоту ListBox
100% высоты родительской сетки (т. е. 90% высоты родительского представления); даже если listboxes
пустые. Я должен отметить, что VerticalAlignment="Stretch"
похоже, не работает, поэтому я удалил его из ListBox
и StackPanel
элементы. На данный момент,ListBox
растягивается только настолько, насколько это необходимо для размещения количества элементов, которые он содержит. Я понимаю, что определения строк должны работать, но если оба списка пусты, они оба уменьшитесь до нескольких пикселей в высоту (вместе со строками сетки). Может ли что-то заставить эти строки сжиматься, несмотря на явное объявление высоты?
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0" Grid.Row="0" Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Border BorderBrush="#FF4788c8" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
<Expander IsExpanded="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}">
<Expander.Header>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" SharedSizeGroup="col1" />
<ColumnDefinition Width=".1*" SharedSizeGroup="col2" />
<ColumnDefinition Width="*" SharedSizeGroup="col3" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">
<TextBlock.Text>
<MultiBinding StringFormat="Name: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0">
<TextBlock.Text>
<MultiBinding StringFormat="ID: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1">
<TextBlock.Text>
<MultiBinding StringFormat="ID: {0}">
<Binding Path="SubdivisionName" />
<Binding Path="SubdivisionID" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</Grid>
</StackPanel>
</Expander.Header>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="{Binding ElementName=SubdivisionID}" />
<TextBlock Text="{Binding Path=SubdivisionID}" />
</Grid>
</StackPanel>
</Expander>
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
3 ответов
я смог достичь желаемой высоты, связав ListBox
свойство высоты к ActualHeight
из LayoutRoot Grid
через XAML ниже:
<Grid x:Name="LayoutRoot" Background="LightGray">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Name="Subdivisions" SelectedItem="{Binding SelectedSubdivisionViewModel}" ItemsSource="{Binding Path=Subdivisions}" Grid.IsSharedSizeScope="True" Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}" >
важно быть:
Height="{Binding ElementName=LayoutRoot, Path=ActualHeight}"
также достижимый через тип предка:
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"
код, который вы разместили, делает именно то, что объявлено в определении высоты строки родительской сетки: занимает 90% доступной высоты.
*.1 = 10% высоты
*.9 = 90% высоты
часто бывает полезно удалить беспорядок из xaml и начать с чего-то простого, чтобы помочь с макетом. Вот пример с определением столбца/строки сетки вашего кода, но с меньшим беспорядком и некоторым цветом фона, чтобы показать весь список.
- первый список имеет несколько элементов, в то время как 2-й список имеет только несколько элементов.
- обоих списков в первом ряду и заполнит 90% площадей.
- вторая строка содержит сетку, которая заполняет остальную часть пространства; вы можете видеть, что она занимает 10% доступного пространства.
обратите внимание, что первое поле списка не объявляет индекс столбца или строки; когда индекс не используется, предполагается, что он равен 0, т. е., Grid.Row="0" Grid.Column=0
.
<Grid Background="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".24*"/>
<ColumnDefinition Width=".73*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=".9*"/>
<RowDefinition Height=".1*"/>
</Grid.RowDefinitions>
<ListBox Background="LightGray"
ItemsSource="{x:Static Fonts.SystemFontFamilies}"/>
<ListBox Grid.Column="1" Grid.Row="0" Background="LightSlateGray">
<ListBoxItem>John</ListBoxItem>
<ListBoxItem>Jane</ListBoxItem>
<ListBoxItem>Fido</ListBoxItem>
</ListBox>
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Tomato" />
</Grid>