親ウィンドウを埋めるためのUWPグリッド

Question

私たちは学校のプロジェクトに取り組んでおり、行き詰まっています。私たちはgridを親ウィンドウ全体に塗り潰そうとしていますが、これを行うことはできません。

これは、どのようなデザイナーのショーとどのように我々はそれが見たいです。

：私たちのXAMLコードである

ここ：

をそしてこれが、我々はそれを実行したときに、それがどのように見えるかです

<Grid x:Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ActualWidth, RelativeSource = {RelativeSource Mode=TemplatedParent}}" Height="{Binding ActualHeight, RelativeSource ={RelativeSource Mode=TemplatedParent}}"> 
    <Grid.Background> 
     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" /> 
    </Grid.Background> 

    <!--Search section--> 

    <RelativePanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{Binding ElementName=Grid,Path=ActualWidth}"> 
     <TextBlock Text="Find available apartment" FontSize="24" Margin="30" RelativePanel.AlignHorizontalCenterWithPanel="True" /> 
     <AutoSuggestBox Name="AutoSuggestBox" 
         PlaceholderText="Search" 
         Width="300" 
         RelativePanel.AlignHorizontalCenterWithPanel="True" 
         Margin="0,100,0,0" 
         TextChanged="AutoSuggestBox_OnTextChanged" 
         Header="Destination:"/> 
     <CalendarDatePicker Name="CheckInPicker" Header="Check in:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,40,0,0" PlaceholderText="select a date" IsTodayHighlighted="False"/> 
     <CalendarDatePicker Name="CheckOutPicker" Header="Check out:" RelativePanel.Below="AutoSuggestBox" RelativePanel.AlignRightWith="AutoSuggestBox" Margin="0,40,0,0"/> 
     <ComboBox x:Name="numberOfGuestsBox" Width="127" RelativePanel.Below="CheckInPicker" RelativePanel.AlignLeftWith="AutoSuggestBox" Margin="0,30,0,0" PlaceholderText="Choose" Header="Guests:" FontSize="15"> 
      <x:String>1</x:String> 
      <x:String>2</x:String> 
      <x:String>3</x:String> 
      <x:String>4</x:String> 
      <x:String>5</x:String> 
      <x:String>6</x:String> 
      <x:String>7</x:String> 
      <x:String>8</x:String> 
      <x:String>9</x:String> 
      <x:String>10</x:String> 
     </ComboBox> 
     <ToggleSwitch Header="Smoking allowed?" Margin="0,30,0,0" RelativePanel.Below="CheckOutPicker" RelativePanel.AlignLeftWith="CheckOutPicker" OffContent="Eew - No!" OnContent="Ya man!"/> 
     <Button x:Name="SearchButton" Content="Search available apartments" RelativePanel.Below="numberOfGuestsBox" RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="0,30,0,30" Width="300" Height="50" Background="MediumSeaGreen" Foreground="AliceBlue" Click="SearchButton_Click"/> 
    </RelativePanel> 
</Grid> 

これについてはどうすればよいですか？
私たちは私たちに何をしようとしているすべてのストレッチと思われる。マージンは、サイズを変更できるようにするためのオプションではありません。

グリッドが相対的なパネルにフィットしており、そのサイズに収縮しているようです。私たちは、グリッドをウィンドウの画面サイズに合わせると、相対パネルが中央に配置されることはある程度確信しています。事前にあなたの助けをありがとう！

---

編集：

私たちが問題を引き起こしている可能性があり、フレーム内の "ビュー" を開催。フレームのサイズを変更すると、画像のサイズが変更され、分割ビューが「中間」に移動しますが、分割ビューや画像ではスケーリングは機能しません。ここで

はsplitviewのコードです：

<!--Split View--> 
    <SplitView Name="MySplitView" 
       Grid.Row="1" 
       DisplayMode="CompactOverlay" 
       OpenPaneLength="200" 
       CompactPaneLength="48" 
       HorizontalAlignment="Left"> 

     <!--SplitView Pane for icons--> 
     <SplitView.Pane> 
      <ListBox Name="IconsLIstBox" SelectionMode="Single" SelectionChanged="IconsLIstBox_OnSelectionChanged"> 
       <ListBoxItem Name="HomeListItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE10F;"/> 
         <TextBlock Text="Home" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="LocationsListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE1D1;"/> 
         <TextBlock Text="Locations" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="MostPopularListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE24A;"/> 
         <TextBlock Text="Most Popular" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="MapListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE128;"/> 
         <TextBlock Text="Map" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="ProfileListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE170;"/> 
         <TextBlock Text="Profile" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
       <ListBoxItem Name="ContactListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text="&#xE166;"/> 
         <TextBlock Text="Contact" Margin="20,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
      </ListBox> 
     </SplitView.Pane> 

     <!--SplitView Content--> 
     <Frame x:Name="MyFrame" HorizontalAlignment="Left" Width="1043"/> 
    </SplitView> 

</Grid> 

我々は、フレームがsplitview.contentの内側にあることを試してみたが、2つの間に違いはありません。

Answer 1

あなたはハードにしようとしています:)時にはXAMLは簡単です。 StackPanelのような他の人が彼らの唯一の子要素に必要な最小限の大きさに成長しながら、GridとRelativePanelなどの

コンテナコントロールは自動的に、その親のフル利用できるサイズに拡大します。後者のタイプのみが画面いっぱいにHorizontalAlignment="Stretch"とVerticalAlignment="Stretch"を必要とします。 Width/Heightプロパティを決してバインドしないでください。

これは、（あなたのグリッドがStackPanelまたは同様の制御で直接ページの下にあるとされていない場合）、フルスクリーンに行くために十分でなければなりません：

<Grid x:Name="Grid"> 
    <Grid.Background> 
     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/france_countryside.jpg" Opacity="0.4" /> 
    </Grid.Background> 

    <!--Search section--> 

    <RelativePanel> 
     ... 
    </RelativePanel> 
</Grid> 

---

編集の追加コードへの返信で質問のsplitview：

SplitViewとFrameはどちらもHorizontAlignment="Left"です。それは言っている： "私のフルスクリーンを使用するのではなく、必要最小限のサイズを使い、左に揃えるだけです"。それらの割り当てとあなたのFrameの幅を削除します。親コントロールを塗りつぶしたいときは、アラインメント（左/右/中央）またはサイズ（幅/高さ）を使用しないようにします。

<!--Split View--> 
<SplitView Name="MySplitView" 
      Grid.Row="1" 
      DisplayMode="CompactOverlay" 
      OpenPaneLength="200" 
      CompactPaneLength="48"> 
.... 

    <!--SplitView Content--> 
    <Frame x:Name="MyFrame" /> 
</SplitView>