Silverlight ItemsPanel - WrapPanel - PullRequest
Новая
       1

Silverlight ItemsPanel - WrapPanel

1 голос
/ 22 октября 2010 
    <ItemsPanelTemplate x:Key="lbWrapPanelItemsPanelTemplate">
        <wp:WrapPanel Margin="2" Background="Beige" HorizontalAlignment="Stretch">
        </wp:WrapPanel>
    </ItemsPanelTemplate>

..... 

<Grid Background="LightCoral" MinWidth="500" MinHeight="500">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <sdk:GridSplitter Grid.Column="0" Background="AliceBlue" />

    <StackPanel Grid.Column="0" FlowDirection="LeftToRight">
        <Button Width="40">Left</Button>
        <Button Width="40">Right</Button>
    </StackPanel>

    <Grid Background="Bisque" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>

        <ListBox ItemsPanel="{StaticResource lbWrapPanelItemsPanelTemplate}" x:Name="bookListBox" HorizontalAlignment="Stretch"  Grid.Row="0" ItemsSource="{Binding Path=BookSource}" ItemTemplate="{StaticResource dirtSimple}"  />

        <wp:WrapPanel Grid.Row="1">
            <Button Width="200" Command="{Binding Path=AddItemCommand}">Bottom</Button>
            <Button Width="200" Command="{Binding ChangeTemplateCommand}" CommandParameter="{StaticResource vmDataTemplate}">White</Button>
            <Button Width="200" Command="{Binding ChangeTemplateCommand}" CommandParameter="{StaticResource vmDataTemplate2}">Lavender</Button>
        </wp:WrapPanel>
    </Grid>

</Grid>

ListBox работает отлично, за исключением того, что (Beige) WrapPanel, кажется, расширяется в бесконечность. Когда в ListBox добавляется больше элементов, он просто прокручивается вправо, а не переносится. Если я добавлю конкретный размер к WrapPanel, это заставит вещи обернуться, но (очевидно) заставит элементы в LB отображаться в подмножестве всего доступного пространства.

Есть ли способ сказать WrapPanel, чтобы он занимал все доступное пространство и не более?

Ответы [ 2 ]

4 голосов
/ 22 октября 2010

У меня всегда возникают проблемы с корректной работой WrapPanel внутри ListBox es (вероятно, что-то в шаблоне связано с ScrollViewer в нем). Если вы возьмете свой код и поместите его в ItemsControl вместо ListBox, вы увидите, что он работает как есть.

Вы можете повлиять на ScrollViewer внутри вашей WrapPanel и заставить его обернуть: 

<ListBox HorizontalAlignment="Stretch" ItemsSource="{Binding foo}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <tk:WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Обратите внимание на ScrollViewer.Hor horizontalScrollBarVisibility, установленный в ListBox - это предотвращает горизонтальную полосу прокрутки, которая заставляет WrapPanel наматываться.

0 голосов
/ 22 октября 2010

Это можно исправить, привязав ширину WrapPanel к ActualWidth ListBox: 

<WrapPanel Width="{Binding RelativeSource={RelativeSource AncestorType=ListBox}, Path=ActualWidth"}

(если, конечно, это не то, что работает только в WPF, а не в Silverlight, что я не знаю.)

Любопытно, почему ListBox делает это, а ItemsControl - нет. WrapPanel имеет правильное поле, и элементы, которые в нем содержатся, правильно переносятся на этой странице: 

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="700"/>
    </Grid.ColumnDefinitions>
    <ItemsControl 
      Background="Azure"
      Margin="5">
      <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
          <WrapPanel 
            Background="Lavender"
            Margin="10"/>
        </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj</ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj</ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>
      <ListBoxItem>adsk flaskjf lkasjd flaskdjf laskdj flaksjf laskjf aslkjf alsjkf lsafdkj </ListBoxItem>      
    </ItemsControl>
  </Grid>
</Page>

Измените ItemsControl на ListBox, и это не так.

...