自适应 UI UWP

Question

我正在尝试学习自适应 UI。我经常使用 bootstrap，但我正在使用 xaml 设计一个 Windows 10 应用程序。我希望 textboxes 和 textbloxks 根据用户是否缩小 window 进行调整。这就是我所拥有的，但它不是 adapting 也不是响应式的。

<Grid Grid.Row="1">
        <TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,22,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
        <TextBox x:Name="txtBoxTitle" Margin="79,24,0,0" Grid.Row="1" Width="800" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left"/>
        <TextBlock HorizontalAlignment="Left" FontSize="24" Margin="10,131,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Body" VerticalAlignment="Top"/>
        <TextBox x:Name="txtBoxBody" Margin="79,133,-225,0" Grid.Row="1" Width="800" Height="500" TextWrapping="Wrap" AcceptsReturn="True" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button x:Name="btnSubmitArticle" Content="Submit" HorizontalAlignment="Left" VerticalAlignment="Bottom"  Margin="80,20,20,20" d:LayoutOverrides="Width"/>
    </Grid>

补充问题

如何将文本框中的文本一直拉到 window 的右侧，并在屏幕尺寸改变时正确响应。

<RelativePanel Margin="12,12">
           <TextBlock x:Name="txtBoxDate"
           RelativePanel.AlignLeftWithPanel="True"
           RelativePanel.AlignRightWithPanel="True"
           FontSize="14" 
           TextAlignment="Right"
           TextWrapping="Wrap" 
           Text="Title" />
</RelativePanel>

任何人都可以指出正确的方向，使这些元素根据屏幕尺寸具有响应性吗？

Answer 1

假设整行都在拉伸，问题是您正在设置这些元素的宽度（以及一些奇怪的边距，可能是因为您从工具箱中拖放了控件）。您可以使用 RelativePanel 很好地堆叠项目并使它们在面板内从左到右拉伸：

<RelativePanel Margin="12,0">
    <TextBlock x:Name="FirstTextBlock"
               RelativePanel.AlignLeftWithPanel="True"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="24" 
               TextWrapping="Wrap" 
               Text="Title" />
    <TextBox x:Name="txtBoxTitle" 
             RelativePanel.Below="FirstTextBlock"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             Margin="0,8,0,0" 
             TextWrapping="Wrap" />
    <TextBlock x:Name="SecondTextBlock" 
               RelativePanel.Below="txtBoxTitle"
               RelativePanel.AlignLeftWithPanel="True"
               RelativePanel.AlignRightWithPanel="True"
               FontSize="24" 
               Margin="0,8,0,0" 
               TextWrapping="Wrap" 
               Text="Body" />
    <TextBox x:Name="txtBoxBody" 
             RelativePanel.Below="SecondTextBlock"
             RelativePanel.AlignLeftWithPanel="True"
             RelativePanel.AlignRightWithPanel="True"
             Margin="0,8,0,0" 
             Height="500" 
             TextWrapping="Wrap" 
             AcceptsReturn="True" />
    <Button x:Name="btnSubmitArticle" 
            RelativePanel.Below="txtBoxBody"
            Content="Submit" 
            Margin="0,8,0,0" 
            d:LayoutOverrides="Width"/>
</RelativePanel>

自适应 UI UWP

Adaptive UI UWP

xaml

adaptive-ui

windows-10

uwp