Question

我在尝试排列您看到的图像中的文本时非常困难。我的设计代码在下面，对于我的生活，我似乎无法弄清楚我做错了什么。有谁能指出我正确的方向？我对设计布局很糟糕，但编码很好，所以我很感激任何帮助。

current design look

<controls:PivotItem Header="Top 10 Picks">
            <Grid Name="gridStocks">
                <Grid.Resources>
                    <Style x:Key="LabelStyle" TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right"/>
                        <Setter Property="Margin" Value="15,5" />
                    </Style>
                    <Style x:Key="ValueStyle" TargetType="TextBlock">
                        <Setter Property="Margin" Value="15,5" />
                    </Style>
                    <Style x:Key="HeaderStyle" TargetType="TextBlock">
                        <Setter Property="Margin" Value="5" />
                        <Setter Property="Width" Value="100" />
                        <Setter Property="HorizontalAlignment" Value="Left" />
                    </Style>
                    <Style x:Key="SummaryStyle" TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Right" />
                        <Setter Property="Margin" Value="5" />
                        <Setter Property="TextAlignment" Value="Right" />
                        <Setter Property="Padding" Value="15,0,0,0" />
                    </Style>
                    <Style x:Key="NumberStyle" TargetType="TextBlock">
                        <Setter Property="FlowDirection" Value="LeftToRight" />
                        <Setter Property="Padding" Value="9.5" /> 
                    </Style>
                    <Style x:Key="ListBoxStyle" TargetType="ListBoxItem">
                        <Setter Property="Background" 
                        Value="{StaticResource PhoneSemitransparentBrush}" />
                        <Setter Property="Margin" Value="3,5" />
                        <Setter Property="FontSize" Value="20" />
                        <Setter Property="BorderBrush" 
                        Value="{StaticResource PhoneBorderBrush}" />
                        <!-- Replace the default item template with a basic template
               that does not highlight selected items. -->
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <ContentPresenter/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Grid.Resources>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <StackPanel Orientation="Horizontal">
                    <TextBlock Style="{StaticResource HeaderStyle}" Text=" " />
                    <TextBlock Style="{StaticResource HeaderStyle}" Text="Symbol" />
                    <TextBlock Style="{StaticResource HeaderStyle}" Text="Rating" />
                    <TextBlock Style="{StaticResource HeaderStyle}" Text="Est. Return" />
                </StackPanel>

                <StackPanel Orientation="Vertical" Margin="10,45" Height="758" Grid.Column="0">
                    <TextBlock Text="1." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="2." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="3." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="4." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="5." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="6." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="7." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="8." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="9." Style="{StaticResource NumberStyle}"></TextBlock>
                    <TextBlock Text="10." Style="{StaticResource NumberStyle}"></TextBlock>
                </StackPanel>

                <ScrollViewer Margin="-5,13,3,36" Height="558">
                    <ListBox ItemContainerStyle="{StaticResource ListBoxStyle}" Name="lstTop10Picks" Height="480" HorizontalAlignment="Right" Margin="5,25,0,0" 
                    VerticalAlignment="Top" Width="444" Grid.Column="1">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Style="{StaticResource SummaryStyle}" 
                                    Text="{Binding Symbol}" TextWrapping="Wrap" />
                                    <TextBlock Style="{StaticResource SummaryStyle}" 
                                    Text="{Binding ShortRating}" TextWrapping="Wrap" />
                                    <TextBlock Style="{StaticResource SummaryStyle}" 
                                    Text="{Binding LongRating}" TextWrapping="Wrap" />
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </ScrollViewer>
            </Grid>
        </controls:PivotItem>

Answer 1

我会设置你绑定的文本块的宽度，因此它们是一个统一的大小，不依赖于设置宽度的内容

Answer 2

我创造了这个 Like this

使用以下XAML：

<phone:PivotItem Header="Top 10 Picks">
    <Grid Name="gridStocks">
        <Grid.Resources>
            <Style x:Key="HeaderStyle" TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Left" />
            </Style>
            <Style x:Key="SummaryStyle" TargetType="TextBlock">
                <Setter Property="TextAlignment" Value="Left" />
                <Setter Property="TextWrapping" Value="Wrap" />
            </Style>
            <Style x:Key="NumberStyle" TargetType="TextBlock">
                <Setter Property="FlowDirection" Value="LeftToRight" />
                <Setter Property="Padding" Value="9.5,0" />
            </Style>
        </Grid.Resources>

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

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Style="{StaticResource HeaderStyle}" Grid.Column="1" Text="Symbol" />
        <TextBlock Style="{StaticResource HeaderStyle}" Grid.Column="2" Text="Rating" />
        <TextBlock Style="{StaticResource HeaderStyle}" Grid.Column="3" Text="Est. Return" />

        <ScrollViewer Grid.ColumnSpan="4" Grid.Row="1">
            <ItemsControl Name="lstTop10Picks">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="2*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Style="{StaticResource NumberStyle}" Grid.Column="0" Text="{Binding Id}" />
                            <TextBlock Style="{StaticResource SummaryStyle}" Grid.Column="1" Text="{Binding Symbol}" HorizontalAlignment="Left" />
                            <TextBlock Style="{StaticResource SummaryStyle}" Grid.Column="2" Text="{Binding ShortRating}" />
                            <TextBlock Style="{StaticResource SummaryStyle}" Grid.Column="3" Text="{Binding LongRating}" />
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</phone:PivotItem>

以下是我更改内容的快速摘要：

停止尝试填充字符串（TextBlocks）以使它们对齐。 只需将所有内容放入网格即可！
将数字（Ids）和数据放在同一数据集中。这比尝试排列堆栈面板和列表的内容要简单得多。
使用ItemsControl而不是ListBox，因为不需要ListBox特定功能。
请注意，网格中的第一列是其他列的一半宽度。
摆脱了ScrollViewer。不需要，因为一切都适合屏幕。你之前并不需要它，因为ListBox内部包含一个，所以内容在没有它的情况下滚动。
通过在网格中没有边距，我可以在ItemTemplate中使用相同的ColumnDefinitions，但仍然可以排列所有内容。

我测试了它作为数据源：

this.lstTop10Picks.ItemsSource = new ObservableCollection<Pick>
{
    new Pick { Id = 1, Symbol = "CHGS", ShortRating = "-81.433", LongRating = "-51.804" },
    new Pick { Id = 2, Symbol = "CWTR", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 3, Symbol = "CBSTZ", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 4, Symbol = "CBMXW", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 5, Symbol = "UNTK", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 6, Symbol = "TVIX", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 7, Symbol = "UVXY", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 8, Symbol = "NEWL", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 9, Symbol = "TBBK", ShortRating = "-12.345", LongRating = "-12.345" },
    new Pick { Id = 10, Symbol = "PGRX", ShortRating = "-58.856", LongRating = "-52.914" },
};

internal class Pick
{
    public int Id { get; set; }
    public string Symbol { get; set; }
    public string ShortRating { get; set; }
    public string LongRating { get; set; }
}

无法弄清楚如何移动此文本

2 个答案: