XAML 使用WinUI3和C#,如何获取图像路径的可观察列表并将其显示为填充宽度的水平列表?

cgyqldqp  于 2023-09-28  发布在  C#
关注(0)|答案(2)|浏览(105)

我有一个图像路径列表,并希望在单个水平行中显示它们所引用的图像。每个图像的宽度应该是相同的,他们都应该填补窗口的高度或其分配的宽度作为窗口的大小调整。
我试着用StackPanel来实现这个功能,但是它不能像使用 *-sizing的Grid那样调整图像的大小。

<ItemsControl
        x:Name="HandImages"
        Padding="5"
        ScrollViewer.HorizontalScrollBarVisibility="Visible">

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image  
                    Source="{Binding}"
                    Tapped="ImageTapped"
                    Stretch="UniformToFill"
                    FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>
0g0grzrc

0g0grzrc1#

您可以使用Windows CommunityToolkit中的UniformGrid并将其用作ItemsPanel
1.为您的页面命名。我们需要这样做,以便在页面中从DataTemplate绑定到Items.Count属性。
1.安装CommunityToolkit.WinUI.UI.Controls.PrimitivesNuGet包。
1.还有这个

<ItemsControl ItemsSource="{x:Bind Items, Mode=OneWay}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:UniformGrid
                Columns="{Binding ElementName=RootPage, Path=Items.Count}"
                Rows="0" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
ev7lccsx

ev7lccsx2#

可以用最少的XAML以编程方式完成此操作。这是我使用的XAML。

<Grid x:Name="HandGrid"
          RowDefinitions="*">
        
    </Grid>

然后创建一个可观察的视图集合。我在我的案例中使用了这个。

public ObservableCollection<string> images = new();

然后,添加代码来响应集合中的更改,如下所示。

// Observe the collection somewhere where it is safe to do so
viewModel.images.CollectionChanged += HandChanged;
...
        private readonly List<ColumnDefinition> ColumnDefinitions = new();
        private readonly List<string> ImagePaths = new();
        private readonly List<Image> Images = new();

        private void HandChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if(e.OldItems != null)
            {
                foreach (string item in e.NewItems)
                {
                    HandGrid.ColumnDefinitions.Remove(ColumnDefinitions[^1]);
                    ColumnDefinitions.RemoveAt(ColumnDefinitions.Count - 1);
                    Images.RemoveAt(ImagePaths.IndexOf(item));
                    ImagePaths.Remove(item);
                }
            }

            if (e.NewItems != null)
            {
                foreach (string item in e.NewItems)
                {
                    ColumnDefinition cd = new()
                    {
                        Width = new GridLength(1, GridUnitType.Star)
                    };
                    ColumnDefinitions.Add(cd);
                    HandGrid.ColumnDefinitions.Add(cd);

                    Image image = new() {
                        Source = new BitmapImage(new Uri(FileUtil.GetFullPath(item))),
                        Stretch = Stretch.Uniform,
                    };
                    
                    Images.Add(image);
                    ImagePaths.Add(item);
                    Grid.SetColumn(image, Images.Count - 1);
                    HandGrid.Children.Add(image);
                }
            }
        }

相关问题