0

我一直在尝试不同的方法来实现自适应网格并用我自己的图像填充它，但无论如何我只是得到一个空白屏幕。

我已经尝试了以下操作，我没有收到任何错误，但是当我在本地运行它时，除了命令栏之外什么都没有显示：

主页.xaml：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MobileAppProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="using:ViewModels"
    xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    x:Class="MobileAppProject.MainPage"
    mc:Ignorable="d">


    <Page.Resources>
        <DataTemplate x:Key="AdaptTemplate" x:DataType="local:AdaptItem">
            <Grid
                Background="White"
                BorderBrush="Black"
                BorderThickness="1">
                <Image
                    Source="{Binding Image}"
                    Stretch="UniformToFill"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer VerticalScrollMode="Auto" VerticalScrollBarVisibility="Auto">
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="12,10,12,12">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>



                <StackPanel Margin="0,0,0,10"/>

                <Grid Grid.Row="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Controls:AdaptiveGridView Name="AdaptiveGridViewControl"
                                   OneRowModeEnabled="False"
                                   ItemHeight="200"
                                   DesiredWidth="300"
                                   SelectionMode="Single"
                                   IsItemClickEnabled="True"
                                   ItemTemplate="{StaticResource AdaptTemplate}"/>
                    <StackPanel VerticalAlignment="Bottom" Margin="0,24,0,0" Grid.Row="1" Background="{ThemeResource SystemControlBackgroundAccentBrush}">

                        <CommandBar x:Name="cmdbar" 
                                    IsOpen="{Binding IsChecked, ElementName=isopentoggle, Mode=TwoWay}"
                                    IsSticky="{Binding IsChecked, ElementName=isstickytoggle, Mode=TwoWay}"
                                    ClosedDisplayMode="{Binding SelectedItem.Content, ElementName=combobox}">
                            <CommandBar.SecondaryCommands>
                                <AppBarButton Label="Menu Item 1"/>
                                <AppBarButton Label="Menu Item 2"/>
                                <AppBarButton Label="Menu Item 3"/>
                                <AppBarButton Label="Menu Item 4"/>
                            </CommandBar.SecondaryCommands>
                            <AppBarButton Icon="Accept" Label="Accept"/>
                            <AppBarToggleButton Icon="Contact" Label="Contact"/>
                        </CommandBar>
                        <Image HorizontalAlignment="Left" Source="Assets/storeLogo-sdk.png" Stretch="None"/>
                    </StackPanel>
                </Grid>

                <!-- Status Block for providing messages to the user.  Use the
             NotifyUser() method to populate the message -->
                <TextBlock x:Name="StatusBlock" Grid.Row="2" Margin="12, 10, 12, 10" Visibility="Collapsed"/>
            </Grid>
        </ScrollViewer>

    </Grid>
</Page>

主页.xaml.cs：

private ObservableCollection<AdaptItem> picItems_;

        private ObservableCollection<AdaptItem> PicItems
        {
            get
            {
                return picItems_;
            }
            set
            {
                picItems_ = value;
            }

        }
        public MainPage()
        {
            this.InitializeComponent();
            picItems_ = AdaptItem.AdaptList();
            this.DataContext = PicItems;
        }

用于填充 AdaptGrid 的 AdaptTemplate.cs：

 public class AdaptItem
    {
        public String Image
        {
            get;
            set;
        }
    }

    public static ObservableCollection<AdaptItem> AdaptList()
    {
        ObservableCollection<AdaptItem> pics = new ObservableCollection<AdaptItem>()
        {
            new AdaptItem
            {
                Image = "Assets/01.jpg"
            },
            new AdaptItem
            {
                Image = "Assets/02.jpg"
            },
            new AdaptItem
            {
                Image = "Assets/03.jpg"
            },
            new AdaptItem
            {
                Image = "Assets/04.jpg"
            },
            new AdaptItem
            {
                Image = "Assets/05.jpg"
            }
        };

        return pics;
    }
4

1 回答 1

0

您的方法的问题是您正在设置整个视图的数据上下文，而不是设置ItemSource.AdaptivePanel

只需替换以下代码：

this.DataContext = PicItems;

和：

AdaptiveGridViewControl.ItemsSource = PicItems;

为了使上述工作正常，请确保您命名您的控件而不是 as Name="AdaptiveGridViewControl"tox:Name="AdaptiveGridViewControl"

这x:有助于将代码中的控件用于不属于UWP默认控件的控件。

话虽如此，我强烈建议您使用x:bind而不是Binding. 我可以看到您已在数据模板中尝试过。您无法这样做，因为您需要x:Bind一个图像控件BitmapImage而不是字符串。您可以通过指定 AdaptItem 来做到这一点，如下所示：

public class AdaptItem
{
    public Windows.UI.Xaml.Media.Imaging.BitmapImage Image { get; set; }

    public static ObservableCollection<AdaptItem> AdaptList()
    {
        ObservableCollection<AdaptItem> pics = new ObservableCollection<AdaptItem>()
        {
            new AdaptItem
            {
                Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/01.jpg"))
            },
            new AdaptItem
            {
                Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/02.png"))
            },
            new AdaptItem
            {
                Image = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///Assets/03.png"))
            },
        };

        return pics;
    }
}

你DataTemplate的如下：

<Page.Resources>
    <DataTemplate x:Key="AdaptTemplate" x:DataType="local:AdaptItem">
        <Grid
            Background="White"
            BorderBrush="Black"
            BorderThickness="1">
            <Image
                Source="{x:Bind Image}"
                Stretch="UniformToFill"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>
</Page.Resources>

话虽这么说，我也建议使用DataBinding来设置你的ItemSource.

于 2017-10-16T10:17:31.713 回答