2016-03-19 13 views
0

なぜグリッドがすべての画面をカバーしていないのですか?どのように修正できますか?デザイナーは画面の幅をすべてカバーするように見えますが、実際にはリジッドに大きなスペースを残しています。グリッドがUWPアプリケーションのすべての画面をカバーしていない

<Grid Background="GreenYellow"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 

    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="200"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 


</Grid> 

このコードはちょうどスナップですが、チャイルドの場合でもスペースが異なります。

still a blank space to the left

は私が奇妙な回避策が見つかりました:私は左に大きな空きスペースと同じ結果を得るルイス・C.の答えにAcoording

:編集1

私が望むものを達成する:

<Grid Background="Yellow"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="200"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Grid Grid.Row="0"> 
     <TextBlock Text="This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
     <Button Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
    </Grid> 


    <Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
    <Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 

</Grid> 

結果は次のとおりです。まだ

Result with workaround

問題を回避するためにその非常に奇妙な方法。

完全なコード

ご覧のとおり、SplitViewContent内部フレームの上に(前述の問題とのような)のページをロードするGridView上のSplitViewを使用してイム。子どもとしてのTextBlockを持つ他のページは、私が望むように画面全体をカバーします。 SplitViewのためのコードは次のとおりです。

<Page 
x:Class="MyProject.ViewModels.SymbolsPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:MyProject.ViewModels" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:data="using:MyProject.Models" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Page.Resources> 
    <Style TargetType="ListView" x:Key="myListViewStyle"> 
     <Setter Property="AllowDrop" Value="False" /> 
     <Setter Property="CanReorderItems" Value="False" /> 
     <Setter Property="Width" Value="36"/> 
     <Setter Property="Height" Value="140"/> 
     <Setter Property="HorizontalAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="0,4,0,0"/> 
     <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" /> 

     <Setter Property="BorderBrush" Value="White" /> 
     <Setter Property="BorderThickness" Value="1" /> 
    </Style> 

    <Style TargetType="TextBlock" x:Key="SymbolViewer"> 
     <Setter Property="FontFamily" Value="/Fonts/etc"/> 
     <Setter Property="FontSize" Value="30" /> 
     <Setter Property="Padding" Value="8"/> 
     <Setter Property="TextAlignment" Value="Center"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
    </Style> 


    <LinearGradientBrush x:Key="GradBackground" EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="LightGray" Offset="0"/> 
     <GradientStop Color="White" Offset=".5"/> 
     <GradientStop Color="LightGray" Offset="1"/> 
    </LinearGradientBrush> 

    <LinearGradientBrush x:Key="ItemGradBackground" EndPoint="0.5,1" StartPoint="0.5,0"> 

     <GradientStop Color="White" Offset="0"/> 
     <GradientStop Color="White" Offset=".5"/> 
     <GradientStop Color="LightGray" Offset="1"/> 
    </LinearGradientBrush> 
</Page.Resources> 



<!-- Spinners --> 


<StackPanel Background="AliceBlue" HorizontalAlignment="Stretch" Padding="0"> 
    <StackPanel Background="{StaticResource GradBackground}" > 
     <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" > 

      <ListView Name="Uno" ItemsSource="{x:Bind UnoItems}" Style="{StaticResource myListViewStyle}" BorderBrush="White" 
          BorderThickness="2" IsItemClickEnabled="True" ItemClick="Uno_ItemClick"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}" FontFamily="/Fonts/etc"></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 

      <!-- Not user interactive--> 
      <TextBlock Text="0" Width="36" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" ></TextBlock> 

      <!-- Spinner 2 --> 
      <ListView Name="Dos" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}" 
          IsItemClickEnabled="True" ItemClick="Dos_ItemClick"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}" ></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 

      <ListView Name="Tres" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}" ></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 
      <ListView Name="Cuatro" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}" ></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 

      <ListView Name="Cinco" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}" ></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 

      <ListView Name="Seiss" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}"> 

       <ListView.ItemTemplate > 
        <DataTemplate x:DataType="data:Thingy"> 
         <TextBlock Text="{x:Bind Symbol}"></TextBlock> 
        </DataTemplate> 

       </ListView.ItemTemplate> 

      </ListView> 
     </StackPanel> 
    </StackPanel> 


</StackPanel> 

<Page 
x:Class="MyProject.ViewModels.HomePage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:MyProject.ViewModels" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <RelativePanel> 
     <Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" Click="HamburgerButton_Click" Background="LightGray"/> 
     <!--<Button Name="BackButton" FontFamily="Segoe MDL2 Assets" Content="&#xE72B;" FontSize="36" Visibility="Visible" Background="LightGray"/>--> 
     <CommandBar Name="Bar" RelativePanel.AlignRightWithPanel="True" ClosedDisplayMode="Compact" RelativePanel.RightOf="HamburgerButton" Visibility="Visible" Background="LightGray" IsOpen="False" IsSticky="True" > 
      <CommandBar.Content> 
       <TextBlock Name="BarTitle" Text="Title" FontSize="24" Margin="24,8,0,12" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

      </CommandBar.Content> 
     </CommandBar> 
    </RelativePanel> 
    <SplitView Name="MySplitView" 
       Grid.Row="1" 
       DisplayMode="Overlay" 
       OpenPaneLength="200" 
       CompactPaneLength="56" 
       HorizontalAlignment="Left"> 
     <SplitView.Pane> 
      <ListBox SelectionMode="Single" 
        Name="IconsListBox" 
        SelectionChanged="IconsListBox_SelectionChanged"> 
       <ListBoxItem Name="SymbolsListBoxItem"> 
        <StackPanel Orientation="Horizontal"> 
         <Image Source="x" Width="36" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center"> </Image> 
         <TextBlock x:Uid="Symbols" Text="[Symbols]" FontSize="24" Margin="20,0,0,0" /> 
        </StackPanel> 
       </ListBoxItem>     
      </ListBox> 
     </SplitView.Pane> 
     <SplitView.Content > 
      <Frame Name="FrameHolder"></Frame> 
     </SplitView.Content> 
    </SplitView> 
    <Frame Name="HomePageFrame" > 
     <!-- Frame not used by now--> 
    </Frame> 

</Grid> 

完全なコードページスニペットは、右に同じ、大きな空白の空きスペース(もっと子供たちと一緒に)あり、その結果

+0

が、それは別の容器の内側にありますか? – CodingGorilla

+0

はい、そのページ内にあります。コンテナがその親であるかどうかわからない – Xaren

+0

グリッドのマージンを0に設定してみてください。 –

答えて

0

"RowDefinition"を高さなしに削除し、 "Auto"行を "*"に変更するだけで済みます。このような

何か:

<Grid Background="GreenYellow"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="200"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <Button Grid.Row="0" Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
    <Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 
    <Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> 

</Grid> 
+0

ありがとうございました。私の編集を確認してください。あなたの答えで同じ結果が得られます。 – Xaren