如何在Windows Phone 8.1的ListView中對齊文本塊

Question

！ 我需要對齊列表視圖中存在的textblocks（PhoneTxt，CreateddateTxt）。

<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它們之間有很大的差距。

我需要顯示。（即在輸出中）將它們彼此一起打印在同一行中並留有一定的空間。

@ fillobotto我需要顯示這些文本塊以及它們之間的一兩個空格

Answer 1

嘗試這個

<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"

Answer 2

創建一些額外的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>

這應該更改結果，CreateddateTxt應該在PhoneTxt旁邊

Answer 3

我不太清楚您想對齊哪個TextBlock ，但是您應該使用StackPanel控件並將其Orientation屬性設置為Horizo​​ntal。

<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>

請參閱參考： https : //msdn.microsoft.com/zh-cn/library/system.windows.controls.stackpanel.orientation%28v=vs.110%29.aspx