UWP Grid不填充父容器

时间:2016-04-24 16:51:02

标签: c# windows-runtime win-universal-app

我遇到了一个大问题,我无法弄清楚如何解决它。我有一个xaml布局:

<Hub x:Name="MainHub" DataContext="{x:Bind Model}" Margin="108,30,0,0">
            <Hub.Resources>
                <DataTemplate x:Key="HeaderTemplate">
                    <TextBlock Text="{Binding}" FontSize="26" FontWeight="Light" Foreground="#4B5054"/>
                </DataTemplate>
            </Hub.Resources>
            <HubSection Header="News">
                <HubSection.HeaderTemplate>
                    <StaticResource ResourceKey="HeaderTemplate"/>
                </HubSection.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="0,4,0,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="10" />
                            <RowDefinition Height="30"/>
                        </Grid.RowDefinitions>
                        <controls:VariableGridView x:Name="NewsGrid" Grid.Row="0" ItemsSource="{Binding News}">
                            <GridView.Resources>
                                <DataTemplate x:Key="NewsItemTemplate">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="188*" />
                                            <RowDefinition Height="50*" />
                                            <RowDefinition Height="57*" />
                                        </Grid.RowDefinitions>
                                        <Grid Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                            <controls:WebImage ImageUri="{Binding Image, Mode=OneWay}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                                        </Grid>
                                        <Grid Background="#802A2B2D" Grid.Row="1">
                                            <TextBlock Text="{Binding Title, Mode=OneWay}" Foreground="#D7D7D7" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                                        </Grid>
                                        <Grid Background="White" Grid.Row="2">
                                            <TextBlock Text="{Binding Text, Mode=OneWay}" Foreground="#2A2B2D" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                                        </Grid>
                                    </Grid>
                                </DataTemplate>
                            </GridView.Resources>
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid x:Name="TestGrid" Orientation="Vertical" MaximumRowsOrColumns="2" 
                                                       ItemWidth="{Binding Width, ElementName=DummyNews, Mode=OneWay}" ItemHeight="{Binding Height, ElementName=DummyNews, Mode=OneWay}"/>
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                                <StaticResource ResourceKey="NewsItemTemplate"/>
                            </GridView.ItemTemplate>
                            <GridView.ItemContainerStyle>
                                <Style TargetType="FrameworkElement">
                                    <Setter Property="Margin" Value="0 0 15 15"/>
                                </Style>
                            </GridView.ItemContainerStyle>
                        </controls:VariableGridView>
                        <TextBlock VerticalAlignment="Bottom" Grid.Row="2" HorizontalAlignment="Right" Text="More >" FontSize="26" FontWeight="Light" Margin="0,0,15,0" Foreground="#4B5054" />
                    </Grid>
                </DataTemplate>                
            </HubSection>
            <HubSection Header="Featured Products">
                <HubSection.HeaderTemplate>
                    <StaticResource ResourceKey="HeaderTemplate"/>
                </HubSection.HeaderTemplate>
                <DataTemplate>
                    <Grid/>
                </DataTemplate>
            </HubSection>
        </Hub>

我将VariableSizedWrapGrid的宽度和高度绑定到代码隐藏模型(当我调整窗口大小时项目大小会发生变化):

ItemHeightVM.Value = (e.NewSize.Height - 200) / 2;
ItemWidthVM.Value = ItemHeightVM.Value / NEWS_WH_ASPECT;

此部分工作,但在VariableGridView的数据模板中指定的网格不填充整个项目:

Widht and height not specified, grid do not fill parent container

但是当我将网格的宽度和高度绑定到我的代码隐藏虚拟机,或者只是指定宽度和高度值时,我有正确的项目大小和正确的布局,但只有当项目的rowspan和colspan为1时才会显示:

<DataTemplate x:Key="NewsItemTemplate">
  <Grid Width="{Binding Width, ElementName=DummyNews, Mode=OneWay}" Height="{Binding Height, ElementName=DummyNews, Mode=OneWay}">
    <Grid.RowDefinitions>
      <RowDefinition Height="188*" />
      <RowDefinition Height="50*" />
      <RowDefinition Height="57*" />
    </Grid.RowDefinitions>

当colspan或rowspan为2或更多时,边距又回来了:(

Bound to view model, colspan set to 2

请告诉我,如果将colspan(或rowspan)设置为2或更多,我如何删除这些边距并拉伸网格以填充整个项目容器?希望你能帮到我,我试着解决这个问题几个小时就放弃了

0 个答案:

没有答案