Question

我正在使用图像和文本块构建UWP应用程序。我想遵循设计指南，有两列用于大型设备，一列用于手机。我现在没有使用Grid GridView，因为这两个布局对我的VisualStates不起作用（文本块没有显示，或者它的高度限制在与图像相同的高度，等等）。

这是我的XAML的样子：

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
    <StackPanel Orientation="Horizontal"  Background="Black" Margin="24" Name="IssuePanel">
        <Image Name="CoverImage" Width="300" VerticalAlignment="Top" />
        <TextBlock Name="Description" HorizontalAlignment="Left" Foreground="White" TextWrapping="WrapWholeWords" Text="{Binding Description}" />
    </StackPanel>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="320"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="IssuePanel.Margin" Value="12"/>
                    <Setter Target="IssuePanel.Orientation" Value="Vertical"/>
                    <Setter Target="CoverImage.Width" Value="200"/>
                    <Setter Target="Description.Width" Value="320"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Description.Width" Value="320"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Description.Width" Value="720"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</ScrollViewer>

如您所见，我在所有可视状态中设置描述文本块的宽度。虽然它正确地破坏了，但它看起来像狗屎。我希望文本始终到窗口/页面的末尾。做这种情况的更好方法是什么？

Answer 1

文本布局和包装问题的答案是RelativePanels。在视图层次结构中使用StackPanel不允许TextBlock在应该的时候进行换行。

RelativePanel允许您将项目放在其中相对于彼此。这被广泛用于为不同的外形提供响应式UI（正是您要做的事情）。我修改了下面的代码，使布局工作。

<Grid>
    <ScrollViewer VerticalScrollMode="Auto" HorizontalScrollMode="Disabled" VerticalScrollBarVisibility="Auto">
        <RelativePanel Background="Black" Margin="24" Name="IssuePanel">
            <Image RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True" 
                   Name="CoverImage" Width="300" Height="200" />
            <TextBlock RelativePanel.AlignTopWithPanel="True" RelativePanel.RightOf="CoverImage" 
                       Name="Description" HorizontalAlignment="Left" Foreground="White" TextWrapping="WrapWholeWords">
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
                       Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.Description with some really long text... blah blah blah.
            </TextBlock>
        </RelativePanel>
    </ScrollViewer>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="320"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="IssuePanel.Margin" Value="12"/>
                    <Setter Target="CoverImage.Width" Value="200"/>
                    <Setter Target="Description.(RelativePanel.AlignTopWithPanel)" Value="false"/>
                    <Setter Target="Description.(RelativePanel.Below)" Value="CoverImage"/>
                    <Setter Target="Description.(RelativePanel.AlignLeftWithPanel)" Value="true"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

最小宽度的视觉状态设置器移动关系，使描述重新排列在图像下方和面板左侧。在更广泛的州，您不需要做任何事情。删除StackPanel后，文本将按照您的预期进行换行。

Answer 2

您可以使用“ using：Microsoft.Toolkit.Uwp.UI.Controls”库中提供的wrapPanel控件。它将轻松根据窗口大小包装内容。当您设计响应式应用程序时，Relative Panel使其变得复杂。

UWP：TextBlock宽度匹配窗口宽度

2 个答案: