Question

我正在尝试了解自适应用户界面。我使用bootstrap很多，但我正在设计一个带有xaml的Windows 10应用程序。我希望textboxes和textbloxks根据用户是否收缩窗口进行调整。这就是我所拥有的，但它不是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>

其他问题

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

<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

1 个答案: