listbox's item with dynamic height

Question

I have a listBox, wich I fill from some collection. Each item of collection has some info: static name and picture, and dynamic content(text, photo or photos, etc). I want to change the listbox's item height for each item of collection. Height depends of content, if it has only text - item of listbox must have static (textblock for name, image for picture) and a textblock with text, and textblock's heigth must change acording to text (if it's 2-3 strings height will be min, if text fit in 15-20 strings - height of textblock must change accordind to strings), if item of collection include text and image - it must have static (textblock for name, image for picture), textblock for text, and image for image. Height of listbox's item must depend of textblock size and image size.

At this time, I have a listbox with static item's height, and want to make height dynamic.

here is one of my listbox's item

<local:NewsTemplateSelector.Photo>
    <DataTemplate>
        <Border 
            BorderBrush="Red" 
            BorderThickness="2"  
            Width="400" 
            Height="auto" 
            Margin="10">
            <StackPanel Orientation="Horizontal" Width="400" Height="auto">
                <Image 
                    Source="{Binding SourceImage}" 
                    Height="75" 
                    Width="75" 
                    Margin="0,-225,0,0" />
                <Canvas Width="400">
                    <TextBlock 
                        Text="{Binding SourceName}" 
                        Foreground="Black" 
                        FontSize="25" 
                        TextWrapping="Wrap" 
                        Height="55" 
                        Width="326" 
                        d:LayoutOverrides="VerticalAlignment, Height" />
                    <Image  
                        Source="{Binding Photo[0].Big}" 
                        Height="auto" 
                        VerticalAlignment="Bottom" 
                        HorizontalAlignment="Right" 
                        Width="326" 
                        Canvas.Top="69"/>
                </Canvas>
            </StackPanel>
        </Border>
    </DataTemplate>
</local:NewsTemplateSelector.Photo>

UPD: Tried

<local:NewsTemplateSelector.Photo>
    <DataTemplate>
        <Border 
            BorderBrush="Red" 
            BorderThickness="2"  
            Width="auto" 
            Height="auto" 
            Margin="10">
            <Canvas Width="auto">
                <Image 
                    Source="{Binding SourceImage}" 
                    Height="auto" 
                    Width="auto" 
                    HorizontalAlignment="Stretch" />
                <TextBlock 
                    HorizontalAlignment="Stretch" 
                    Text="{Binding SourceName}" 
                    Foreground="Black" 
                    FontSize="25" 
                    TextWrapping="Wrap" 
                    Height="auto" 
                    Width="auto"  
                    MaxHeight="300" 
                    MaxWidth="460"  />
                <TextBlock 
                    HorizontalAlignment="Stretch" 
                    Text="{Binding Texts}" 
                    Foreground="Black" 
                    FontSize="25" 
                    TextWrapping="Wrap" 
                    Height="auto" 
                    Width="auto" 
                    MinHeight="150"   
                    MaxHeight="300" 
                    MaxWidth="460"  />
                <Image  
                    HorizontalAlignment="Stretch"   
                    Source="{Binding Photo[0].Big}" 
                    Height="auto" 
                    MinHeight="150" 
                    MaxHeight="300" 
                    MaxWidth="460"  
                    Width="auto"/>
            </Canvas>
        </Border> 
    </DataTemplate>
</local:NewsTemplateSelector.Photo>`

but photos superimposed on each other, and images with name SourseImage, also superimposed at the top of screen

Swapnika Swapnika · Accepted Answer · 2012-12-04T06:56:25

Try by replacing all the hard coded properties with auto, like height=auto and width=auto.

If you want to fill the total row make the HorizontalAlignment=:stretch".

Make the textblock property TextWrapping="wrap" and MinWidth as fixed as you want.

listbox's item with dynamic height

2 Answers