Изменение пользовательского интерфейса в соответствии с размером текста в wp7 - PullRequest
Новая
       56

Изменение пользовательского интерфейса в соответствии с размером текста в wp7

1 голос
/ 21 марта 2012 
<ListBox Margin="0,2,0,0"   SelectionChanged="OnSelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="lstUcpPanel" ItemContainerStyle="{StaticResource myContainerStyle}">


            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Width="Auto" Height="Auto"  Margin="-7,-8,-7,0"  ItemWidth="246" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>


            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border  BorderThickness="1"  Margin="3.5,1,0,0"   BorderBrush="Transparent">
                        <StackPanel  Orientation="Vertical"  Background="LightGray">
                            <Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" ></Image>
                            <TextBlock  Text="{Binding name}" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
                        </StackPanel>

                    </Border>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Я использую приведенный выше код для отображения данных в следующем формате:

its the correct format

, но когда [имя] такое длинное, как "Настройки flkjadsflka fdsaflksdj flhasdjhflasd ", тогда дизайн выглядит так:

this is distorted format

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

Ответы [ 2 ]

1 голос
/ 21 марта 2012

Как насчет придания элементам в WrapPanel фиксированной высоты? 

<toolkit:WrapPanel ItemHeight="80" ... />
1 голос
/ 21 марта 2012

Установите для свойства растяжения вашего изображения значение Stretch = "Fill" 

<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" Stretch="Fill" ></Image>
...