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

3 回答

• 1

  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" 以使此代码正常工作

  希望有所帮助

  回复于 2024-04-27T10:02:32+08:00
• 0

  您将需要使用包装面板 .

  <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>
  

  回复于 2024-04-27T10:02:32+08:00
• 1

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

  <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>
  

  回复于 2024-04-27T10:02:32+08:00