WP7 ListBox Элементы для заполнения ширины ListBox - PullRequest
Новая
       18

WP7 ListBox Элементы для заполнения ширины ListBox

5 голосов
/ 25 августа 2010

Я пытаюсь получить элементы в ListBox, чтобы охватить всю ширину ListBox.Я нашел несколько постов, имеющих отношение к HorizontalContentAlignment = "Stretch", но мне не удалось заставить его работать в моем приложении WP7.Вот мой ListBox: 

<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
    <ListBox.ItemTemplate>
        <DataTemplate> 
            <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34" 
                BorderThickness="1" HorizontalAlignment="Stretch" > 
                <Grid Background="Transparent" HorizontalAlignment="Stretch" > 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock  
                        Grid.Column="0" HorizontalAlignment="Stretch" 
                        Margin="2"                                    
                        FontSize="10" 
                        Text="{Binding Property1}"/> 
                </Grid> 
             </Border> 
        </DataTemplate> 
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Я пытаюсь получить оранжевую рамку, чтобы охватить всю ширину списка, чтобы все элементы списка имели одинаковый размер, а не только размер текста вTextBlock.

Ответы [ 4 ]

8 голосов
/ 10 октября 2011

Используйте следующий статический ресурс в качестве ItemContainerStyle Listbox: 

ItemContainerStyle="{StaticResource ListboxStretchStyle}" 

<Application.Resources>
    <Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>
6 голосов
/ 08 мая 2012

Вот что я использую для этого: 

                <ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter
                                            HorizontalAlignment="Stretch" 
                                            VerticalAlignment="Stretch" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{StaticResource PhoneAccentBrush}" >
                                <TextBlock
                                    Text="{Binding Text}"
                                    FontSize="30"
                                    Foreground="{StaticResource PhoneForegroundBrush}" />
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

больше руды меньше, найденной здесь: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/

2 голосов
/ 26 августа 2010

Похоже, что Джон Гарднер на пороге того, что это что-то вроде дефекта в бета-версии.Он отлично работает в «старом» Silverlight, но дает странно-центрированные области в телефоне.Однако достаточно легко проработать прошлое.

  • Избавьтесь от / закомментируйте запись ListBox.ItemContainerStyle в вашем списке выше.

  • В Blend выберите ваш ListBox в Объектахи панель «Таймлайн», щелкните правой кнопкой мыши и выберите «Редактировать дополнительные шаблоны» / «Редактировать контейнер сгенерированного элемента» (ItemContainerStyle) / «Редактировать копию» ... Выберите имя / ключ и расположение для нового ресурса стиля.

  • Найдите элемент управления ContentContainer и установите для него «Горизонтальное выравнивание содержимого» значение «Привязать к горизонтальному выравниванию содержимого», установленному в элементе, использующем этот шаблон, (HorizontalContentAlignment = "{TemplateBinding HorizontalContentAlignment}") следующим образом: 

    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

После того, как вы сообщили ContentControl, как он должен выравнивать свое (гм) содержимое, результаты должны быть такими, как вы ожидали.

2 голосов
/ 25 августа 2010

Я считаю, что это ошибка в бета-версии, потому что это должно быть HorizontalContentAlignment.

В качестве обходного пути вам, возможно, придется использовать фиксированное значение ширины.

...