Arhn - архитектура программирования

Проблема ширины списка WP7 при изменении ориентации

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

<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
 <Grid>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="auto"/>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="auto"/>
  </Grid.ColumnDefinitions>
  <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
   <Button Width="100" Name="RED"  Height="100" Click="ButtonDec_Click">
    <Button.Background>
     <ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
    </Button.Background>
   </Button>
  </StackPanel>
  <StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
   <TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="AAAAAAAAAAAAA" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
   <TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="CCCCC" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
  </StackPanel>
  <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
   <Button Grid.Column="0" Width="100" Name="GREEN"  Height="100" Click="ButtonInc_Click">
    <Button.Background>
     <ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
    </Button.Background>
   </Button>
  </StackPanel>
 </Grid>
</Border>

и в результате получился элемент, который заполняет экран и не имеет значения в портретной или альбомной ориентации.

кейс 1, дизайн без привязки

и чтобы сделать его динамичным, я просто сделал список шаблонов данных

 <ListBox  Grid.Row="1" Name="countersList" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="countersList_SelectionChanged">
  <ListBox.ItemTemplate>
   <DataTemplate>
    <Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
     <Grid>
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="auto"/>
       <ColumnDefinition Width="*"/>
       <ColumnDefinition Width="auto"/>
      </Grid.ColumnDefinitions>
      <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
       <Button Width="100" Name="{Binding index}"  Height="100" Click="ButtonDec_Click">
        <Button.Background>
         <ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
        </Button.Background>
       </Button>
      </StackPanel>
      <StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
       <TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding name}" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
       <TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding count}" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
      </StackPanel>
      <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
       <Button Grid.Column="0" Width="100" Name="{Binding index}"  Height="100" Click="ButtonInc_Click">
        <Button.Background>
         <ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
        </Button.Background>
       </Button>
      </StackPanel>
     </Grid>
    </Border>
   </DataTemplate>
  </ListBox.ItemTemplate>
 </ListBox>

результатом был список, который оборачивает свой размер своим содержимым after the binding

Итак, как я могу это исправить, я хочу список, который заполняет экран, и не имеет значения, был ли он в альбомной или портретной ориентации.

mobile user-interface silverlight windows-phone-7
20.12.2011

Ответы:


1

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

Размер элемента списка определяется НЕ ItemTemplate, а ItemContainerStyle и размером ListBox.

Сначала добавьте в ListBox:

<ListBox HorizontalAlignment="Stretch" ...>

чтобы убедиться, что сам ListBox растянут по горизонтали. Если вы установите его на Center, он станет таким же широким, как его содержимое/дочерние запросы.

Затем добавьте это в ListBox:

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
    </Style>
</ListBox.ItemContainerStyle>

Этот ItemContainerStyle приведет к тому, что все элементы будут растянуты до ширины родителя (панели элементов ListBox).

20.12.2011
  • Большое спасибо, все работает, как и ожидалось. и извините за длинный пост :) 21.12.2011
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..