Как создать ListBox, похожий на плитки Windows Live? - PullRequest
Новая
       47

Как создать ListBox, похожий на плитки Windows Live?

1 голос
/ 27 октября 2011

Я хочу создать ListBox, который выглядит как Windows Live Tiles.

Это мой XAML: 

<ListBox Name="listBox"
             Grid.Row="1"
              Background="Transparent"
              BorderBrush="Transparent"
              BorderThickness="0"
              Width="Auto" Height="Auto"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled"
              ItemsSource="{Binding Path=SomeList,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
              VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
    <DataTemplate >
        <Grid x:Name="PART_Item" Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>


            <Image Name="logo" Source="{Binding Path=ImagePath}" 
                                Width="50" Height="50"
                               Margin="0,0,10,0"
                                   Grid.Column="0" Grid.Row="0" Grid.RowSpan="2"
                               RenderTransformOrigin="0.5,0.5"
                               SnapsToDevicePixels="True">
            </Image>

            <TextBlock Grid.Row="0" Grid.Column="1" 
                               TextAlignment="Left" 
                               FontSize="12"
                               Text="{Binding Path=SomeName}" 
                               TextTrimming="CharacterEllipsis"/>

            <TextBlock Grid.Row="1" Grid.Column="1" 
                               Margin="0,10,0,0" 
                                       FontSize="12"
                               TextAlignment="Left" 
                               Text="{Binding Path=SomeNo}" 
                               TextTrimming="CharacterEllipsis"/>

            <TextBlock Grid.Row="0" Grid.Column="2"
                               TextAlignment="Left" 
                                       FontSize="12"
                               Text="{Binding Path=SomeDescription}"
                               TextWrapping="Wrap"/>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

  • Как мне изменить это XAML, чтобы оно выглядело как Windows Live Tiles?

  • 2 Items рядом друг с другом в течение 2 Rows, а затем 1 Item сColumnSpan из 2 и так далее должно продолжаться.

Я только хочу быть в упомянутой выше схеме.

Как бы я этого достиг?

Изображение только для справки.Я хочу, чтобы макет был похож на первые 3 строки.

enter image description here

Ответы [ 2 ]

2 голосов
/ 27 октября 2011

Одним из простых решений является использование WrapPanel в качестве ListBox ItemsPanel.Сделайте так, чтобы ваши элементы имели правильный размер (квадрат или прямоугольник), используя DataBinding, и задайте ListBox ширину двух квадратов.

1 голос
/ 27 октября 2011

Я бы, наверное, сделал это с WrapPanel.Дайте ListBox ItemPanelTemplate с WrapPanel в нем: 

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Orientation="Horizontal" />
    </ItemsPanel>
</ListBox>

Затем настройте свой ItemTemplate так, чтобы размер каждого элемента составлял половину ширины самого ListBox (или такой же ширины, для вашего примера, третьегострока).Самый простой способ сделать это - установить ListBox на известную ширину, а затем привязать ширину панели верхнего уровня в DataTemplate к чему-либо в объектах элемента.Однако это означает, что объектам необходимо знать, какой ширины они должны быть - но если они хотят правильно заполнить размеры листов, возможно, это можно рассматривать как преимущество.

Другой вариант - DataTemplateSelector,но для этого также необходимо иметь способ определения, должен ли он предоставлять широкий или узкий шаблон, и у него нет доступа к информации о том, где он находится в списке - он просто знает, для какого элемента нужно доставить шаблон.

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

Но, судя по твоему вопросу, я думаю, ты, вероятно, будешь в порядке, просто перепроверив ListBox.

...