0

アダプティブ UI について学習しようとしています。私はブートストラップをよく使用しますが、Windows 10 アプリを設計中ですxaml。ユーザーがウィンドウを縮小するかどうかに基づいて、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>

画面サイズに応じてこれらの要素をレスポンシブにする正しい方向に誰かが私を向けることができますか?

4

1 に答える 1

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>
于 2015-11-21T02:03:39.840 に答える