CODEWITHSUNDEEP
c#windows-phone-8.1
Karan
Karan

Reputation: 252

How to align the textblocks in listview of windows phone 8.1

! I need to align the textblocks(PhoneTxt, CreateddateTxt ) which is present in listview.

<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
        <ListBox Background="Transparent"  HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1"  Margin="6"  VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Width="350" >
                        <Border Margin="5" BorderBrush="White" BorderThickness="1">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
                                <TextBlock Grid.Row="0" Text=">" FontSize="28"  HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
                                <TextBlock Margin="5,0,0,0" Grid.Row="1" Name="PhoneTxt"  TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}"  />
                                <TextBlock Margin="0,0,35,0" Grid.Row="2" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>

        </ListBox>
    </Grid>

@Schuere There is an big gap between them..After appplying your code

I need to display .(i.e in output)Print them as together each other in a same row with some space..

@ fillobotto I need to display those textblocks together with one or two spaces in between them

Upvotes: 1

Views: 759

Answers (3)

Null Pointer
Null Pointer

Reputation: 9289

Try this

<ListBox Background="Transparent"  HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1"  Margin="6"  VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Width="350" >
                    <Border Margin="5" BorderBrush="White" BorderThickness="1">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                     <StackPanel Grid.Row="0"  Orientation="Horizontal">
                            <TextBlock Margin="5,0,0,0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
                            <TextBlock  Text=">" FontSize="28" Margin="5,0,0,0"  Foreground="White"/> 
                    </StackPanel>
                            <StackPanel Grid.Row="1" Orientation="Horizontal">
                                <TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}"  />
                                <TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
                            </StackPanel>

                        </Grid>
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

Orientation="Horizontal" was missing

Upvotes: 1

fillobotto
fillobotto

Reputation: 3775

I don't understand perfectly which TextBlock you want to align, but you shoud use a StackPanel control and set its Orientation property to Horizontal.

<ListBox Background="Transparent"  HorizontalAlignment="Left" Height="auto" BorderThickness="1" MaxHeight="580" Grid.Row="1"  Margin="6"  VerticalAlignment="Top" Width="352" Name="DaysLeftListView" SelectionChanged="DaysLeftListView_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Width="350" >
                    <Border Margin="5" BorderBrush="White" BorderThickness="1">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <TextBlock Margin="5,0,0,0" Grid.Row="0" x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
                            <TextBlock Grid.Row="0" Text=">" FontSize="28"  HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
                            <StackPanel Grid.Row="1">
                                <TextBlock Margin="5,0,0,0" Name="PhoneTxt" TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}"  />
                                <TextBlock Margin="5,0,0,0" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
                            </StackPanel>

                        </Grid>
                    </Border>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

    </ListBox>

See the reference: https://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.orientation%28v=vs.110%29.aspx

Upvotes: 0

Schuere
Schuere

Reputation: 1649

create some extra columndefinitions:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinitions Width="Auto"/>
        <ColumnDefinitions Width="Auto"/>
    </Grid.ColumnDefinitions>
    <TextBlock Margin="5,0,0,0" Grid.Row="0" Grid.Column="0" ColumnSpan x:Name="NameTxt" TextWrapping="Wrap" Text="{Binding Events}" FontSize="28" Foreground="White"/>
    <TextBlock Grid.Row="0" Grid.Column="1" Text=">" FontSize="28"  HorizontalAlignment="Right" VerticalAlignment="Center" Foreground="White"/>
    <TextBlock Margin="5,0,0,0" Grid.Row="1" Grid.Column="0" Name="PhoneTxt"  TextWrapping="Wrap" Foreground="White" FontSize="18" Text="{Binding diff}"  />
    <TextBlock Margin="0,0,35,0" Grid.Row="1" Grid.Column="1" Name="CreateddateTxt" Foreground="White" FontSize="18" TextWrapping="Wrap" Text="{Binding result}" />
</Grid>

This should change the outcome, the CreateddateTxt should be right next to PhoneTxt

Upvotes: 0

Related Questions