0

I'm trying to create a ListViewItemTemplate and my template needs to have two textblocks side by side. The one on the left is a message textblock and should stay left and the one on the right is a date textblock. That textblock needs to stretch to the end of the ItemTemplate and needs to fit all the text. I'm trying to achieve this:

enter image description here

But this is what I get:

enter image description here

The XAML code for this is:

<DataTemplate x:Key="ItemTemplate">
        <Grid Height="84">
            <StackPanel Holding="ListViewItem_Holding">
                <TextBlock Text="{Binding Title}" FontFamily="Segoe WP" FontSize="21" />
                <StackPanel Margin="0,0,-3,0" Orientation="Horizontal">
                    <TextBlock Text="{Binding Post}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-1,0" Height="26" />
                    <TextBlock Text="{Binding Modified}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-3,0" SelectionChanged="TextBlock_SelectionChanged" />
                </StackPanel>
                <TextBlock Text="{Binding ID}" FontFamily="Segoe WP SemiLight" FontSize="18" Visibility="Collapsed" />
            </StackPanel>
        </Grid>
    </DataTemplate>

How can I fix this? I need it so that it stretches properly and at the same time fits all the text regardless of the orientation.

2 Answers 2

2

I would personally use a Grid as it is far more flexible than StackPanel and deals with different screen sizes much better. something like below

<Grid>
   <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
   </Grid.ColumnDefinitions>
   <TextBlock Text="Cant send: message" FontFamily="Segoe WP SemiLight" 
              FontSize="18" Margin="0,0,-1,0"
              TextWrapping="Wrap"/>
   <TextBlock Text="1:14a" Grid.Column="1" FontFamily="Segoe WP SemiLight" 
              TextWrapping="Wrap" FontSize="18"
              HorizontalAlignment="Right"                                    
              SelectionChanged="TextBlock_SelectionChanged"
              Margin="0,-15,0,0"/>
</Grid>

Note 2 columns are defined with equal widths. You can adjust this to your needs. Also both TextBlocks have

TextWrapping="Wrap"

which means your text will go to available space (column width) then wrap to the next line if space is available.

The second TextBlock is aligned to the right so adjust margins as appropriate.

HorizontalAlignment="Right"
1
  • Thank you for this. Also adding this: <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> </Style> </ListView.ItemContainerStyle> made it really stretch out and take almost the whole template.
    – Zer0
    Jan 23, 2015 at 19:36
1

You can make this with Grid.RowDefinitions and Grid.ColumnDefinitions. Base on your picture you have data on two columns and one line. So you can size your screen on two columns and one line. You don't need to use stackpanel to achieve this.

<Grid Height="84">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Text="User" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="21"  Grid.Column="0"/>
        <TextBlock Text="1:41a" FontFamily="Segoe WP SemiLight" FontSize="18" Grid.Column="1" HorizontalAlignment="Right"/>


    </Grid>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.