Xaml文本框在列表框中的对齐方式

Question

我正在开发Windows Phone应用程序，我想在列表框中显示六个文本块，但问题是所有6个值都相互固定。 我想在两者之间留一些空间，以使它们在显示时看起来更好。 例如，他们当前的样子是

Date|time|floor|zone|latitude|longtitude ，我希望它们看起来像

Date | Time | floor | zone | latitude | longtitude

我希望我能够在下面清楚地解释它是我的XAML代码

<phone:PhoneApplicationPage
x:Class="SmartParking.History"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"   
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem IsEnabled="True" Text="Delete all" Click="DeleteAll_Click"/>
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarIconButton IconUri="/Assets7/AppBar/delete.png" IsEnabled="True" Text="Delete" Click="Delete_Click" />
        <shell:ApplicationBarIconButton IconUri="/Assets8/AppBar/feature.search.png" IsEnabled="True" Text="Search"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="Smart Parking" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="History" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="ListData" SelectionChanged="ListData_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock x:Name=  "DateTxt"  Text="{Binding Date}"   TextWrapping="Wrap" />
                        <TextBlock x:Name=  "TimeTxt"  Text="{Binding Time}"  TextWrapping="Wrap" />
                        <TextBlock x:Name=  "ZoneTxt"  Text="{Binding Zone}"  TextWrapping="Wrap"/>
                        <TextBlock x:Name=  "FloorTxt" Text="{Binding Floor}" TextWrapping="Wrap"/>
                        <TextBlock x:Name=  "LatTxt"   Text="{Binding latitude}" TextWrapping="Wrap"  />
                        <TextBlock x:Name=  "LongTxt"  Text="{Binding longtitude}" TextWrapping="Wrap" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

Answer 1

您可以按如下方式在文本框中添加边距：

                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name=  "DateTxt"  Text="{Binding Date}"   TextWrapping="Wrap" Margin="10,0,10,0" />
                    <TextBlock x:Name=  "TimeTxt"  Text="{Binding Time}"  TextWrapping="Wrap" Margin="10,0,10,0"/>
                    <TextBlock x:Name=  "ZoneTxt"  Text="{Binding Zone}"  TextWrapping="Wrap" Margin="10,0,10,0"/>
                    <TextBlock x:Name=  "FloorTxt" Text="{Binding Floor}" TextWrapping="Wrap" Margin="10,0,10,0"/>
                    <TextBlock x:Name=  "LatTxt"   Text="{Binding latitude}" TextWrapping="Wrap" Margin="10,0,10,0" />
                    <TextBlock x:Name=  "LongTxt"  Text="{Binding longtitude}" TextWrapping="Wrap" Margin="10,0,10,0"/>
                </StackPanel>

在这里，可以通过以下方式定义边距：

Margin="<Left>, <Top>, <Right>, <Bottom>"

例如。 -Margin =“ 5,10,15,20”

Margin="<Horizontal>, <Vertical>" -这里的水平表示左右边距，而垂直表示顶部和底部边距，例如 -Margin =“ 5,10”

Margin="<All Sides>" -相同的边距将应用于所有面，例如 -保证金=“ 10”