Question

我正在制作各种图像库，当前正在通过C＃将图像动态加载到网格中。如果我不应该使用网格来显示图像，我很乐意将其更改为更适合的控件，但它必须对窗口大小调整友好。

调整窗口大小时，我希望发生以下事情：

所有图像均保持相同大小。它们已经适合网格插槽，同时保持了宽高比
网格空间本身也没有调整大小
网格包含更多或更少的行/列，具体取决于窗口中可以容纳多少行/列。

。

这意味着，如果将窗口的大小调整为非常薄且非常高，则网格将包含一列（或两列，或者需要许多列）和许多行以显示图像。

如果宽度非常大但不高，那么它将只有一个（或两个，或者需要许多）行和许多列。等等

不确定是否需要，但是我显示图像的代码是：

for (int i = 0; i < ImageGrid.RowDefinitions.Count; i++) { for (int j = 0; j < ImageGrid.ColumnDefinitions.Count; j++) { Image img = new Image(); BitmapImage bitmap = new BitmapImage(); using (var fs = new FileStream(path, FileMode.Open)) // open the image { bitmap.BeginInit(); bitmap.StreamSource = fs; bitmap.CacheOption = BitmapCacheOption.OnLoad; bitmap.EndInit(); } bitmap.Freeze(); // bitmap isn't properly cleaned up and memory leaks can occur if this isn't here img.Source = bitmap; img.Margin = new Thickness(10); img.Stretch = Stretch.Uniform; Grid.SetRow(img, i); Grid.SetColumn(img, j); ImageGrid.Children.Add(img); } }

我对表格的XAML是：

<Grid ShowGridLines="True" Background="DimGray"> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="175" Width="0"/> <ColumnDefinition MinWidth="755" Width="Auto"/> </Grid.ColumnDefinitions> <Label Name="lblWinSize" Content="Width, Height" HorizontalAlignment="Left" VerticalAlignment="Bottom"/> <TextBox Name="txtnbox" Style="{StaticResource CustomTxtBox}" TextWrapping="NoWrap" Width="Auto" Height="25" VerticalAlignment="Top" Margin="10, 20, 10, 0"/> <Separator Style="{StaticResource VerticalSeparator}" HorizontalAlignment="Right" Height="Auto" Width="2" Margin="0,10,0,10"/> <CheckBox Style="{StaticResource CustomCheckBox}" HorizontalAlignment="Left" Margin="10,50,0,0" VerticalAlignment="Top"/> <Grid Name="ImageGrid" Grid.Column="1" Margin="10,10,0,10" ShowGridLines="True" Background="Gray">  </Grid> </Grid>

抱歉，该XAML的缩进格式无法正确设置。

行/列在代码的其他地方定义，但是我认为不需要替换它。

同样，如果其他控件更合适，我可以改为。

Answer 1

您将要使用包装面板。

<WrapPanel Orientation="Horizontal">
    <Image Width="50" Height="50" Source="bla.png" />
    <Image Width="50" Height="50" Source="bla.png" />
    <Image Width="50" Height="50" Source="bla.png" />
    <Image Width="50" Height="50" Source="bla.png" />
</WrapPanel>

Answer 2

在添加新行之前，请使用WrapPanel使项目的布局填充窗口的宽度，在ScrollViewer内允许垂直滚动，以使内容不会超出可见区域

<ScrollViewer>
  <WrapPanel HorizontalAlignment="Center">
    <!-- your items go here -->
  </WrapPanel>
</ScrollViewer>

如果图像是动态添加的，则希望将它们添加到视图可以绑定的集合中，而不是直接在代码背后将其添加到视图中...使用ItemsControl并定义自己的项目模板和容器：

<ScrollViewer>
  <ItemsControl ItemsSource="{Binding Images}" HorizontalAlignment="Center">
    <ItemsControl.ItemTemplate>
      <DataTemplate>
        <Image Source="{Binding ...}" Height="150" Width="150"/>
      </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <WrapPanel />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
  </ItemsControl>
</ScrollViewer>

Answer 3

c＃：

// here set number of images you want to parse
        int qtyOfImages = 10;

        for (int i = 0; i < qtyOfImages; i++) {
            Image img = new Image();
            BitmapImage bitmap = new BitmapImage();

            using (var fs = new FileStream(path, FileMode.Open)) // open the image
            {
                bitmap.BeginInit();
                bitmap.StreamSource = fs;
                bitmap.CacheOption = BitmapCacheOption.OnLoad;
                bitmap.EndInit();
            }

            bitmap.Freeze(); // bitmap isn't properly cleaned up and memory leaks can occur if this isn't here

            img.Source = bitmap;

            img.Margin = new Thickness(10);

            img.Stretch = Stretch.Uniform;

            //Grid.SetRow(img, i);
            //Grid.SetColumn(img, j);

            // set width and height so the images stay at the same size
            img.Width = 300;
            img.Height = 300;

            ImageGrid.Children.Add(img);
        }

您的xaml如下：

 <Grid ShowGridLines="True" Background="DimGray">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="175" Width="0"/>
            <ColumnDefinition MinWidth="755" Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Label Name="lblWinSize" Content="Width, Height" 
        HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
        <TextBox Name="txtnbox"  Style="{StaticResource CustomTxtBox}"
            TextWrapping="NoWrap" Width="Auto" Height="25" VerticalAlignment="Top" 
            Margin="10, 20, 10, 0"/>

        <Separator Style="{StaticResource VerticalSeparator}" 
            HorizontalAlignment="Right" Height="Auto" Width="2" Margin="0,10,0,10"/>
        <CheckBox Style="{StaticResource CustomCheckBox}"
            HorizontalAlignment="Left" Margin="10,50,0,0" VerticalAlignment="Top"/>
        <!--<Grid Name="ImageGrid" Grid.Column="1" Margin="10,10,0,10" 
                    ShowGridLines="True" Background="Gray">
                --><!--this is the grid where the images would go--><!--
            </Grid>-->


        <!-- set size of wrap panel to your window acutal width -->
        <WrapPanel Orientation="Horizontal" Name="ImageGrid" Width="{Binding ElementName=Window, Path=ActualWidth}">

        </WrapPanel>

    </Grid>

不要忘记将Name="Window"放在您的窗口中，此代码才能正常工作

希望有帮助

如何根据WPF中的窗口大小动态更改网格行和列

3 个答案: