在通用应用程序中适合当前屏幕尺寸的元素宽度

Question

我正在尝试为 Windows 10 开发一个应用程序。但是对于全新的屏幕尺寸，我似乎无法弄清楚如何让元素适应设备屏幕的当前尺寸.

例如，如果您调整它的大小，我希望 TextBlock 适合 window 的宽度。我已经尝试过 ViewBox、VariableSIzedWrapGrid 等，但似乎没有什么可以解决我的问题。有谁知道？

更新： 这是我试图适应下面 window 大小的搜索框。网格填满整个 window，如果我在其上放置背景颜色，RelativePanel 也会填满。但是 SearchBox 拒绝拉伸......我不希望搜索框按比例缩放，只是它的宽度适合 window/device 宽度。

        <!-- SEARCH GRID -->
    <Grid Canvas.ZIndex="5" x:Name="GridSearchPackage" HorizontalAlignment="Stretch" Visibility="Visible" Opacity="0.85" Background="White">
        <RelativePanel HorizontalAlignment="Stretch" Margin="5,5,0,0" >
            <Button x:Name="ButtonBackSearchGrid" Height="36" Width="36" FontSize="10" Margin="0,7,5,0"
                  Style="{StaticResource BackButtonStyle}"
                  Click="ButtonBackSearchGrid_Click"
                  AutomationProperties.Name="Back"
                  AutomationProperties.AutomationId="BackButton"
                  AutomationProperties.ItemType="Navigation Button" BorderBrush="Black" BorderThickness="3">
                <FontIcon x:Name="backButtonIcon" FontWeight="Bold" FontSize="20" Foreground="{StaticResource AppDarkBlueColor}" Glyph="&#xE72B;" />
            </Button>
            <TextBlock x:Name="TextBlockPopupSearchTitle" RelativePanel.RightOf="ButtonBackSearchGrid" Foreground="{StaticResource AppDefaultBlueColor}" Text="Search XZY" FontSize="34"/>
            <SearchBox FontSize="20" RelativePanel.Below="TextBlockPopupSearchTitle" HorizontalAlignment="Stretch" PlaceholderText="search" Margin="0,10,0,0" QuerySubmitted="SearchBox_QuerySubmitted" QueryText="{Binding SearchText, Mode=TwoWay}"/>
        </RelativePanel>
    </Grid>

Answer 1

要让 FrameworkElement 拉伸以填充其容器，请将其 HorizontalAlignment 设置为拉伸。尽管使用 TextBlock 很难看到这一点，因为它没有背景并且 TextBlock 中的文本不会拉伸。如果要拉伸文本，可以在周围的 ViewBox 上添加 HorizontalAlignment。

<ViewBox HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Uniform">
    <TextBlock Text="Lorem ipsum dolor sit Amet" />
</ViewBox>

要检查的另一件事是您的 TextBlock 所在的容器是否填充了 window。如果您不覆盖它，大多数情况下会默认。

Answer 2

当您使用 RelativePanel 时，您可能需要设置 AlignLeftWithPanel 和 AlignRightWithPanel = true 以使整个水平 space 可用于 TextBlock（类似地，AlignTopWithPanel、AlignBottomWithPanel=true 表示垂直）。大多数 UIElements 都将 HorizontalAlignment/VerticalAlignment = Stretch 作为默认值，但您可能还想明确设置它以确保 TextBlock 的实际视觉效果在屏幕上伸展。

当 window 调整大小时，元素将使用上述设置自动调整大小。您不需要在此处使用 ViewBox 来实现此目的。

在通用应用程序中适合当前屏幕尺寸的元素宽度

Fit element width of current screensize in an universal app

xaml

windows-phone

winrt-xaml

win-universal-app

windows-10