UWP-Gitter zum Füllen des Elternfensters

Question

Wir arbeiten an einem Schulprojekt und sind in eine Sackgasse geraten. Wir versuchen, das grid füllen das gesamte übergeordnete Fenster, aber wir sind einfach nicht dazu in der Lage.

Dies ist, was die Designer-Shows und, wie wir wollen, dass es aussehen:

Und das ist, wie es aussieht, wenn wir es laufen:

Hier unsere XAML-Code ist:

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

Wie gehen wir darüber?
Wir haben versucht, was uns scheint alles mit Stretching. Marge ist nicht wirklich eine Option, da wir wollen, dass sie in der Lage ist, die Größe zu ändern.

Es scheint (für uns), dass das Gitter die relative Platte passt und auf diese Größe schrumpft. Wir sind uns ziemlich sicher, dass das relative Panel in der Mitte platziert wird, wenn wir das Raster an die Bildschirmgröße des Fensters anpassen. Danke im Vorraus für deine Hilfe!

---

Edit:

Wir halten die "Ansichten" in einem Rahmen, der das Problem verursachen könnten. Wenn ich den Rahmen neu skaliere, wird das Bild neu skaliert und der Splitview bewegt sich zur "Mitte", aber die Skalierung funktioniert weder auf der Splitview noch auf dem Bild. Hier

ist der Code für das 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> 

wir versucht haben, mit dem Rahmen in einem splitview.content zu sein, aber es gibt keinen Unterschied zwischen den beiden.

Answer 1

Sie versuchen zu hart :) Manchmal kann XAML einfach sein.

Container-Steuerelemente wie Grid und RelativePanel skalieren automatisch auf die volle verfügbare Größe ihrer Eltern, während andere wie StackPanel nur auf die minimale Größe wachsen, die für ihre untergeordneten Elemente benötigt wird. Nur der letzte Typ benötigt HorizontalAlignment="Stretch" und VerticalAlignment="Stretch", um den Bildschirm zu füllen. Binde die Eigenschaften Breite/Höhe niemals ein.

Dies sollte ausreichen, um Vollbild zu sehen (wenn Ihr Gitter direkt unter einer Seite und nicht in einem StackPanel oder eine ähnliche Steuerung):

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

    <!--Search section--> 

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

---

bearbeiten Antwort des hinzugefügt Code SPLITVIEW- in der Frage:

ich bemerkte beide SplitView und FrameHorizontAlignment="Left" haben. Das heißt: "Verwenden Sie statt Vollbild nur die Größe, die Sie nur minimal benötigen und richten Sie sie nach links aus". Entfernen Sie diese Zuweisungen und die Breite Ihrer Frame. Vermeiden Sie die Verwendung von Ausrichtungen (links/rechts/Mitte) oder Größen (Breite/Höhe), wenn Sie das übergeordnete Steuerelement ausfüllen möchten.

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

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