Question

我正在尝试创建一个滚动的面板列表，每个面板都有不同的外观。我使用了可变大小的包裹网格，但我的图像似乎没有在较小的面板上正确显示。网格视图中的项目绑定到未知长度的列表。

这是xaml代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <local:MyGridView  ItemsSource="{Binding}"  IsItemClickEnabled="True" ItemClick="Button_Click" >
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="190" ItemWidth="320" />

            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.ItemTemplate >
            <DataTemplate x:DataType="data:Article">
                <Grid Height="1080" Width="1440" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Image Source="{x:Bind image}"  Stretch="UniformToFill" />
                    <StackPanel VerticalAlignment="Top">
                        <StackPanel.Background>
                            <SolidColorBrush Color="White" Opacity=".75" />
                        </StackPanel.Background>
                        <TextBlock FontSize="30" Margin="5" TextWrapping="WrapWholeWords" >
                            <Run Text="{x:Bind Name}"/>
                        </TextBlock>
                        <TextBlock   Margin="5"  FontSize="15"  FontWeight="Thin" TextWrapping="Wrap" TextTrimming="WordEllipsis" LineStackingStrategy="BlockLineHeight" LineHeight="19" MaxHeight="38" >
                            "It is hard to miss the warnings. In the race to make computers more intelligent than us, humanity will summon a demon, bring forth the end of days, and code itself into oblivion. Instead of silicon assistants we'll build silicon assassins. The doomsday story of an evil AI has been told a thousand times. But our fate at the hand of clever cloggs robots may in fact be worse - to summon a class of eternally useless human beings."
                        </TextBlock> 
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </local:MyGridView>

</Grid>

理想情况下，我想要下面的xaml代码中显示的布局，但我还有两个问题： 1）我不知道如何将其转换为模板，以便我可以绑定到列表 2）最内部网格中的图像不按照我设置的* -size比例进行布局。

<Grid Background="White" >
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="40*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="36*"/>
            <ColumnDefinition Width="648*"/>
            <ColumnDefinition Width="36*"/>
        </Grid.ColumnDefinitions>
    </Grid>

    <ScrollViewer Grid.Row="1">
        <StackPanel>
            <Grid Name="grid1">
                <Image  Source="/Assets/obama.jpg" VerticalAlignment="Center" Stretch="UniformToFill" Margin="0 5 0 5"/>
                <Rectangle   Fill="Black" Opacity=".3" />
                <TextBlock  VerticalAlignment="Center"  Text="Obama Is President" TextWrapping="WrapWholeWords" FontSize="133.333" Foreground="White" HorizontalAlignment="Center"/>
            </Grid>
            <Grid Name="grid2" Margin="20 0 20 0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Button  Tag="blah" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5"  Template="{StaticResource Medium_Button}"/>
                    <Button  Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}"/>
                    <Button  Grid.Row="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Medium_Button}" />
                    <Button  Tag="g" Grid.Row="5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="0 5 5 5" Template="{StaticResource Text_Button}" />

                </Grid>
                <Grid Grid.Column="1" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height= "*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Button Content="test" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5"  Template="{StaticResource Text_Button}"/>
                    <Button Content="test" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5"  Template="{StaticResource Text_Button}"/>
                    <Button Content="test" Grid.Row="2" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5"  Template="{StaticResource Medium_Button}"/>
                    <Button Content="test" Grid.Row="4" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="5 5 0 5"  Template="{StaticResource Medium_Button}"/>
                </Grid>

            </Grid>

        </StackPanel>

    </ScrollViewer>

</Grid>

我知道我的代码可能非常混乱，因为我是xaml和Windows开发的新手，但我很欣赏任何解决方案。

更新：有人指出我指定的网格尺寸导致我的图像问题，删除网格高度和宽度导致它们正确显示。为了跟进，现在有一种方法可以让图像现在根据窗口大小（拉伸/挤压）改变大小，直到包裹效果发生之前达到极限？

如何在XAML中为具有不同大小的面板的UWP创建新闻源样式布局

0 个答案: