CODEWITHSUNDEEP
windows-phone-8
Alexandr Sulimov
Alexandr Sulimov

Reputation: 1924

Windows Phone TextBlock aligment

In ListBox with ItemTemplate second TextBlock not align to right.

In design mode second TextBlock align to right

    <ListBox >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock 
                        Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
                        Text="{Binding Display}" FontSize="30" 
                        />
                    <TextBlock 
                        Grid.Column="1" HorizontalAlignment="Right" 
                        Text="{Binding Length}" FontSize="30"
                        />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

        <ListBoxItem>
            <Grid>
                <TextBlock 
                    Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
                    Text="2014-01-24 23:00:00" FontSize="30"
                    />
                <TextBlock 
                    Grid.Column="1" HorizontalAlignment="Right" 
                    Text="00:00" FontSize="30"
                    />
            </Grid>
        </ListBoxItem>
    </ListBox>

Result:

enter image description here

Item in designer:

enter image description here

Upvotes: 0

Views: 65

Answers (3)

Maverick Ann
Maverick Ann

Reputation: 11

This is how you can do it :

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <TextBlock 
         Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
         Text="{Binding Display}" FontSize="30" 
         />
    <TextBlock 
         Grid.Column="1" HorizontalAlignment="Right" 
         Text="{Binding Length}" FontSize="30"
         />
</Grid>

This will give 75% width to the first column and remaining 25% to the second column.

If you want the first and second columns to dynamically change width according to the content then you can give one width as "Auto" and the other no width property (or Width="*") which means it will take the remaining area as the column width.

Upvotes: 1

Romasz
Romasz

Reputation: 29792

You need to change HorizontalContentAligment to Strech - to fill the space with your item, by default it's set to the left:

<ListBox Name="myList">
  <ListBoxItem HorizontalContentAlignment="Stretch">
       <Grid>
          <TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
          <TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
        </Grid>
    </ListBoxItem>
</ListBox>

You can also set Property of ItemContainerStyle:

<ListBox>
  <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
  </ListBox.ItemContainerStyle>
  <ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
           <TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
           <TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
        </Grid>
    </DataTemplate>
 </ListBox.ItemTemplate>

 <ListBoxItem>
    <Grid>
      <TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
      <TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
    </Grid>
  </ListBoxItem>
</ListBox>

In case you have only two items, one aligned to left, one to right - I've removed Colums. Although they help to manage the content, align it and they also will be helpful if you need to wrap text and/or perform more operations on it.

Upvotes: 2

aloisdg
aloisdg

Reputation: 23521

I would take Alexandr Sulimov solution. I made some improvements. I think it is the best way to do it.

 <Grid>
      <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"></ColumnDefinition>
           <ColumnDefinition Width="Auto"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
      <TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
 </Grid>

Upvotes: 0

Related Questions