适合当前应用中的当前元素宽度屏幕

Question

我正在尝试为Windows 10开发应用程序。但是，通过全新的屏幕显示，我似乎无法弄清楚如何使元素适合设备屏幕的当前大小。< / p>

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

更新：搜索框我试图适应下面窗口的大小。网格填充整个窗口，如果我在其上放置背景颜色，也会填充RelativePanel。但SearchBox拒绝延伸...我不希望搜索框的大小缩放，只是它的宽度适合窗口/设备宽度。

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

当您使用RelativePanel时，您可能需要设置AlignLeftWithPanel和AlignRightWithPanel = true以使整个水平空间可用于TextBlock（同样AlignTopWithPanel }，AlignBottomWithPanel=true表示垂直）。大多数UIElements都有HorizontalAlignment / VerticalAlignment = Stretch作为默认设置，但您可能还需要明确设置，以确保TextBlock的实际视觉效果在屏幕上延伸。

调整窗口大小时，元素将使用上述设置自动调整大小。您无需在此处使用ViewBox即可实现此目的。

Answer 2

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

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

要检查的另一件事是TextBlock所在的容器填充窗口。如果你不覆盖它，默认情况下大多数都是。