UWP grille à remplir la fenêtre parent

Nous travaillons sur un projet d'école et a couru dans une impasse. Nous sommes en train de faire la grid remplir la totalité de la fenêtre parent, mais nous sommes tout simplement pas en mesure de le faire.

C'est ce que le concepteur de la montre et de la façon dont nous voulons qu'il regarde:

Et c'est à quoi il ressemble quand nous l'exécuter:

Voici notre code 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>

Comment aller à ce sujet?

Nous avons essayé ce qui nous semble tout avec des étirements. La marge n'est pas vraiment une option que nous voulons être en mesure de re-taille.

Il semble que (pour nous) que la grille est à côté de la relative panneau et se rétrécit à la taille. Nous sommes assez sûr que si nous obtenons la grille pour s'adapter à la taille de l'écran de la fenêtre de la relative panneau sera placé dans le milieu. Merci pour votre aide à l'avance!

---

Edit:

Nous détenons les "vues" à l'intérieur d'un cadre qui pourrait être la cause du problème. Quand j'ai re-taille de l'image l'image re-de la taille et de l'écran à double affichage splitview se déplace vers le "milieu", mais la mise à l'échelle ne fonctionne pas sur l'écran à double affichage splitview, ni l'image.

Voici le code pour l'écran à double affichage 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>

Nous avons essayé avec le cadre à l'intérieur d'un splitview.content mais il n'y a pas de différence entre les deux.

OriginalL'auteur Evilunclebill | 2015-11-30